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.
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!
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?