How can I fix variant image swatches showing the same color for all variants?

Store Design
,

Topic summary

A user is experiencing an issue with color variant image swatches on their Shopify product page. The problem: All color swatches display the same variant image (the first one) instead of showing the correct image for each individual color variant.

Attempted solutions:

  • Another user suggested two code snippets using forloop.first conditions
  • Neither solution worked: the first returned a placeholder image, the second showed only a single image URL with all swatches appearing as the same color (black)

Current status: The issue remains unresolved. The helper offered to continue troubleshooting via Skype or direct message. The user provided a preview link showing the problematic product page with the malfunctioning color swatches.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello there!

I am currently working on creating colour swatches using variant images and am coming across an issue where the swatch is returning the variant image for all variants (colour and size) rather than the requested one. As a result the image swatch displays the first variant image - which is the same for all colours.

I’m a bit of a newbie so not sure where I am going wrong. Would be grateful for any help/suggestions.

This is a preview of the product page: https://lktmg7oe2kzf9afu-54300377279.shopifypreview.com/products/lighthouse-outback-full-length-ladies-waterproof-raincoat?_pos=2&_sid=6f476b6f0&_ss=r

{%- if is_color -%}
              
              {%- liquid
                assign option_index = forloop.index0
                assign values = ''
                assign max_count = settings.color_swatches_max_items
                assign has_color_option = true
              -%}
              
              
              

            
            {%- else -%}
              
            {%- endif -%}

screen shot.jpg
screen shot.jpg792×564 33.6 KB

2

you can try this one

{% if forloop.first == true %}{% endif %}

if this :backhand_index_pointing_up: was not working try this :backhand_index_pointing_down:
3

Hi @Avi_choudhary ,

Unfortunately these do not seem to work.

The first suggestion returns a no image placeholder.

The second returns just a single image url for each colour variant however they are all for the same colour (ie, they all appear as black, rather than the correct image for each one).

Thanks for your help though!

4

can we connect on skype: live:ramchandra3938

you can direct message me

1 Like