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

New Member
1 0 1

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
729 80 165

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

New Member
1 0 0

Hey, Dirk, of course we are interested in themes with built-in such a functionality! Could you please suggest some for Clothing and fashion industry.

5 1 1

Prestage Shopify theme

you can contact us on :)

8 1 1

Hello Dirk. The question that was asked here was how to add color swatches to the Collection page; but the modifications to the theme.js file adds color swatches to the Products pages. Interestingly enough, I have found this same question asked a number of times in my search for an answer and each time the solution given does not seem to be correct.

I have the Debut Theme and am in the final stages of completing a new Shopify store for my client. Now they are asking me to implement Color Swatches on the Collections page and I am searching for a solution that does not involve a 3rd party app with a monthly cost. I'd be quite happy to purchase a plugin with a one-time cost, but these apps that are charged monthly are unacceptable to me.

Any thoughts as to the best solution?