Code to paste at the very top or bottom of your product.liquid template to make clicks on product thumbnails update product option drop-downs.For the Variant Images app.

gistfile1.html

{% comment %}
Place this in your product.liquid template, either at the top or bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) { 
  var variantImages = {},
    thumbnails,
    variants = {};
  {% for variant in product.variants %}
  variants[{{ variant.id }}] = {};
    {% for option in product.options %}
    variants[{{ variant.id }}]['option{{ forloop.index }}'] = {{ variant.options[forloop.index0] | json }}; 
    {% endfor %}
  {% endfor %}
  $.getJSON("/a/variant-images-1?shop=" + Shopify.shop + "&handle={{ product.handle }}", function(data) {
    $.each(data, function(variantId, image) {
      variantImages[image.filename] = variantImages[image.filename] || {};
      {% for option in product.options %}
      if (typeof variantImages[image.filename]['option{{ forloop.index }}'] === 'undefined')  {
        variantImages[image.filename]['option{{ forloop.index }}'] = variants[variantId]['option{{ forloop.index }}'];
      }
      else {
        var optionValue = variantImages[image.filename]['option{{ forloop.index }}'];
        if (optionValue !== null && optionValue !== variants[variantId]['option{{ forloop.index }}']) {
          variantImages[image.filename]['option{{ forloop.index }}'] = null;
        } 
      }
      {% endfor %}
    }); 
    $(window).load(function() {
      thumbnails = $('img[src*="/products/"]').not(':first');
      if (thumbnails.size()) {
        thumbnails.bind('click', function() {
          var imageParts = $(this).attr('src').split('/');
          var image = imageParts[imageParts.length-1].split('?')[0].replace(/(_thumb|_small|_compact|_medium|_large|_grande)/,'');
          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            if (variantImages[image]['option{{ forloop.index }}'] !== null) {
              $('.single-option-selector:eq({{ forloop.index0 }})').val(variantImages[image]['option{{ forloop.index }}']).trigger('change');
            }
            {% endfor %}
          }
        });
      }
    });   
  });
})(jQuery);
</script> 
{% endif %}

SIMPLE THEME users:

If this solution does not work for you, you will need to look at line no 32:

  thumbnails = $('img[src*="/products/"]').not(':first');

In the Simple theme, this won't get you the thumbnails. There's a cart drawer at the top — hidden — that may contain product images. And that's the least of it.

Replace this:

  thumbnails = $('img[src*="/products/"]').not(':first');

... with that:

  thumbnails = $('#gallery img[src*="/products/"]');

The theme has other problems though, when it comes to agreeing with the Variant Images app.

It has two "main" image: one for desktop computers, one for mobile phones.

To make things 100% right, you will need to:

• Use only one main image. Delete the mobile one, remove the 'desktop' class from the other.
• Then remove the 'zoom' behavior by editing the theme's JavaScript
• Then add the lightbox only to the main image.
• Then show all thumbnails, so remove the offset: 1.
• Then listen to clicks on thumbnails to prevent the default browser reaction of opening the image in a browser tab.

Here is what I recommend you do to your theme: https://gist.github.com/carolineschnapp/9961168

If anyone is using the Atlantic theme, you need to change:

Line 32 from
thumbnails = $('img[src*="/products/"]').not(':first');
to
thumbnails = $('.thumb');

Line 35 from
var imageParts = $(this).attr('src').split('/');
to
var imageParts = $(this).find('img').attr('src').split('/');

Hi Caroline!
This solution is not working for us.

Please take a look to our page: http://www.offtrackproducts.com/collections/frontpage/products/basic-all-purpose-saddle-pad

Any suggestions to prevent users to purchase a color / size they don't want?

I'm still having trouble getting this to work with Atlantic, even when I did make the suggested modifications. Any ideas?

Okay, got this working, however it gave me an issue where it's going into a recursive function until the maximum call stack size is exceeded. Has anyone else had this issue?

Hi I had this issue anyone know what the problem with it.