How to show color variant swatches on collection page? And map color name to image?

Highlighted
New Member
1 0 0

Annotation 2020-01-22 141709.jpg

Hello everyone!

 

I have 2 questions if you will allow me.....

 

1) How can I add a color swatch for the variants available to a product on a category/collections page? (Just like the example in the image).

 

2) When opening up a product page, how can you map the variant names to the correct images? Eg: when selecting the 'green' option for a t-shirt, I want to see the image that represents that specific color.

 

 

Thanks.

 

 

0 Likes
Shopify Staff
Shopify Staff
129 11 18

Hey, @Wahsh_Beast 

 

Below are my suggestions for your questions regarding variant color swatches and variant image mapping.

 

1. Some third-party themes have this feature built into them. If you are interested in buying a third-party theme, I'd be happy to suggest a couple that has the feature. Alternatively, you could add some custom code into the theme by hiring a Shopify Expert to do this for you. Otherwise, there is a great app that you can install that will accomplish this, called Collection Swatch Pug.

 

2. We actually offer a free step-by-step guide that you can follow, here, to set this up in your store.

 

Let me know if you have any questions!

 

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes