Variant selector

Shopify Discussion

Topic summary

Issue: The product variant selector isn’t syncing with product images (selecting a variant does not switch the displayed image). A screenshot of the selector was provided.

Requests for info: One responder asked for the store URL and more detailed steps/context to diagnose.

Proposed solution: Another responder suggested verifying that variants and images are correctly linked, then implementing JavaScript to switch images on variant change. Example JS listens to the variant dropdown and shows/hides images based on a data attribute (e.g., data-variant-id) matching the selected variant ID. They also advised adding data attributes to product image markup (via Liquid) to associate each image with the correct variant ID.

Key technical points:

  • “Variant selector” refers to the dropdown that changes the product variant.
  • Image switching requires images to include data attributes tied to variant IDs and a JS change handler to toggle visibility.

Status: No confirmation from the original poster, no store URL shared, and no verified fix yet. The thread remains open with suggested next steps to implement the JS and proper data attributes or seek a Shopify developer if needed.

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

Hello Guys,

Trying to work this block
The variant selector should be matched with the product images but doesn’t work.
can anyone help?

variant selector.jpg
variant selector.jpg487×553 20.1 KB

2

Hi @Kiel2
Can you please share the store URL and the task in detail so that I can help you better.

3

Hi,

Hope variants and images are correctly linked ? if it is ok then you need to add javascript for variant image switching

Javascript code example

document.addEventListener("DOMContentLoaded", function() {
    var productSelect = document.querySelector('.product-form select[name=id]');
    var productImages = document.querySelectorAll('.product-single__photo');
    
    productSelect.addEventListener('change', function() {
        var selectedVariant = this.value;

        productImages.forEach(function(img) {
            if (img.dataset.variantId == selectedVariant) {
                img.style.display = 'block';
            } else {
                img.style.display = 'none';
            }
        });
    });
});

Add data attributes to product images (to link them to variant IDs)

{% for image in product.images %}
    
{% endfor %}

Hope this will help. If you are not able to implement the above code then you can go for Shopify developer