I have a problem with product gallery changing swatch (f.e. color). I have a configurable product with different size and different color. each configurable product has it's own color image (I added "base, small, thumb, swatch to the image).

On product page first all images are loaded from parent product. If i click on swatch color (f. e. blue) the image for blue product is loaded and added on first position. but the product gallery is not starting/sliding to first image where color image is shown. Gallery shows same picture f.e. 5th position. Default behaviour of Magento is to slide automatically to first image, but it does not.

hope, somebody can help me to fix this issue. enter image description here enter image description here Thanks! martin

1 Answer 1


... I think, I found the bug. Magento removed sliding to first image in swatch-render.js:

 updateBaseImage: function (images, context, isInProductView) {
        var justAnImage = images[0],
            initialImages = this.options.mediaGalleryInitial,
            gallery = context.find(this.options.mediaGallerySelector).data('gallery'),

        if (isInProductView) {
            imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
            isInitial = _.isEqual(imagesToUpdate, initialImages);

            if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
                imagesToUpdate = imagesToUpdate.concat(initialImages);

            imagesToUpdate = this._setImageIndex(imagesToUpdate);

            if (!_.isUndefined(gallery)) {

            if (isInitial) {
            } else {
                    selectedOption: this.getProduct(),
                    dataMergeStrategy: this.options.gallerySwitchStrategy
        } else if (justAnImage && justAnImage.img) {
            context.find('.product-image-photo').attr('src', justAnImage.img);

just add gallery.first(); in line 1253 in vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

Copy js file to your theme /app/design/frontend/Vendor/default/Magento_Swatches/web/js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.