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

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.






Shopify Staff
Shopify Staff
125 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