How to display product swatches in your in Shopify 2.0 Dawn theme

Here we are again with another article that was inspired by — the client 👏👏

No, seriously, when I get to repeat a task too many times for clients, it only tells me one thing: Go write an article about that!

And so, today we will be looking at how to display the color variants of a product in your Dawn theme using Shopify store 2.0. This article assumes you have the basic knowledge of HTML, CSS and Liquid templating language bla bla bla — I’m only saying this so i don’t have to explain every line of code.

🔹 Before I start it’s worth noting the following assumptions:

• Your products have “color” variants
• We will be using HTML color names for your variants

If everything goes well at the end of this tutorial you will have something like this

Color swatches preview

🔹 Step 1: Product colors

As mentioned above, we will be using HTML color names in order to keep things simple. W3Schools provide an extensive list of HTML color names. The only constraint is that our products will bear these color names as variant names.

Now, there are ways around this, by mapping custom colour names to the desired HEX value but I will not get into that this time round. Let me…