Display variant image on variant selection

[DeepanshuRKM]

Although I am able to display all product images with flex slider on the product details page. Here below is my code of product.liquid file

<div class="preview col-md-6">
   {%- if product.media.size > 0 -%}
       <div class="productflexslider">
	  <ul class="slides">
		{% for media in product.media %}
		<li data-thumb="{{ media.preview_image.src | img_url: 'large' }}">
                               
		     {% case media.media_type %}
			{% when 'external_video' %}
			   <div class="product-single__video">
				{{ media | external_video_tag }}
			   </div>
			{% when 'video' %}
			   <div class="product-single__video">
				{{ media | video_tag: controls: true }}
			   </div>
			{% when 'image' %}
			   <div class="thumb-image product_grpup_sticker">
                                {% if product.metafields.custom.markers %}
                                   <img src="{{ product.metafields.custom.markers | img_url: 'large' }}" class="product_sticker" id="variant_image" />
                                {% endif %} 
			   	   <img src="{{ media.src | img_url: 'large' }}" class="zoom-images" alt="{{ media.alt | escape }}" id="variant_image" />
			   </div>
			{% endcase %}
		</li>
	{% endfor %}
	</ul>
	<div class="clearfix"></div>
     </div>
    {% else %}
	<img src="{{ 'img.jpg' | asset_url }}" class="img-responsive" alt="{{ 'img.jpg' | asset_url }}">
    {%- endif -%}
</div>
......
......

{% if product.variants.size > 1 %}
                    
        <variant-selects class="no-js-hidden single-option-selector" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
        {%- for option in product.options_with_values -%}
            <div class="col-4 col-md-4 product-form__input product-form__input--dropdown">
            <label class="form-label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
            </label>
            <div class="mb-4">
            <select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select form-select" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}">
            {%- for value in option.values -%}
                <option value="{{ value | escape }}" {% if option.selected_value==value%} selected="selected" {% endif %}>
                {{ value }}
                </option>
              {%- endfor -%}
            </select>
            </div>
            </div>
        {%- endfor -%}
    
    <script type="application/json">{{ product.variants | json }}</script>
    </variant-selects>
{% endif %}

What should I change in code so that onchange of variant from select it's corresponding image should be highlighted in slider?

[Liam]

Hi DeepanshuRKM,

To change the product image based on the selected variant, you'll need to use JavaScript to modify the slider when the variant is changed.

In your product form, add a class to your select dropdown for easy selection in Javascript:

<select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select form-select variant-selector" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}">

Then, you need to create a JavaScript function that handles the change event for the variant selector. This function should look for the corresponding image in the slider and highlight it.

Here's a basic example of what this might look like:

document.querySelectorAll('.variant-selector').forEach(function(selector) {
    selector.addEventListener('change', function() {
        var selectedVariant = this.value;

        // Find the corresponding image in the slider
        var matchingImage = document.querySelector('.slides li[data-thumb*="' + selectedVariant + '"]');

        // Highlight the image in the slider
        if (matchingImage) {
            // Remove highlight from all images
            document.querySelectorAll('.slides li').forEach(function(li) {
                li.classList.remove('highlighted');
            });

            // Add highlight to the matching image
            matchingImage.classList.add('highlighted');
        }
    });
});

In this code, we're adding a 'change' event listener to each variant selector. When the selector changes, we're looking for an image in the slider that matches the selected variant. If we find a matching image, we remove the 'highlighted' class from all images and add it to the matching image.

You would need to adjust this code to fit your particular needs. For instance, you may need to adjust how you're identifying the matching image, how you're highlighting the image, etc. Also, make sure you include this JavaScript at the end of your main-product.liquid section file, or include it in a separate JS file that is loaded after your product form.

Hope this helps,

[DeepanshuRKM]

Thanks for your answer.