How to display the image of the selected variant?

Shopify Discussion

Topic summary

Variant image fails to update when selecting a variant from the product’s dropdown; clicking the thumbnails does change the image. The issue is seen on dotewellness.com/products/power.

OP shared main-product.liquid code; a reply notes the code may be forcing the first media (product.media[0]), which would keep the image static. Shopify’s default behavior ties each variant to a single featured image (featured_media) and should switch on variant change.

Support suggested using Shopify’s “Adding Images to Product Variants” guide and asked which theme and customizations are in use, noting heavily customized themes may break default logic. There was a brief misunderstanding about a navigation dropdown (menus can link only to products/collections, not variants), but the OP clarified the problem is the product variant selector.

Other updates: one user asked if only one image per variant is possible (unanswered), another has the same issue, and two YouTube tutorials were shared as potential code-based fixes.

Status: No confirmed resolution. Next steps: review and fix variant-change JS/Liquid to use selected_or_first_available_variant.featured_media instead of product.media[0], and provide theme details for targeted help.

Summarized with AI on December 17. AI used: gpt-5.
1

For some reason when I select a variant the image does not change.

You can check it at this url - https://dotewellness.com/products/power

I attach my main-product.liquid in case you can help me.

Show More 
{%- assign product_form_id = 'product-form-' | append: section.id -%}

{%- for media in product.media -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}- {%- endunless -%} {%- endfor -%}

{%- for media in product.media -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}- {%- endunless -%} {%- endfor -%}

# {{ product.title }}## {{ product.metafields.descriptors.subtitle }}{% if section.settings.show_covid_disclaimer and section.settings.show_covid_before == true %} {% render 'covid-disclaimer', disclaimer: section.settings.covid_disclaimer, background: section.settings.covid_background, border: section.settings.covid_border, font: section.settings.covid_font %} {% endif %} {{ product.description }}

### Helps With{% comment %} accentuate-here {% endcomment %}{% for item in product.metafields.accentuate.helps_with_item %}- {{ item }}{% endfor %}
{% if product.metafields.accentuate.badge_icon %}{% for badge in product.metafields.accentuate.badge_icon %}- {% if product.metafields.accentuate.badge_subtext[forloop.index0] %} {{ product.metafields.accentuate.badge_subtext[forloop.index0] }} {% else %} {% endif %}{% endfor %}
{% endif %} {% if product.metafields.accentuate.verification_of_analysis %} {{ section.settings.certificate_heading }} {% endif %}

{{ section.settings.fda_statement }}

{%- assign product_dock_form_id = 'product-dock-form-' | append: section.id -%}

{% schema %} { "name": "t:sections.main-product.name", "tag": "section", "class": "product-section", "blocks": [ { "type": "@app" }, { "type": "quantity_selector", "name": "t:sections.main-product.blocks.quantity_selector.name", "limit": 1 }, { "type": "variant_picker", "name": "t:sections.main-product.blocks.variant_picker.name", "limit": 1, "settings": [ { "type": "select", "id": "picker_type", "options": [ { "value": "dropdown", "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label" }, { "value": "button", "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label" } ], "default": "button", "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label" } ] }, { "type": "badge", "name": "Badge", "settings": [ { "type": "text", "id": "title", "label": "Title", "info": "Text under badge icon" }, { "type": "text", "id": "type", "label": "type", "info": "Type must match product's tag" }, { "type": "image_picker", "id": "badge_image", "label": "Badge Image" } ] }, { "type": "verification", "name": "Verification", "settings": [ { "type": "text", "id": "title", "label": "Text", "default": "View Verification of analysis" }, { "type": "url", "id": "url", "label": "URL" } ] } ], "settings": [ { "type": "text", "label": "FDA Statement", "id": "fda_statement", "default": "*These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure or prevent any disease." }, { "type": "text", "label": "Certificate of Analysis Heading", "id": "certificate_heading", "default": "View Certificate Of Analysis" }, { "type": "checkbox", "label": "Covid Disclaimer Before Description", "id": "show_covid_before", "default": false }, { "type": "checkbox", "label": "Show Covid Disclaimer Border", "id": "covid_border", "default": true }, { "type": "color", "label": "Covid Disclaimer Background Color", "id": "covid_background" }, { "type": "checkbox", "label": "Covid Disclaimer Large Font", "id": "covid_font", "default": false }, { "type": "richtext", "label": "Covid Shipping Disclaimer", "id": "covid_disclaimer", "default": "

DUE TO SUPPLY CHAIN SHORTAGES OF COVID-19, THIS PRODUCT WILL BE SHIPPED IN OUR SUSTAINABLE PACKAGING FOR A DISCOUNTED OFFER.

" } ] } {% endschema %} ```
2

Hi @AJRAToni ,

I had a look at your store and it seems that you may have resolved the issue yourself, as the variant images do in fact change every time I click on them.

For future reference, we have a guide to Adding Images to Product Variants that walks you through exactly what you want to achieve, without the need for making code edits to your theme!

What kind of theme are you using? And what kind of brand are you building? I’d love to learn more about what you see as the future of your business!

3

When you click on the images it changes, but when you select a variant from the dropdown the image doesn’t change.

I want it to change when the variant is selected from the dropdown.

4

Are you referring to the dropdown in your main menu?

If so, what image is displayed depends very much on what product or collection you have linked to that menu item. You cannot link variants, because as explained in our guide Add, remove, or edit menu items in your online store: “Menu items are links to products, collections, webpages, blog posts, policies, or other websites.”

So each supplement would need to be a different product with a different image, and each individual product would have to be linked to the respective menu item in the dropdown.

I hope that makes sense!

5

Sorry, I think I didn’t explain myself well.

This product has two variants each with an image.
When I select a variant the image does not change, it always shows the same one.

I think it’s because of this, but I don’t know what I should change.
6

It seems I understood your query the first time around: you have a product with variants, and each variant has its own image. You want the image to change whenever a visitor clicks on a different variant. That’s why I linked you to the relevant guide: Adding Images to Product Variants.

Of course, this may not work if you’re using a third-party heavily customized theme, which is why I keep asking you what theme it is you’re using - if you could answer that question and also tell me whether you’ve made a lot of code edits to your theme, it would really help me to help you!

7

Hi,

I have the same problem u did. So i wonder if u fixed this and how u did it.

Greets

8

Am I correct in understanding that I can only assign one image per variant?

9

I believe the issue is in your code, product.media[0] is a reference to the first variant image.

10

Here is the solution. FREE and without App.

11

You can try this tutorial: