Adding Color Swatches to Debut theme instead of Dropdown

Solved
JordanM
Explorer
61 2 11

I recently created my Shopify store using Debut theme, but i faced one issue when i checked how my customer chooses his/her product. So the problem is that when the customer enters the product page they see photos of the product,that they can select, and a little dropdown that actually selects the variant that he/she wants to add to cart. The issue is that my product has a lot of variants and they may get confused by which name to which photo belongs so i thought that it would be great if i could add color swatches so that they can navigate and checkout easier. I would be pleased if someone could help me with this.

Thanks in advance!

Replies 45 (45)
AvidBrio
Shopify Expert
231 12 18

@Gaushiya  you can share the solution 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
gravitysoftware
Tourist
12 0 3

I would like to recommend our application. Our app displays swatches on product pages, collection pages and homepage. It integrates with all popular themes. By default it uses the images assigned to the variants to render the swatches. You can customize the swatches by uploading images in the app panel. It's easy to use & no coding required.

Brittany_Witt
Explorer
46 0 12

@Adrien2p thanks so much for your step by step guide! It worked perfectly for me! Would you happen to have a guide, or point me in the direction of another guide, that explains how to do this process for sizes, and other custom variant options?

For example, here is a product that offers a color variant of gold, rose gold or silver (I still need to add the color hex codes), and a size variant:

variant1.PNG 

 I would want the color variant to sit above the size variant rather than side by side as they currently are.

Here's another unique example of a product that comes in either gold or silver but also has a secondary color option to choose from:

variant2.PNG

Next is another product we have that comes in either gold, rose gold or silver but you can also choose the letter you want on the necklace:

variant3.PNG

And this last example shows a product that does not have a color option, it only comes in gold, but has a unique birth month/flower option to choose from:

variant4.PNG

Any idea on how I can create the same swatch look for all these other unique variant options?

Much appreciated!

Brittany Witt
maron1209
Excursionist
23 0 5

Hi @Tejas_Nadpara , 

 

I just saw your reply to the swatches buttons in the debut theme. I managed to add them to my product pagen, but still have the dropdown shown. Also, when I select a size button and add to cart it uses the sizes from the dropdown. Are you able to help?

AnkurMathur
New Member
2 0 0

Hi Tejas, I need similar help where wanting to either have color based variants to switch in drop down when user selects variant photo or have this swatch.liquid work for me with radio buttons. Right now doesn't seem to be working. Let me know if I can get some help from you. 

I am using Debut Theme

karinalang22
New Member
1 0 0

Hello Tejas!

I also want to add color swatches to my Shopify page and was wondering if you could help me out, thank you so much! If you prefer, you could contact me via email at karinalang2299@gmail.com

Thank you so much!