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!

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!

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.name }}-{{ forloop.index0 }}">
  {{ value }}
</label>

replace the above, with the below code

{% if product.variants[forloop.index0].metafields.color.swatch and option.name == "Color" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
    style="background-color: {{product.variants[forloop.index0].metafields.color.swatch}}">
    &nbsp
</label>
{% elsif product.variants[forloop.index0].metafields.image.swatch and option.name == "Color" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
    style="background-size: cover; background-image: url('{{product.variants[forloop.index0].metafields.image.swatch}}')">
    &nbsp
</label>
<!--- Coded by bluish.io --->
{% else %}
<label class="swatch" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
    {{ value }}
</label>
{% endif %}

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;
}

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.

Note: If you have more than 1 option, color must be last in order for this guide to work.

You’re now done! you now have an awesome product variant color swatch on your Dawn theme.

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Dawn theme, downloaded on 28th of October, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

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

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

      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.

        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.

    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.

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

Leave a Reply

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