Debut Theme - Add Color Swatches to the Collection Overview

New Member
4 0 0

Hi all,


I have run into a problem with my shopify store.

I am currently trying to setup up color options underneath the product pictures on the collection pages "Men" and "Women".


I know there are Apps or paid Themes with these options but there should be an option without buying an app or theme. I am grateful for any suggestions even if it means crawling inside the code. I hope some of you can help me.


My current store: Duradero Clothing - Men Collection

I want to go from the left/top to the right/bottom view:

image.pngWithoutimage.pngWith Color Swatches


please check DM

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
Shopify Staff
Shopify Staff
140 32 36

Hi @Duradero ,


Dani here from Shopify!


Like you said, there are lots of apps and paid themes that will include this for you, but we do also have this tutorial for how to add this to your theme yourself. By default the style of the swatches is different than the image you shared below, but if you are familiar with code you may be able to customize the styling to match exactly what you would like. Before testing out this tutorial I would recommend making a duplicate copy of your theme. This ensures that you have a back up in case anything were to happen. You'll also notice that this is an advanced tutorial, so if you're not comfortable making these changes yourself I'd suggest reaching out to one of our Shopify Experts for help integrating this.


I wanted to share a few third party apps that can be easily installed into your store as well. If you don't feel comfortable making the code changes yourself, this may be a great alternative.


Since you're interested in store design, have you taken a look at our free Shopify Academy course How to Design Your Online Store (with Zero Design Experience)? It's pretty comprehensive so may even include some tips and tricks that you haven't thought of.


Since we're now in that time - do you have a game plan for Black Friday/Cyber Monday? It's the busiest shopping season for our merchants, so I wouldn't want you to miss out! We recently re-launched our BFCM toolbox for the 2019 season. We're hoping for a breakthrough year for all of our merchants so if you have any questions leading up to BFCM, definitely reach out to us for support!


All the best,



Dani | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

New Member
4 0 0

Hi Dani,


thanks for your reply and the tips for the upcoming BFCM.


Regarding the tutorial: I saw that one too but it is my impression that this tutorial aims to display color swatches at the product page itself, right?

Since my color already switches by clicking on the pictures itself, I do not need these features. I need the swatches on the collection pages.


Have a nice day.


New Member
1 0 0

Hi, did you find a solution for color swath on the collection page ? I also have the debut theme, and I can`t find any solution ... My color are also switiching when clicing on the product so I need the swatch on the collection page. 


If you have any solution, I'll be very thankfull. 


Kind Regards,