CODEWITHSUNDEEP
jqueryhtmlshopify
jerrythebum
jerrythebum

Reputation: 362

Shopify - Show multiple thumbnails per variant - Minimal theme

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

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.

Q: How do I display multiple thumbnail images per variant - similar to this post, http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants

There is code floating around, notably here, https://gist.github.com/kyleaparker/560a3847860bace1d680

in the top section, gistfile1. However due to differences in the themes, this doesn't work on Minimal as plug'n'play.

The code below, is what controls the main featured image, and the thumbnails on the Minimal theme.

<div class="product-single__photos" id="ProductPhoto">
        {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
        <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 }}">
      </div>

      {% if product.images.size > 1 %}

        <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">

          {% assign featured_alt = product.selected_or_first_available_variant.option2 %}<!-- this line relates to the variant image code -->
          {% for image in product.images %}
          {% if image.alt == featured_alt or image == featured_image %}<!-- this line relates to the variant image code -->

            <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: 'grande' }}" class="product-single__thumbnail">
                <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
              </a>
            </li>
          {% endif %}
          {% endfor %}
        </ul>

      {% endif %}
</div>

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.

<script>
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 <li> tag for each thumbnails
    thumbnails.append('<li class="grid__item wide--one-quarter large--one-third medium-down--one-third"><a href="' + url.replace('_medium', '_grande') + '" class="product-single__thumbnail"><img src="' + url + '" alt="' + alt + '"></a></li>');
  }
});

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]);
      });
    });
  });
});    
 }
</script>

However the above code doesn't work, https://retailtherapyboutique.myshopify.com/collections/womens/products/tamaris-26606-25-knee-length-boots?variant=18734617287 password: schaum

Black images are displayed, click brown boot color option, the main image changes but the thumbnails don't change, same with the grey boot.

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?

Upvotes: 0

Views: 3564

Answers (1)

jerrythebum
jerrythebum

Reputation: 362

As there don't seem to be any jQuery/Liquid experts out there... I was passed this solution by someone which works incredibly well on Minimal theme, as well as numerous others; and its plug'n'play

https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe

Upvotes: 1

Related Questions