Note: This also works for the Craft, Crave, Sense and Studio Theme.
Click here to view our example store
The Dawn theme, Shopify’s now new upcoming theme, the current gold standard for 2.0 theme customization. But being so, it’s kind of bare. Especially the product page. In this guide we will teach you how to create color swatches AND pattern swatches for product variants.
WeeklyHow has an awesome guide on how to create the color swatch, but let’s take it to the next level with better styling as well as the ability to add pictures within the selection to show patterns, the end result is shown below. Note, the color swatch code WeeklyHow uses slightly differs to the this guide, so the suggestion is to follow the our guide.

Let’s get into it!
Change Main-Product.Liquid
Go to edit code, head over to the Section folder and find main-product.liquid. Once found, scroll down until you find the below code
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
replace the above, with the below code
{% assign variant_needed = null %}
{% for variant in product.variants %}
{% if variant.options contains value %}
{% assign variant_needed = variant %}
{% endif %}
{% endfor %}
{% if variant_needed.metafields.color.swatch and option.name == "Color" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-color: {{variant_needed.metafields.color.swatch}}">
 
</label>
{% elsif variant_needed.metafields.image.swatch and option.name == "Color" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-size: cover; background-image: url('{{variant_needed.metafields.image.swatch}}')">
 
</label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{% endif %}
Add Code To Base.css
Now, head over to the Asset folder, find base.css and paste the below code at the bottom of the file
.product-form__input input[type="radio"] + .color-swatch {
border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */
width: 40px;
height: 40px;
padding: 0;
}
.product-form__input input[type="radio"]:checked + .color-swatch,
.product-form__input input[type="radio"]:hover + .color-swatch {
border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */
}
.product-form__input input[type="radio"] + .swatch {
border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */
width: 40px;
height: 40px;
padding: 0;
color: #000;
display: inline-flex;
justify-content: center;
align-items: center;
}
.product-form__input input[type="radio"]:checked + .swatch,
.product-form__input input[type="radio"]:hover + .swatch {
border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */
background: none;
}
Create The Metafields
You’re done with the coding. Now it’s time to create the metafields in order for you to assign colors/patterns to the variants. Head over to Shopify CMS platform. Click on Settings then Metafields

You’ll need to create 2 metafields, one for color another for image. Once you click Metafields, click Variant

Once inside the Variant setting, click the green button ‘Add Definition‘. First we will add the color swatch, name it Color, then for the namespace and key, put color.swatch, lastly select the type as Color. Then click save

Now click ‘Add Definition‘ again, this time we will create the image metafield, name it Image, then for the namespace and key, put image.swatch, lastly select the type as URL. Then click save

You should now have 2 variant metafields, and with that you are done!

Finally, lets now add the variant. Go to any product, ensure that the product variant name is called Color, and save the product.

After saving, click edit on one of the variants you want to add a color/pattern to. Scroll to the bottom, you will now have 2 options for metafields.

You can now select which you would like to put, for Image metafield you will need to put the url of the image. Best action to do is to upload the pattern, ideally 1:1 ratio, in your shopify file settings, then copying the link to the Image metafield. For the Color metafield, simply click the field and choose the color you like.
If you have both metafields selected, it will choose the Color metafield as the primary selector.
You’re now done! you now have an awesome product variant color swatch on your Dawn theme.
45 Replies to How to Create a Color Swatches on Dawn Theme
In the Assets, there isn’t a Theme.css option, where should we add the code? Base.css?
Hi Kim, correct, base.css would be the correct file.
Hi,
Thank you so much for a detailed and excellent guide. But, by implementing this method, I’m unable to see the value of the variant I’m selecting. Could you improve the code to show the value of the selected variant next to the “Color:” text? So, it would be easier for customers to know which color they’re choosing and what is its name?
Hi Tracy,
Can you show me what you mean, and the link? This was to create the color swatch itself, with no words at all.
Please check the screenshot below:
https://imgur.com/UlWrmiX
You can see that when I choose the yellow color, there is a “Yellow” text showing up next to the “Color:” text. Currently, when choosing an option, there’s no way I can see the name of the option I’m choosing.
Alternatively, you could consider showing the name of the color option when customers hover their cursor over it.
Hi Tracey, the first option would be time consuming for me, let’s go with the second option.
Right after both of the class=”color-swatch” put title=”{{ value | escape }}”. Remember there’s 2 of them, so make sure you put the title in both of the labels. You can even put it in the third label, the last label doesn’t have class=”color-swatch”, but you can put it after the label tag.
good stuff. I saw the Weekly How video and then this
but it works only if the color option is the last option being used: https://imgur.com/a/IzUiu24
if I use the color option (in my case “Pattern”) as the first option, it duplicates the first icon:
https://imgur.com/VgFyqBR
any idea why this would happen (source code is the exact same for both screenshots, FYI)
Hi Ocrip,
It’s because when you loop through the product.variants[forloop.index0], when you put color first it loops like this. Black/S, Black/M, Black/L, Yellow/S, Yellow/M, Yellow/L
As you can see the black color looped 3 times to go through the sizes. So it picks up the first 3 items, and since it’s black, it’ll show black 3 times.
Now if you put size first, color second. It’ll show like this, S/Black, S/Yellow, S/Red. Which is why it works when you put color second.
Indeed, it’s a limitation to this feature. It can probably be fixed, but not really putting too much energy to it.
Thanks for your tutorial. However, I found an issue when testing my product page: The first value of the color option is connected to the featured image of the product by default, even though I assigned another image to that value.
Please see the attachment: https://imgur.com/38FoOjp
Adriatic is the first value of the color option of this product but the issue is that it always shows the featured image every time I choose this value, even though I assigned the second image to that color value (See the attachment). The issue didn’t happen to the second and the third value.
Hope you can fix it!
Thanks
Hey LPN,
The error is actually from the Product Image Slider – which in the picture it looks like you also did this guide of mine.
I’ve fixed this error, you might need to go back to the guide (https://jotting.com/shopify/how-to-create-a-product-image-slider-on-dawn-theme) and redo the steps from ‘Change Main-Product.Liquid’ heading.
Would this hide all the other variants with the not selected color?
if not how I would do that?
Hi Mohamed,
What do you mean by this? Don’t quiet get what you mean by hiding.
Hi, he meant, that when you click blue, then all the images of colour blue are shown only.
That is what I’m looking for also… it’s a bit strange, that shopify hasn’t integrated this feature…
Hi Edwin,
The new Dawn theme version adds this functionality.
Awesome!
Used the tutorial and were able to implement the swatch on our product page..
Wondering if you could help with a slight change
When you select the Swatch Dot..
The Product images changes..
Can we additionally add the Swatch Dot Value ..
Eg. Color : Blue
When you select blue
and when you select red
eg. Color : Red
Hi Feroz,
Definitely an addition I can do, although I need roughly 2-3 weeks. Going through a rebranding and starting a youtube channel, will keep you posted.
Hi John,
Best Wishes for Your Rebranding and New YouTube Channel Launch..
Thank YOU for the revert..
Look Forward..
Correction to my thread, in version 2.5.0 of Dawn Theme, the variant picker block has been updated and the code segment is no longer in the main-product.liquid:
{{ value }}
Hi Stephen, I will be updating the guide soon. Just going through a rebranding.
Is there a possibility for these to be displayed on collection pages aswell?
Hi Sam,
Yes, you will need to recreate the color schema, so you loop through variants for that product grid item, then do the code to show the color variants, and add the color swatches per color variant.
what do u mean by recreating the color schema?
really need a guide on the color swatch appearing in collection page… thanks john!
Will come out soon 🙂 just need time.
Hi Andrew, the color schema themselves i.e. the options then use the code to display the colors. I will come out with a new blog on how to do it on the collection page. Give me some time, went through a new rebranding then need to redo all blogs for the new Dawn theme.
Hello John Bluish, how can i have notification when you launch your youtube channel?
I want to subscribe.
Thank you!
Hi Rafail, not released yet, I would need 1 month
hi john can you a tutorial for color swatch appearing on collection page?
Hi Andrew, yes 🙂 as mentioned in previous replies, I need some time though
Thank you for this tutorial. I’m trying to figure out how to add the color swatches on the collection page as well. Is there a tutorial on that as well for the Dawn 2.0 theme?
Hi Kairi, will come soon, I need to redo blogs for Dawn 3.0 update aswell.
Hi! When you click on the swatch, does the product image changes as well?
Example: you click on the red swatch and it automatically changes the product picture to the red variant
Hi Marco,
It technically should as we are only changing the frontend look of the buttons. As long as you set the variant featured image in the product section
Hello,
Do you have any update on how to add variant swatches to product cards on collection pages?
Hi Madison, this has now been added on my latest blog. You will also need to update your product page color swatch.
Hey mate, for some reason my main-product.liquid has the <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" where option.position is used instead of option.name. Not sure if this is a recent change or not, of if I'm working on a funky version of dawn. This was affecting the radio selection of the correct colour swatch.
I really appreciate your time and effort in creating the article, it was super easy to follow along!
Hi Tristram,
This has been updated, I also added a fix aswell. Changed the code completely.
Hello John, I appreciate this very much. I have run into the same issue as Tristram. You mentioned a fix. Where can I find that? Thanks so much!
Hi Trey,
The guide is updated.
So I’ve tried this multiple times but it just givens me the variant pill with the name of the image but no image swatch. Any suggestions, thanks so much!
Hi Trey, can you show me your website? Not quiet there in understanding whats happening without seeing, so the color is working but the image (so you can upload patterns) isn’t?
Hello,
Thank you for this! I really appreciate it! I was wondering if there is a way to do a colour swatch for the “style”. I’ll show you an example of what I mean:
https://imgur.com/a/W90oJrm
Thank you in advance 🙂
The code was created for options named Color/Colour, you will need to add the option name Style to the code aswell.
It worked! Thank you!
Welcome 🙂
How to Create a Product Image Slider on Dawn Theme
How To Create A Sticky Add To Cart On Shopify
How to Create a Featured Product Slider on Shopfiy
Cart Drawer/Slider For Dawn Theme
How to Create Collection Color Swatches on Dawn Theme
How to Use Automation to Grow Your Shopify Store
SMS Marketing: Why It’s Better Than Email Marketing for Shopify Stores
How To Make Dawn Theme Header Transparent