How To Add Color & Image Swatches To Your Shopify Product Page (Dawn Themes)

Online Store >> Cusomize >> Edit Code

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

After, Sale Channel Settings >> Custom Data >>Variants

Add definition (color)
Name: Color
Namespace and key: Color.swatch
Seclect type: Color

Add definition (Image)
Name: Image
Namespace and key: image.swatch
Seclect type: URL

Return Page Product

In section “Variants” : Edit one by one

You will see the end of each: Color Swatch and Image Swatch