How to show only thumbnails of selected product variant in Shopify

Question

If I have a product which has 10 styles, and then every style has 10 colors and every product variant has at least 2 images (front and back), current Shopify theme will show all thumbnails (under featured image) of product variants. This situation will give bad UX experience to customers, since showing all variant images will make the product page too crowded.

I have tried to modify code as below. But it didn't show any thumbnail at all.

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
          {% for variant in product.variants %}
            {% if variant == product.selected_or_first_available_variant %}
              <li class="grid__item wide--one-quarter large--one-third medium-down--one-third">
                <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                  <img src="{{ image.src | img_url: 'thumb' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>

Anyone who can help me to figure this out? I'd like to show thumbnails of selected style and color of current product.

Thanks!

Rudolf Manusachi Rudolf Manusachi · Accepted Answer · 2016-12-02T02:45:42

I think you should hide all thumbnails except what you need to show trough css + js. For example add class .thumb and 'stylename' to all your thumbnails (li elements)

and in JS where function on "select style" is defined add .show to all elements with class with selected "stylename"

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
          {% for variant in product.variants %}
            {% if variant == product.selected_or_first_available_variant %}

              <!--let option1 is style-->
              {% capture stylename %}{{variant.option1 | handle}}{% endcapture %}

              <li class="thumb {{ stylename }} grid__item wide--one-quarter large--one-third medium-down--one-third">
                <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                  <img src="{{ image.src | img_url: 'thumb' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>

...somewhere in JS where your on "select" variant function is defined

$thumbs = $('.thumbs');
$options.on("change", function(){
  ...
  $thumbs.hide();
  $('.thumbs.' + $(this).data('stylename')).show();
});

How to show only thumbnails of selected product variant in Shopify

1 Answers