Show Variant Images Based on ALT Tags for Products in Shopify

Show Variant Images Based on ALT Tags for Products in Shopify

        <div class="col-xs-12 col-sm-6 product-img-box {% if settings.product_image_border%} grid-item-border {% endif %}">
          {% if product.images.size == 0 %}
          <div class="product-photo-container" style="padding: 30px">
            <img src="{{ '' | product_img_url: 'grande' }}" alt="">
          </div>
          {% else %}
          <div class="product-photo-container" style="padding: 30px">
            {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
            <a href="{{ featured_image | img_url: 'original' }}" >
              <img id="product-featured-image" src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" data-zoom-image="{{ featured_image.src | img_url: 'original' }}"/>
            </a>
          </div>
          {% if product.images.size > 1 %}    
          <div class="more-view-wrapper ">
            <ul id="more-view-carousel" class="product-photo-thumbs row">
              {% for image in product.images %}
              <li class="grid-item col-xs-4 col-sm-3">
                <a href="javascript:void(0)" data-image="{{ image.src | product_img_url: 'grande' }}" data-zoom-image="{{ image.src | product_img_url: 'original' }}">
                  <img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
          {% endif %}
        </div>
        
        {% comment %} Please at the bottom of product.liquid {% endcomment %}
        
{% assign option_name = 'Color' %}
{% if product.options contains option_name %}

<script>
// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
  .not('#related-products img')                   /* Except related products, thumbnails not clickable */
  .not('a[href^="/collections/"] img')            /* Except related products */
  .not('a[href^="/products/"] img')               /* Except mini-cart products */
  .not('header img')                              /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                             /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .not(':first');                                 /* Except first one, i.e the main image */
  
var optionSelect; 
{% assign option_index = 0 %}  
{% for option in product.options %}
  {% if option == option_name %}
    {% assign option_index = forloop.index0 %}  
  {% endif %}
{% endfor %}
  
{% if product.options.size == 1 %}
  optionSelect = '.single-option-selector';
{% else %}
  optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';   
{% endif %}
  
jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
  var optionValue = $(this).val();
  thumbnails.each(function() {
    var wrapper = $(this);
    while ( wrapper.parent().children().length === 1 ) {
      wrapper = wrapper.parent();
    }
    if ( jQuery(this).attr('alt') === optionValue ) {
      wrapper.show();
    }
    else {
      wrapper.hide();
    }
  });
});    
</script>

{% endif %}