Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Created March 31, 2016 01:23
Show Gist options
  • Save carolineschnapp/d3c1af82b915e9cae82929e6486f22fe to your computer and use it in GitHub Desktop.
Save carolineschnapp/d3c1af82b915e9cae82929e6486f22fe to your computer and use it in GitHub Desktop.
"Grouped variant images". Solution good for all themes, no change to markup required.

What to do

  1. Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
  2. Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.

How that works, essentially

Only the images associated to the currently selected variant are shown. Other images are hidden.

What to expect, the specifics

  1. On page load, only the images associated to the selected variant will be shown.
  2. When a new variant is selected, only the images associated to that new variant will be shown.
  3. The wrapper of the image, if one is used, is hidden, so there will be no left-over border shown on the page when an image is hidden.

Requirement

jQuery 1.7 or later.

{% assign option_name = 'Color' %}
{% if product.options contains option_name %}
<script>
// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
.not('#related-products img') /* Except related products, thumbnails not clickable */
.not('a[href^="/collections/"] img') /* Except related products */
.not('a[href^="/products/"] img') /* Except mini-cart products */
.not('header img') /* Except mini-cart products, thumbnails not clickable */
.not('#drawer img') /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
.not(':first'); /* Except first one, i.e the main image */
var optionSelect;
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == option_name %}
{% assign option_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if product.options.size == 1 %}
optionSelect = '.single-option-selector';
{% else %}
optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';
{% endif %}
jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
var optionValue = $(this).val();
thumbnails.each(function() {
var wrapper = $(this);
while ( wrapper.parent().children().length === 1 ) {
wrapper = wrapper.parent();
}
if ( jQuery(this).attr('alt') === optionValue ) {
wrapper.show();
}
else {
wrapper.hide();
}
});
});
</script>
{% endif %}
@viredner1993
Copy link

viredner1993 commented Aug 19, 2018

Hi Caroline:

Can you please tell me how it is work with swatches in debut theme? One more thing i have many images for 1 variants so i want to show all images when i select the color swatch.

Please reply fast.

Thank you

@mbaglo
Copy link

mbaglo commented Jun 13, 2020

Hi, please I need a code to automate ALT text to generate as Product Title. I use the Turbo theme. I can't seem to find where to change the image.alt to product.title. Thanks for your help.

@miketester1234
Copy link

@GoInterstellar @tdmGitHub @DonnaRx i have a solution for 3 options, but it has a different approach using filenames and grouping by classes.

Hi can you please share this solution? It would be massively helpful

@CS-Github20
Copy link

I'm having trouble getting this working on the current Debut theme (V17). I've pasted this code into the product.liquid file and modified the alt tags to match the color variants I'm using, but the product page still loads all the images instead of the images for each variant (Alt tag). Any ideas?

@markpepitoc
Copy link

Hello, is someone found a solution to remove the white space?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment