Show only thumbnails related to the selected color variant.

Highlighted
Shopify Partner
22 0 1

Hi everyone,

Is there a way to only display thumbnails related to the selected color variant on a product page?

For example, when I have three variants, Red, Blue and Green. And each color variant has 2 images associated with it. Rather than showing 6 thumbnails underneath the product image, can I simply show the 2 thumbnails that correspond to the selected color variant?

Thank you for any help!

 

0 Likes
Highlighted
Shopify Expert
465 0 35

what plugin are you using for the image gallery?

Trevor www.carlowseo.com
0 Likes
Highlighted
Shopify Partner
22 0 1

Hi CarlowSEO,

I'm using Caroline Schnapp's excellent Color Swatches (http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products...) and just a simple gallery that uses JQuery for Zoom functionality.

 

0 Likes
Highlighted
Shopify Expert
465 0 35

I understand using the Caroline example for the color swatches, but somewhere it is programmed to also select the proper image from the gallery.

In that same call you could have it hide all of the thumbnail classes, and unhide the thumbnails that have the color in the alt attribute (basically how it picks the right image from the gallery)

Trevor www.carlowseo.com
0 Likes
Highlighted
Shopify Partner
22 0 1

Would it be possible to make that happen, and still retain the ability to select the 'first' image in a series? (The front image)

I can't see the solution to that, as making the ALT text different from the swatch names, means the swatch associations break.

0 Likes
Highlighted
Shopify Expert
465 0 35

First you would have to hide all of the thumnails via css 

You would use jquery and the attribute contains syntax and it would still look at the alt text on the image... not the LI etc

Not sure if it would work but with some fiddling I am sure you could get it...

 

 

Trevor www.carlowseo.com
0 Likes
Highlighted
Tourist
7 0 4

I have the same exact issue with my store. Please let me know if you figured out a solution :)

 

Thank you!

0 Likes