(Impulse Theme) Only show images that's related to your color swatch / product variant

jordanho234
Visitor
3 0 0

Website: https://www.declutterd.com/products/adjustable-plant-stand-normal?variant=32862851858541
Theme: Impulse

Hi, this seems to be a problem that a lot of store owners have but I can't find a specific solution for the Impulse theme.

I want to be able to show all the images that's related for one specific product variant based on color. For example when my product's "natural" color is selected, I want the black and dark brown images to go away. I've labeled all my images' alt text to match that of my color swatch. 

Please let me know what I need to do, your help is much appreciated.

Replies 4 (4)

herz
Tourist
6 1 0

Looks like you figured this one out! I'd love to know how you did it, as I'm facing a similar challenge.

 

Thanks!

fernando28
Tourist
9 0 3

Hey there, @herz! How are you doing today?

Do you still need this implemented? I'd love to work on it for you!

Feel free to shoot me an email at fbesc28@gmail.com and I'll be happy to help : )

 

Thanks and have a great day,

 

Fernando

Fernando | Webflow -> Shopify Designer & Developer
Please leave me a like if my response has been helpful : )
Feel free to contact me for any questions and projects at fbesc28@gmail.com
DavidCouillard
Shopify Partner
9 1 8

As of version 3.6.0 of the Impulse Theme, it's now possible to only show product variant images related to a specific color:

Here is the documentation on how to do it:

https://archetypethemes.co/blogs/impulse/create-variant-image-sets

David Couillard
Ecommerce Marketing Consultant
ecommerceguy
Visitor
1 0 0

I'm using version 7 of Impulse theme and the above works but how do we deal with the images we want displayed that are 'common' to all variants?   I only want the variant image to show when the variant swatch is selected.  Currently I am seeing ALL of the variant images showing for every variant.  I tried assigned multiple sets to the 'common' images but it is not possible to assign multiple sets.  Any idea?  I thought the idea of 'variant' images was exactly what I am trying to accomplish.  Another option is I can hide a variant image using css but I haven't checked to see if I can isolate the specific variant page by ID or class (perhaps by using variant ID or something).

 

Anyhow, any help would be appreciated.