Shopify

How to Create Collection Color Swatches on Dawn Theme

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

Note: This also works for the Craft, Crave, Sense and Studio Theme.

Note: Older versions of the Dawn theme uses the Product-Card.liquid instead of Card-Product.liquid snippet file, and the assigned value for the product is 'product_card_product' not 'card_product. You will need to make the changes in the below code for the old versions of the Dawn theme.

Click here to view our example store

If you’ve been following my previous tutorials, you’re probably also watching to understand how to create color swatches on your collection page as well! Look no further, the below easy quick guide will add the functionality you need to your collection page.

You will need to have completed the color swatch tutorial for the product page, as it will include a section on how to add color metafields which we will need for the collection page.

Changing this code which add the element to all product cards which use this code. This also includes the ‘You May Also Like’ section, and other sections aswell. Go to edit code, head over to the Snippet folder and find card-product.liquid. Once found, scroll down until you find the below code

{% render 'price', product: card_product, price_class: '' %}

Right under the above code, paste the below

{% assign keys = "Color,color,Colour,colour" | split: ',' %}
            {% for key in keys %}
            {% if card_product.options contains key %}
            <div class="product_tile_color_holder">
              {% for color_option in card_product.options_by_name[key].values %}
              {% for variant in card_product.variants  %}
              {% if variant.options contains color_option %}
              {% if variant.image %}
              {% assign background_style = color_option %}
              {% endif %}
              {% if variant.metafields.color.swatch %}
              {% assign background_style = variant.metafields.color.swatch %}
              {% endif %}
              {% if variant.metafields.image.swatch %}
              {% assign background_style = "url(" | append: variant.metafields.image.swatch | append: ")" %}
              {% endif %}
              {% endif %}
              {% endfor %}
			  <!--- Coded by jotting.com --->
              <input 
                     type="radio" 
                     name="{{ card_product.id }}_card_color" 
                     id="{{ card_product.id }}_color_{{ forloop.index }}" 
                     style="background: {{ background_style }}; background-size: cover;">
              {% endfor %}
            </div>
            {% endif %}
            {% endfor %}

Now, head over to the Asset folder, find base.css and paste the below code at the bottom of the file

input[type=radio][name$=_card_color]{
                width: 20px;
                height: 20px;
                border-radius: 50%;
                appearance: none;
                background-size: 9px 9px;
                background-image: repeating-linear-gradient(45deg, #000 0, #000 1px, #ebebeb 0, #ebebeb 50%);
              }

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

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.

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

  1. Hi John,
    While the Color Swatch is working fine on the Product page..
    it is not working on the Collection page.. nor on the home page feature products nor the You May Like ..

    It it helps –
    Our site is on Dawn 2.5.0

    1. Hi Feoz,

      So if I assume correct, the old versions of Dawn, they use the snipper product-card.liquid, not card-product.liquid. So go to the product-card.liquid file. Then in my code, you need to replace card_product with product_card_product. As thats the assigned value the older version of Dawn uses.

  2. Hi John,
    Thank you for the quick reply
    All the colours are Not Showing..
    Some are shown with a slashed white background ..
    You can view the Products on the Home page bottom.. https://wear.style

  3. Hi John,
    The swatches on collection pages are only showing as white, and the metafield colors are set. Do you know a way to fix this? and is there a way to change the shown product image when you select the color?

    thanks

    1. Hi Madison,

      I don’t know why it’s showing white without seeing it. If it’s showing white with a line in the middle diagonally, it means the color in the metafield wasn’t set for that variant. There is, unfortunately I have not done that feature for this code.

  4. Hello John!

    Can I make swatches clickable? With “second image on hoover” or without it?

    Thanks,
    Roman

Leave a Reply to Madison Cancel reply

Your email address will not be published.