Hide additional variant thumbnails on select on Shopify product page

[tomgarrad1]

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 %}
              <div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">  

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

                    <label>{{option.name}}</label>
                    {%assign index = forloop.index %}

                    <div class="variant-swatches">
                      {%for value in option.values%}
                      <input class="single-option-selector-{{ section.id }}" id="color-{{forloop.index}}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{%endif%}/>
                      <label for="color-{{forloop.index}}">
                      <img src="{{ value | escape | strip | downcase | replace: ' ', '-' | append: '.png' | asset_img_url: '300x' }}"/>
                      </label>
                      {%endfor%}
                    </div>
                    {%else%}

                    <label for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>                   

                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                    {%endif%}
                  </div>
                {% endfor %}
              </div>
            {% endunless %}

[JonathanX]

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.