How To Add Color Swatches on Collection Page of Dawn Theme Shopify

Prerequisite: https://websensepro.com/blog/add-color-swatches-on-shopify-product-page-dawn-theme/

Hey everyone, in this tutorial I’m going to show you how to add color swatches on the Collection page of your Dawn Theme Shopify store. This will allow your customers to see what the colors look like before making a purchase.

Add the following code in card-product.liquid

{% 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.values %}
              {% assign background_style = variant.metafields.color.values %}
              {% endif %}
              {% if variant.metafields.image.values %}
              {% assign background_style = "url(" | append: variant.metafields.image.swatch | append: ")" %}
              {% endif %}
              {% endif %}
              {% endfor %}
			  <!--- Coded by websensepro.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 %}

Add the following code in base.css file

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