Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
"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 %}
@bensh

This comment has been minimized.

Copy link

bensh commented Apr 24, 2016

Hi Caroline,
Thanks for this code, it works great, however when this code loads sometimes it doesn't layout the thumbnails correctly, and instead stacks them leaving loads of spare whitespace. Seems this is due to the thumbnails i nthe product pages being spread over multiple lines
Blue shoes stack fine: https://i.imgur.com/eszIPVJ.png
Red shoes do not: https://i.imgur.com/S1gCoaZ.png

Looking into it, using .detach() instead of .hide() fixes the issue but then I'm unsure where to .append() again.

@tdmGitHub

This comment has been minimized.

Copy link

tdmGitHub commented Aug 7, 2016

Caroline- I'm trying to work out how this code could be modified to accommodate more than one Shopify option selector, for example: [Format] and [Size], or even [Format] [Size] [Color]. I took a few tries at it, but I need a little more work on my JQuery skills... my alternative is to flatten my options to one selector containing all variants, but this is not an ideal user experience.

Thank you in advance for any advice you have time to supply. From what I've come across online, you have already been very generous with your assistance to the Shopify community!

@Lannetterice

This comment has been minimized.

Copy link

Lannetterice commented Sep 16, 2016

I have removed sold out variants from my variant drop list and I would like to remove the images as well. This code works great to remove all images except for the one selected. Is there a way I can add images for variants that are in stock?

@swati2008

This comment has been minimized.

Copy link

swati2008 commented Jan 10, 2017

Code is working fine for me when i have only one variant i.e color but not working when i have added another i.e. size.
please help me.
thanks in advance

@jazzu20

This comment has been minimized.

Copy link

jazzu20 commented Jan 29, 2017

awesome code it works perfectly on Minimal theme. but it is not working in Parallax. is there any alternative? :)

@shadowxyz11

This comment has been minimized.

Copy link

shadowxyz11 commented Feb 24, 2017

I just bought the Parallax them and also cannot get it to work on there. Any suggestions or does anybody know of any other alternatives?
Just to note I diid update the jQuery version also.

@DonnaRx

This comment has been minimized.

Copy link

DonnaRx commented Apr 19, 2017

Is there any way to add a second variant to this? For example in furniture:
Black leather/2 seat recliner
Black leather/3 seat recliner
Brown leather/2 seat recliner
Brown leather/3 seat recliner.

@GoInterstellar

This comment has been minimized.

Copy link

GoInterstellar commented Aug 18, 2017

Hey @tdmGitHub did you ever figure out the multiple selector approach? I have a similar need and figured I'd ask...any insight would be greatly appreciated. Thanks!

@GoInterstellar

This comment has been minimized.

Copy link

GoInterstellar commented Aug 18, 2017

Same to you @DonnaRx, any luck solving for products/variants with more than one option? Thanks!

@dirad

This comment has been minimized.

Copy link

dirad commented Dec 9, 2017

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

@millenniumThalken

This comment has been minimized.

Copy link

millenniumThalken commented Jan 8, 2018

The code is somewhat working on the Debut theme, the only problem I am having is that when you first select the product that has many variants, all variant photo show for the initial product, after picking a specific color, then it will only show the pictures related to that color. Is there a way to not show all the pictures at first?

@richietyler

This comment has been minimized.

Copy link

richietyler commented Feb 28, 2018

@GoInterstellar (& @DonnaRx and @tdmGitHub) did you have any luck with the multi-selector option?

@justinma

This comment has been minimized.

Copy link

justinma commented Mar 21, 2018

Hello, I can't seem to get this working in Slate. Is there something I could be missing in the Slate framework?

@simonbeckham23

This comment has been minimized.

Copy link

simonbeckham23 commented Apr 11, 2018

Hi Caroline:

I added the above code to Shopify theme - Brooklyn, Minimal, Debut, and they all work. However, when I add the above code to boundless theme, I wasn't able to get the product page to show image only related to color variant.

Any suggestion? Please help. Thank you.

@83oranges

This comment has been minimized.

Copy link

83oranges commented May 23, 2018

I am using the Handy theme. Please help implement this! Do I just add above code to my product.liquid file?

@viredner1993

This comment has been minimized.

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

This comment has been minimized.

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.

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.