How To Add Stylish Color Swatches in Shopify

In this tutorial, you’ll learn how to add stylish color swatches to your Shopify product pages without the need for any additional apps or plugins. This tutorial covers adding color swatches to various popular themes including Dawn 9.0.0, Sense 9.0.0, Refresh 9.0.0, Ride 9.0.0, and Origin 9.0.0.

Color swatches can help improve the design and functionality of your Shopify product pages, making them more visually appealing and user-friendly. By following this step-by-step tutorial, you’ll be able to add color swatches to your Shopify store without any coding knowledge required.

The tutorial covers adding a meta field to store the color values for your swatches, adding CSS code to style the swatches, and adding liquid code to display the swatches on your product pages. By the end of the tutorial, you’ll have learned how to select the color value in the meta field and apply it to your product pages.

If you’re looking to enhance your Shopify store and make your product pages stand out, this tutorial on adding stylish color swatches is a great place to start!

Create Custom Meta Field

Create custom field “color.values”

CSS Code

Add the following code in base.css file

.swatch-label {
  background-color:#c9c1c1 !important;
  border-radius: 5px !important;
}


.swatch-color-ball {
    padding: 0px 8px 0px 10px;
    border-radius: 10px;
    margin-right: 10px;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
}

Replacing liquid code

Replace the following code in product-variant-options.liquid file:

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
      {{ value -}}
      <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
    </label>

With following code

{% if product.variants[forloop.index0].metafields.color.values and option.name == 'Color' %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="swatch-label">
<span style="background-color: {{product.variants[forloop.index0].metafields.color.values}}; " class="swatch-color-ball"></span> <span class="swatch-color-name">{{ value | escape }}</span>
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
    </label>
{% else %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
      {{ value -}}
      <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
    </label>
{% endif %}