I have two swatches.. color and size. Is there a way to stop the size swatches from reloading the picture of the product and keep the color swatch working as usual?


1 Answer 1


Product images are changed by default js file Magento_Swatches/js/swatch-renderer.js on click of swatch options, below is the responsible function for it-

  * Load media gallery using ajax or json config.
  * @param {String|undefined} eventName
  * @private
    _loadMedia: function (eventName) {
            var $main = this.inProductList ?
                    this.element.parents('.product-item-info') :

            if (this.options.useAjax) {
            }  else {
                images = this.options.jsonConfig.images[this.getProduct()];

                if (!images) {
                    images = this.options.mediaGalleryInitial;

                this.updateBaseImage(images, $main, !this.inProductList, eventName);

There is another function _OnClick: function ($this, $widget, eventName) which is triggered on click of swatch option and this function calls function _loadMedia causes changes of product images.

So you need to do necessary amends in this file as per your requirement after copying it into your vendor/theme folder.

  • @gonazalo, please give your feedback if you have tried it or not. Oct 11, 2018 at 22:18
  • Thank you i think i know how to do it now! You saved me. Oct 11, 2018 at 22:59
  • if you think my answer helped you then please mark it as answer please Oct 12, 2018 at 2:44

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