Shopify

How to Create a Color Swatches on Dawn Theme

Looking to create a color swatches for your newly installed Dawn theme? Look no further and follow this guide!

3 min read October 31, 2021 
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}}">
                          &nbsp
                        </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}}')">
                          &nbsp
                        </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.

Tags
Posted by
John From Jotting

Shopify developer, SEO expert, and Social Media marketer who has been in ecommerce game for over 4 years. I've worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

You might also like

48 Replies to How to Create a Color Swatches on Dawn Theme

  2. 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?

    Reply

    1. 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.

      Reply

      1. 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.

        Reply

        1. 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.

          Reply

    1. 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.

      Reply

  4. 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

    Reply

      1. 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…

        Reply

  6. 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

    Reply

    1. 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.

      Reply

  7. Hi John,

    Best Wishes for Your Rebranding and New YouTube Channel Launch..

    Thank YOU for the revert..

    Look Forward..

    Reply

  8. 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 }}

    Reply

    1. 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.

      Reply

        2. 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.

          Reply

  10. Hello John Bluish, how can i have notification when you launch your youtube channel?
    I want to subscribe.

    Thank you!

    Reply

  12. 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?

    Reply

  13. 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

    Reply

  15. 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!

    Reply

      1. 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!

        Reply

          1. 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!

          2. 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?

  18. Hello,

    I am trying to add the code, but I cannot find the first code for the main-product.liquid:

    {{ value }}

    Do you have any idea where else I can find this code?

    Reply

      1. So sorry for the multiple comments, I was able to figure it out, thank you for the tutorial, very helpful.

        My next question is: how would I display the color name when the swatch is selected?

        Also, I noticed that this only works if the Button option is selected as the Variant Picker type. I’m trying to have just the Colors be the swatches, but the other Variants be a drop down menu. How would I go about doing this?

        TIA.

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *