Color swatches in 2.0: extending colors

Hi @remi

Such a good question 😉

Here is how to add some CSS to show the desired color for each tagged special color.

• From your Shopify dashboard, click Online store > Actions > Edit code
• Open the file collection_tag-filter.liquid
• On the CSS in line number 44 replace the entire code between <style> and </style> with this one

 .{{tag}} .fa.fa-circle-o.fa-lg{
background:#3399ff;
border-radius: 50%;
border: 1px solid grey;
{% if tag contains 'dark_azure' %}
color:#3399ff;
background:#3399ff; 
{% else %}
color:{{tag}};
background:{{tag}};
{% endif %}
}

• If you would like to add a second special color (ex : Light Green) you can use this code instead

 .{{tag}} .fa.fa-circle-o.fa-lg{
background:#3399ff;
border-radius: 50%;
border: 1px solid grey;
{% if tag contains 'dark_azure' %}
color:#3399ff;
background:#3399ff; 
{% elsif tag contains 'light_green' %}
color:#EAFCCE;
background:#EAFCCE;
{% else %}
color:{{tag}};
background:{{tag}};
{% endif %}
}

• Click Save

Note : Remember to use an underline for your special colors, like dark_azure and light_green

Let me know if you have any other questions

Kind regards,
Katrine

Thanks a lot @plaktheme 😍 

Hacked around a bit because my color tags have spaces, but from this starting point that was easy to do. Then generated the css statements and pasted in the file (our 12K products have about 100 different color names). Also handled translations that way. Very happy with the result! See screenshot for a small sample. Woohoo!

Hi @remi

My name is Jasmine, a new Shopify expert from Plak support here,

Your color swatches look pretty cool ! You did a great job with the assistance of Katrine 🙂

Enjoy your weekend Remi and feel free to get to back to us whenever you need help.

Jasmine