How to Create a Color Swatches on Dawn 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!

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 jotting.com --->
{% 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.

Written by

Jotter are a group of freelancing Shopify & Shopify Plus Experts. Dedicated to offering design, development, marketing and seo services to grow your Shopify business.

Comments:

  • Kim

    In the Assets, there isn’t a Theme.css option, where should we add the code? Base.css?

  • Tracy

    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?

    • John From Jotting

      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.

      • Tracy

        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.

        • John From Jotting

          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.

  • Ocrip

    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)

    • John From Jotting

      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.

  • LPN

    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

  • Mohamed

    Would this hide all the other variants with the not selected color?
    if not how I would do that?

  • Feroz

    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

    • John From Jotting

      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.

  • Feroz

    Hi John,

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

    Thank YOU for the revert..

    Look Forward..

Post a comment:

Comment

Type at least 1 character to search

Subscribe:

No Bull, No Fluff. Don't get sold on fake hope! Learn how to grow your business long term. Subscribe now for FREE tips on the latest strategies, techniques and best practices.

Contact Us:

Sydney, NSW, 2000
Australia
john@jotting.com

Bluish.io has rebranded to Jotting.com :) x