title: Shopify - Show multiple thumbnails per variant - Minimal theme
body: <p><em>Note - Please read the thread through, it's quite long, if you need more info, or code examples, please ask before downvoting; I'm not going anywhere and will be checking this regularly, and so can and will provide anything extra</em></p>
  
  <p>Lots of these posts around but no proper answer. The Minimal theme is an incredibly popular one on Shopify, and many people ask this question.</p>
  
  <p><strong>Q: How do I display multiple thumbnail images per variant</strong> - similar to this post, 
  <a href="http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants" rel="nofollow">http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants</a></p>
  
  <ul>
  <li>I have 6 images,3 black, 3 brown. </li>
  <li>Black shoe is shown, image thumbnails show the 3 black images. </li>
  <li>Brown shoe variant is clicked.</li>
  <li>Black thumbnail images are removed/hidden. </li>
  <li>3 Brown thumbnail images are added in/shown.</li>
  </ul>
  
  <p>There is code floating around, notably here, <a href="https://gist.github.com/kyleaparker/560a3847860bace1d680" rel="nofollow">https://gist.github.com/kyleaparker/560a3847860bace1d680</a> </p>
  
  <p>in the top section, gistfile1. 
  However due to differences in the themes, this doesn't work on Minimal as plug'n'play.</p>
  
  <p>The code below, is what controls the main featured image, and the thumbnails on the Minimal theme.</p>
  
  <pre><code>&lt;div class="product-single__photos" id="ProductPhoto"&gt;
          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
          &lt;img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg"{% if settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %} data-image-id="{{ featured_image.id }}"&gt;
        &lt;/div&gt;
  
        {% if product.images.size &gt; 1 %}
  
          &lt;ul class="product-single__thumbnails grid-uniform" id="ProductThumbs"&gt;
  
            {% assign featured_alt = product.selected_or_first_available_variant.option2 %}&lt;!-- this line relates to the variant image code --&gt;
            {% for image in product.images %}
            {% if image.alt == featured_alt or image == featured_image %}&lt;!-- this line relates to the variant image code --&gt;
  
              &lt;li class="grid__item wide--one-quarter large--one-third medium-down--one-third"&gt;
                &lt;a data-image-id="{{ image.id }}" href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail"&gt;
                  &lt;img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}"&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            {% endif %}
            {% endfor %}
          &lt;/ul&gt;
  
        {% endif %}
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the code that from the github page which controls the changing of thumbnails, with class/id changes to make reference to the code above.</p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function($){
  var images = [];
  {% for image in product.images %}
      images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"});
  {% endfor %}
  
  var thumbnails = $("#ProductThumbs");                         
  $('#product-select-option-1').change(function() {
  var selected = $(this).val(), mainImage = jQuery('#ProductPhoto  img').attr('src').replace('_medium', '_grande');
  
  thumbnails.hide().html("");
  arr = [];
  var addImage = $.each( images, function( i, image ) {
    var alt = images[i].alt, url = images[i].url;   
    if (alt == selected || url == mainImage) {
  
  // this code tries to build a new &lt;li&gt; tag for each thumbnails
      thumbnails.append('&lt;li class="grid__item wide--one-quarter large--one-third medium-down--one-third"&gt;&lt;a href="' + url.replace('_medium', '_grande') + '" class="product-single__thumbnail"&gt;&lt;img src="' + url + '" alt="' + alt + '"&gt;&lt;/a&gt;&lt;/li&gt;');
    }
  });
  
  arr.push(addImage);
  $.when.apply($, arr).done(function () {
    thumbnails.fadeIn(); 
    $('#product .product-single__thumbnails a').on('click', function(e) { 
      e.preventDefault();
      switchImage($(this).attr('href'), null, $('#ProductPhoto img')[0]);
        });
      });
    });
  });    
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>However the above code doesn't work, <a href="https://retailtherapyboutique.myshopify.com/collections/womens/products/tamaris-26606-25-knee-length-boots?variant=18734617287" rel="nofollow">https://retailtherapyboutique.myshopify.com/collections/womens/products/tamaris-26606-25-knee-length-boots?variant=18734617287</a> 
  password: schaum</p>
  
  <p>Black images are displayed, click brown boot color option, the main image changes but the thumbnails don't change, same with the grey boot.</p>
  
  <p>Have I missed something glaring obvious, or left in parts of the code from the github page that should be removed - or should it just all be re-written?</p>