Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
{% 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 %}
@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

carolineschnapp commented Apr 3, 2014

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

@Caroline-Elisa

This comment has been minimized.

Copy link

Caroline-Elisa commented May 14, 2014

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('/');

@guscastaneda

This comment has been minimized.

Copy link

guscastaneda commented Jun 24, 2014

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?

@Jtmichel

This comment has been minimized.

Copy link

Jtmichel commented Feb 5, 2016

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

@Jtmichel

This comment has been minimized.

Copy link

Jtmichel commented Feb 5, 2016

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?

@nsbabrah

This comment has been minimized.

Copy link

nsbabrah commented May 15, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.