Add Color Swatches on Shopify Product Page (Dawn Theme)

First Step – Adding a Product With Color Variations:

The first step is to add the product with variations, Select the needed option where it will show the variations. Then add “Option Name” and “Option Values” for e.g Size and color.

Second Step – Adding Meta Field:

Add in the meta field click on SETTINGS scroll down to META FIELDS then click on variants and from variance add a definition by clicking ADD DEFINITION name it COLORS and in namespace add in color.values now from select content type select a color and save.

Third Step – Adding Meta fields Values in Product Variants:

On the Product page click that and from each variant click on edit now in this red color variant select a picture which is red color click on the done scroll down to meta fields select the color red and save. Now repeat the process with remaining color variants.

Fourth Step – Adding Custom Code For Swatching:

In this step, we will go to the Code editing section for our Published Theme which is “Dawn”. Before doing we suggest creating a “Duplicate” to save the original files so if we do something wrong on the code we can easily revert it back from the Duplicate Theme. Click on edit code and search for main-product.liquid file

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>

Replace Above Code with the Following:

Replace this code in main-product.liquid file

{% if product.variants[forloop.index0].metafields.color.values and option.name == 'Color' %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" style="background-color: {{product.variants[forloop.index0].metafields.color.values}}"> 
  </label>
{% else %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
    {{ value }}
  </label>
{% endif %}