Adding Color Swatches to Debut theme instead of Dropdown

[tb1313]

Dear Tejas,

I read your post above, and followed your advises but i have issues and questions :
1) the dropdown for colors still appear
2) In the developper tool on Safari there are 10 errors, and I’m very not familiar with js
3) when i click on a different color, it doesn't call for the right picture ...


Please help me

my url is blumkine.myshopify.com and for now, i only put color swatches in https://blumkine.myshopify.com/collections/tops-en-jersey/products/dee-dee-top?variant=3701951715753...
I thank you in advance,
Best regards,

Tb1313

[Adrien2p]

Hi there,

I had encounter the same trouble to add the swatch module to my debut theme.

So I created a repository with the step to follow if you want to give a try and feedback please. shopify-debut-swatch 

Cheers,

[zainmarfani]

hi,

I used the link you posted. The swatches are popping up on my product page however, i am having some issues with the swatches actually working as buttons. I cant click the other color options. Also the name of the color does not display. Any chance you could help out with that.

[PSM]

@Adrien2p Thanks for the detailed step-by-step. Worked like a charm. I have one small request. Do you know how to display the Color text on Mouse-over (hover) or if a color variant is selected?

[Adrien2p]

Hello @zainmarfani ,

Do you have a screen shot or something I could look at it ?

[Adrien2p]

Hello @PSM ,

Since the color is the second part of your color option code in the variant of the product, depending on your value (hex or text) you could had a tooltip management https://www.w3schools.com/css/css_tooltip.asp and then put your color text here.

[PSM]

Thanks @Adrien2p. So I assume I add the styling into the custom.css file right? Sorry for the newbie questions.:) Still getting a hang of this. Thanks in advance

[Adrien2p]

No problem at all

Yes you can add it to the custom.css file and then you just have to surround the swatch element with that

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

[Addyboy]

Hey @Adrien2p . Thanks for the step by step doc. I am unable to find href="{{ 'theme.css' | asset_url }}" in theme.liquid. Can you help me out please? THanks

[Adrien2p]

Hi,

Either you should bind theme.css or theme.min.css depending your improvement