How can I add color swatches to my product pages?

Store Design
1

Hello,

I am trying to use color watches on my product pages instead of just buttons with labels. I used this code, but then I cannot select any variants. Help please!! Thanks!

{% if product.variants[forloop.index0].metafields.color.value and option.name == “Color” %}

 

{% else %}

{{ value }}

{% endif %}

2

You can go ahead and customise the background colour of your label based on the colour name.

Simonsron_0-1675661100614.png
Simonsron_0-1675661100614.png1138×454 9.32 KB

like this

3

The color swatches are on my product pages, but I cannot select any variants, including size and color.

When I was editing the code, I had to change “position” to “name” to get the swatches. Does that have something to do with it??

4

You may not have added the input b

{% if product.variants[forloop.index0].metafields.color.value and option.name == "Color" %}

{% else %}

{% endif %}

Based on your code, I have modified it.

But your code doesn’t loop your colour variants.

ox

5

Where do I put this code? I think the problem was I changed an existing code to use the one I have.

6

With your current code you only need to add an input box, but I have a feeling that the current code will only render the first variant.

If you need my help, please contact me.