Hide additional variant thumbnails on select on Shopify product page

Technical Q&A
1

Hi,

I’ve build a colour swatch selector for my products on my Shopify store. The selector works perfectly except for one issue - I’m would like to hide other colour variant image thumbnails when one colour is selected.

Problem: The selector currently selects the images assigned to each product by the image’s alt text - I am now uploading products by a different method that no longer allows me to manually assign image alt text to each image.

Solution: Adjust the selector to select images that are assigned to the product colour variant, not by image alt text. This way the images will only be visible to the colour variant that is selected.

Any help would be greatly appreciated; thank you.

theme.js https://pastebin.com/vq2mrmnb

_filterThumbnails: function(variant){
  
  if(variant.featured_image != null && variant.featured_image.alt != null){
    
    $('[data-thumbnail-color]').hide();
    
    //show thumbnails for selected color
    
    var selected_color = variant.featured_image.alt;
    var thumbnail_selector = '[data-thumbnail-color="' + selected_color + '"]';
    $(thumbnail_selector).show();
  }
  
  else {
   
    //show all thumbnails
    $('[data-thumbnail-color]').show();     
  }
  
},

product-template.liquid https://pastebin.com/tiPdn2ff

{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              
                {% for option in product.options_with_values %}
                  
  

                    {%if option.name == "Colour"%}

                    
                    {%assign index = forloop.index %}

                    

                      {%for value in option.values%}
                      
                      
                      {%endfor%}
                    

                    {%else%}

                                       

                    
                    {%endif%}
                  

                {% endfor %}
              

            {% endunless %}

blue-selected.png
blue-selected.png2160×1275 138 KB

red-selected.png
red-selected.png2160×1275 138 KB

product-listing.png
product-listing.png465×1133 87.9 KB

2

Hi,

This article here may helps: https://shopify.dev/tutorials/customize-theme-select-variants-by-clicking-images

It’s using Javascript to change the main product image while you selecting variants.

the problem might be, in the article it’s a single option product, instead of the multiple options products in your case.

You probably need to combine the logic mentioned in this article with your product slider.