Variant selector

[Kiel2]

Hello Guys,

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

[JasmeetVT14313]

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

[Small_Task_Help]

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 %}
    <img class="product-single__photo" data-variant-id="{{ image.variant_id }}" src="{{ image.src | img_url: 'large' }}" alt="{{ image.alt }}">
{% endfor %}

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