Product pages - Add color swatches to products

Highlighted
Excursionist
32 0 5

Hi @Arundas,

Thanks for all of the help so far.  I am trying to implement the last section, re: the colors and pulling through the pre-selected theme colors.  I am getting an error that says it does not recognize "$colorBody".  I can only assume that my theme (Debut) does not have this variable and/or this variable is named something different in my theme (not sure why that would be so, it seems to be a pretty basic naming convention for a free theme from Shopify.)  Do you have any recommendations?

Also, I am still having issues with what is shown as out of stock/selectable.  "Sold Out" variants are based off the availability of the first color variant (where one chooses color first and then size.)  If I select a different color variable I cannot select on the "sold out" size, even if it is not sold out for that color.  I also will get the "sold out" note on my cart button if I select a size listed as available in the boxes but isn't actually available.

Do you have any recommendations for either?

Thanks for your help.  Your additions to the tutorial have otherwise been very helpful and fixed a lot of my problems.

0 Likes
Highlighted
Excursionist
32 0 5

Is there anyone at all who can help with this?  Not just the original responders to this post, but anyone at all?  Any help would be appreciated.

0 Likes
Highlighted
New Member
3 0 0

Yeah, I can help.  bkthemes.design

@BKThemes
0 Likes
Highlighted
New Member
2 0 0
Yes, I can help you.
0 Likes
Highlighted
Tourist
6 0 1

Hi

Thank you guys for your support. I'm using the Debut theme. I followed up the steps on the first page of the thread and the code on page 6 giving by @Nesian. Now I can see the colors and the sizes but I still can see the dropdown menus of them. When I tried to remove the code of the menus, I could not change the selection of color nor size!! Would you help me, please?

What shall I do?

Thanks.

0 Likes
Highlighted
Excursionist
36 3 9

@ShoesOnSolanomy own version is for Supply theme. It's possible other themes have different variables. If you can't find the correct variable name for Debut theme, you may also hard-code your desired color value as a quick-fix. Please Google "how to define a color in CSS".

@ImadHussamyou should NOT remove the menu. If you've implemented the solution correctly, the menu will be hidden from the visitor, but it will still be part of the page. The color swatches that you see are actually just dummy buttons that the visitor can click on. When the visitor clicks on a swatch, the website code is updating the hidden menu so that when submitted, Shopify will get the correct variant to add to the cart.

Please undo your removal of menu (most files have a version history in the Theme editor, so you can rollback to the previous version before your delete), and then ensure again that you're implementing the solution correctly.

---

Anyway I think we should try a different theme than Debut. There are better themes available

Also, if you're not a programmer and you cannot to troubleshoot and fix the code that you broke, I highly recommend hiring an expert. I can only do my best to guide you in the right direction here by posts but I can't fix your code for you unless you give me access and we agree on a compensation for my developer time.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
You're welcome, and thank you too! :)
Do you want me to fix your theme code? PM me.
0 Likes
Highlighted
Tourist
6 0 1

Thanks, @Arundas for your reply,

I did not remove the code of the dropdown menus.

You said that the menu will be hidden at the end, but it did not happen with me, I do not why! I repeated the procedure many times, but the dropdown menus are still visible!! is it about the position of the inserted code?

which theme is better in your opinion? 

 

0 Likes
Highlighted
Excursionist
36 3 9

@ImadHussam  is your website https://laviemate.com ? I couldn't find any swatches in the product page (I'm The Boss with Cat Paint T-Shirt)

If my reply helped you, please give it a Like and mark it as Accepted Solution.
You're welcome, and thank you too! :)
Do you want me to fix your theme code? PM me.
0 Likes
Highlighted
Tourist
6 0 1

Yes, it is.

Actually, I duplicated the current theme, and I worked on it so I will not touch the running one. 

I'm using the preview button to check the result of any changes to the duplicated theme.

sample.png

Thanks for your help @Arundas 

0 Likes
Highlighted
New Member
2 0 3

Hi there,

If you used the code I posted then you are correct, I forgot to cater for one piece of code but I didn't mind the original color dropdown showing alongside the color swatches so I ignored fixing it. I can modify my post to include the solution however for the time being this alternative workaround is probably easier:

Note: Its's best to create a backup of your theme before doing the following just in case you need to revert

1. In product.template.liquid (you might be using a different template so just make sure you're editing the template with the swatch code), find the following code:

 

 {% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">

 

2.  Add the following into the div class:

 

{% if option.name == 'Color' %}hide{% endif %}

 

 3. Now it should look like this:

 

 {% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item{% if option.name == 'Color' %}hide{% endif %}">

 

 4. Save

Basically what this does is hide the default form option (if it's named 'Color') by adding the `hide` class to it's div class.

For those wondering why the color option didn't just hide on it's own. The initial tutorial hid the element using some Liquid & jQuery but since I added my scripts to the theme.js file, I wasn't able to use the Liquid parts of the code without having to get creative, so it was just easier to implement a Liquid solution on the product template.

0 Likes