Show color variant images of a product when selected, also show the variant color as a different product

Highlighted
Tourist
4 0 1

I want to show the images of the color variant of the product when the color is selected.

Also i want to show the color variant of a product as a different product in Collection.

Example:

I have same design tshirt in two different color: blue and black.

When I select the blue as variant on black tshirt page.It should show only images and cost of blue variant.

And the blue and black t-shirts should also be shown as different product in collection.

I am using brooklyn theme. Dying to get this done.

TIA,

Pooja  

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
25 0 2

Hey Pooja,  

I am Josh,  a Support Guru here at Shopify and I will be helping you out! :) This is a great question.  

We actually have a document on how to customize something like this into your theme, full step by step instructions can be found if you click here.    

There are also some great apps that would allow you to set this kind of thing up as well: 

Swatchify

Swatches

Both apps are great and they come with free trials so you can test them out before you commit to using them.  


Have a great day! :)

Joshua S.
Shopify Support
24/7 Support: 
1-888-746-7439

 

0 Likes
Highlighted
Tourist
4 0 1

Hi Josh,

Thanks for giving prompt response. My main question is how can we add color variant of a product as a different product. Also, i want to show the color variant product when the color swatch is selected.

For reference: as you can see in following url only images related to the variant is shown and that changes different color swatch is selected.  

https://publicrecapparel.com/products/all-day-every-day-pant?variant=3625227716

Thanks,

Pooja  

1 Like
Highlighted
New Member
1 0 1

Hi Pooja,

 

I have same problem. Would you please let me know how you fixed it?

 

Thanks,

Negz

1 Like
Highlighted
New Member
3 0 0

Me too Negz. Any insight from anyone?

0 Likes
Highlighted
Tourist
32 0 2

Definitely following this post for a possible solution

www.cafevagrant.com - Web Design & Marketing Strategy
0 Likes
Highlighted
Shopify Expert
112 0 23

As far as I know there is no official way to do this or an app that does it, but it is definitely possible using some liquid magic, javascript, and alt tags on the product photos. I have done it here:

https://shwoodshop.com/collections/sunglasses/products/canby-wood-sunglasses

0 Likes
Highlighted
Shopify Expert
112 0 23

this app does kindof the opposite - it links separate products together to make it look like they are one product, but i think it might have some SEO reprocussions and loads a little funky

 

https://apps.shopify.com/product-colors?surface_detail=color+images&surface_inter_position=1&surface...

0 Likes
Highlighted
Tourist
4 0 0

Hello Josh,

 

Hope you can help me with this. I want to be able to show the variant image when you select that variant- adding one these swatches apps doesn't really work for me as my variants are different designs. Please have a look at this example: https://www.goodjoanhome.com/collections/rugs/products/lucie-tonal-geo-rug?variant=32468875673733

 

When selecting black & white 2, I'd like for the second rug image to appear in the screen. Is there any way to do this?

Thank you in advance, 

Sara


@Strong wrote:

Hey Pooja,  

I am Josh,  a Support Guru here at Shopify and I will be helping you out! :) This is a great question.  

We actually have a document on how to customize something like this into your theme, full step by step instructions can be found if you click here.    

There are also some great apps that would allow you to set this kind of thing up as well: 

Swatchify

Swatches

Both apps are great and they come with free trials so you can test them out before you commit to using them.  


Have a great day! :)

Joshua S.
Shopify Support
24/7 Support: 
1-888-746-7439

 


 

0 Likes