i have configurable product on listing page with swatches enabled .

Configurable product has images swatches - Red , Green, Blue.

Not when i applied Color - filter as Red still images on Listing page -it still shows default configurable product image, instead it should show Red one image of one of Variant Product with Red image.

enter image description here

  • Do you use a custom theme? Default theme works fine. Could you share a link if possible ? Feb 27, 2021 at 3:37
  • @MehmetUygur : please check on - bit.ly/2PbYLRv Feb 27, 2021 at 5:33
  • It seems you're using an ajax refresh plugin when you click a color filter it retrieves and pushes new items by ajax. I checked Mgs/claue theme demo and its color filter working fine. Feb 27, 2021 at 8:41
  • yes but on thier site they have demo of magento old version not magento 2.4 Feb 28, 2021 at 7:01

3 Answers 3


I just faced this exact (or possibly similar) issue and wasted a couple of days trying to figure it out.

The underlying issue is that the jsonConfig of product swatches that is generated for each product on the category view page gets cached.

jsonConfig for swatches is used to get many data of configurable product variations for fast switching on the category view and product view pages, including variation images.

If you clear the block_html cache (and possibly the full_page cache) and click on a specific color to be filtered, it will show the correct variation image of the configurable product, but if you remove the filter and then click on another color, the same variation image will load cause of the cached jsonConfig.

For example, you have a configurable product called "shoes", which has 3x variations: red, blue and green shoes.

When you click on the red filter, it will show the image of red shoes.

But if you then remove the red filter and add a green filter, it will still show red shoes as the image.

When you clear the cache, it will again work as expected for the 1st filter.

It's also a bit inconsistent for some reason, as in it will show correct results for some products, but not for others.

The more you use the color filter, the worse it gets...

I couldn't figure out how to fix the cache issue, so I blocked the usage of the jsonConfig.preSelectedGallery option in Magento_Swatches/view/base/web/js/swatch-renderer.js.

Find and comment out this line:


That functions sets the variation images so they don't have to be brought in via ajax.

But in this case, using the fallback ajax request that loads the correct variation image is a solution to bypass the incorrect/inconsistent jsonConfig cache.

BTW, you can copy the swatch-renderer.js into your theme (e.g. app/design/frontend/{vendor}/{theme}/Magento_Swatches/web/js/swatch-renderer.js), but know that this file changes with most Magento versions, so you will have to update it regularly with each upgrade if you want to keep it updated and use new features that come out.

Hopefully they fix this some day.


This is the default behaviour. Magento 2 is displaying the parent configurable product that contains the variation product with the filtered colour.

To show the child products in search/filter change their visibility to Search.


In your theme go to etc/view.xml add the following code , if code is already exist, kindly use "replace" instead "prepend"

<vars module="Magento_ConfigurableProduct"><var name="gallery_switch_strategy">replace</var></vars> 

Your Answer

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

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