Color swatches allow shoppers to visualize available options at a glance, creating a more interactive and intuitive experience compared to traditional dropdown menus. They can be especially impactful for fashion, accessories, and home decor products where visual appeal is key.

In this detailed guide, we’ll walk you through the step-by-step process of adding color swatches to your Shopify product page. Whether you’re a beginner with no coding knowledge or a seasoned Shopify store owner looking to elevate your product presentation, we’ve got you covered with easy-to-follow instructions and tips for customization.

Benefits of Using Color Swatches on Product Pages

Adding color swatches to your Shopify product pages offers several key advantages that improve user experience and streamline shopping. Below are the key benefits:

• Improved User Experience: Customers can easily see the available options without needing to click through multiple selections, making their browsing experience more enjoyable.
• Faster Decision-Making: Seeing the color variants upfront reduces hesitation and improves product selection, leading to higher conversion rates.
• Higher Engagement: Shoppers can visualize how the product looks in different colors, leading to more interaction with the product page. The visual engagement keeps shoppers browsing longer, boosting the likelihood of a purchase.
• Reduced Return Rates: Providing clear visuals for different color options helps set realistic expectations for the customer. This transparency can lead to fewer misunderstandings about product appearance, ultimately reducing returns due to dissatisfaction with color.
• More Professional Store Appearance: Adding swatches gives your store a polished, high-quality feel, which can enhance brand perception.
• Enhanced Product Discoverability: By visually representing each color variant, swatches make it more likely that customers will explore different styles they might not have considered if they had to navigate a traditional dropdown. 

How to Add Shopify Color Swatches on Product Page: A Step-By-Step Guide

Method 1: Add Color Swatches Using the Shopify Theme Editor

• Step 1: On the main Shopify dashboard, click the “Products” option.

• Step 2: Select the products for which you want to add color swatches.

• Step 3: Scroll down to the Variants section and then hit “Add options like size or color.”

• Step 4: Next, select “Color” as the “Option name” and enter the desired colors in the “Option values” field. You also have the option to assign different prices for each color variant on this page. Once complete, click “Done” and save your changes.

• Step 5: Your color options are set up; tap the “Online Store” option in the left sidebar to proceed. 

• Step 6: Select the “Customize” button next to a theme that has added a color swatch feature.

• Step 7: This will direct you to Shopify’s built-in theme editor. At the top of the page, move to the “Default product” template.

• Step 8: Hit the “Variant picker” block. In case this block is lacking on the page, hit “Add block” to your template. 

• Step 9: Choose the “Color selector type” dropdown menu and select “Color swatch.”

So, you’ve already added color swatches to your Shopify product page. But, if you want to change the color swatch styling, you can find in the default customization options. 

Method 2: Add Color Swatches Using Shopify Liquid Code

Differentiating from the above method, adding color swatches using liquid code requires more skill and knowledge. All you have to do is copy and paste. 

• Step 1: On the Home page > Theme > Click on the “three dots” > Select “Edit Code.”

• Step 2: Under Snippets > click “Add a new snippet,” name it icon-product.liquid. 

• Step 3: Add coding paragraph into the icon-product.liquid section and hit “Save.”

For example, you want to paste the following Shopify color swatch code 70:

{{% for option in product.options_with_values %}

  {% if option.name == 'Color' %}

    <div class="swatch-group">

      {% for value in option.values %}

        <label class="swatch" data-color="{{ value | downcase }}">

          <input type="radio" name="color" value="{{ value }}">

          <span style="background-color:{{ value | handleize }}"></span>

        </label>

      {% endfor %}

    </div>

  {% endif %}

{% endfor %}

• Step 4: The next step is to select “product-variant-picker.liquid.”

• Step 5: Replace the following code, which starts at Row 51:

<fieldset class="js product-form__input product-form__input--pill">

<legend class="form__label">{{ option.name }}</legend>

{% render 'product-variant-options',

product: product,

option: option,

block: block,

picker_type: picker_type

%}

</fieldset>

With the code:

<fieldset class="js product-form__input product-form__input--pill">

{%- liquid

assign optionNames = settings.optionName | split:","

assign useColor = false

for optionColor in optionNames

if optionColor == option.name

assign useColor = true

break

endif

endfor

-%}

{%- if useColor -%}

<legend class="form__label ">{{ option.name }}:<span id="selected-{{ option.name }}"> {{ option.selected_value }}</span></legend>

{% render 'color-option', product: product, option: option, block: block %}

{%- else -%}

<legend class="form__label">{{ option.name }}</legend>

{% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %}

{%- endif -%}

</fieldset>

• Step 6: Open the Snippets section and choose “Add a new snippet.”

• Step 7: Put the name for a new snippet, “color-option.liquid”, and select “Done.”

• Step 8: Add the following code and hit “Save.”

{% comment %}

  Renders product variant options

Accepts:

- product: {Object} product object.

- option: {Object} current product_option object.

- block: {Object} block object.

 

Usage:

{% render 'product-variant-options',

product: product,

option: option,

block: block

}%

{% endcomment %}

{%- liquid

assign variants_available_arr = product.variants | map: 'available'

assign variants_option1_arr = product.variants | map: 'option1'

assign variants_option2_arr = product.variants | map: 'option2'

assign variants_option3_arr = product.variants | map: 'option3'

assign product_form_id = 'product-form-' | append: section.id

assign swatchType = settings.swatchType

assign swatchStyle = settings.swatchStyle

assign swatchSize = settings.swatchSize

assign swatchColors = settings.swatchColors | newline_to_br | split: '<br />'

-%}

<style>

.product-form__input input[type='radio'] + label.color-swatch,

.product-form__input input[type='radio'] + label.color-swatch:after,

.product-form__input input[type='radio'] + label.color-swatch:before{

border-radius: 0;

}

.product-form__input input[type='radio'] + label.color-swatch.round,

.product-form__input input[type='radio'] + label.color-swatch.round:after,

.product-form__input input[type='radio'] + label.color-swatch.round:before{

border-radius: 100%;

}

.product-form__input input[type='radio'] + label.color-swatch.round-corners,

.product-form__input input[type='radio'] + label.color-swatch.round-corners:after,

.product-form__input input[type='radio'] + label.color-swatch.round-corners:before{

border-radius: 5px;

}

.product-form__input input[type='radio'] + label.color-swatch{

border:1px rgb(214,214,214) solid;

width: {{swatchSize}}px;

height: {{swatchSize}}px;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

margin-right: 9px;

}

.product-form__input input[type='radio'] + label.color-swatch:before{

content: "";

position: absolute;

top: -1px;

left: -1px;

width: calc(100% + 2px);

height: calc(100% + 2px);

border: 1px rgb(214,214,214) solid;

z-index: 0;

}

.product-form__input input[type='radio'] + label.color-swatch:after{

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

{%- if settings.dark or swatchType == "variantImage" -%}

border: none;

{%- else -%}

border: 3px rgb(255 255 255) solid;

{%- endif -%}

}

.product-form__input input[type='radio'] + label.color-swatch:hover:before{

border: 1px rgb(125 124 124) solid;

}

.product-form__input input[type='radio']:checked + label.color-swatch:before{

{%- if settings.dark -%}

box-shadow: 0 0 0 2px rgb(var(--color-foreground));

{%- else -%}

box-shadow: 0 0 0 1px rgb(var(--color-foreground));

{%- endif -%}

border-color:rgb(var(--color-foreground));

}

.product-form__input input[type='radio'] + label.color-swatch.variant-swatch{

background-color:white;

{%- if swatchStyle == "portrait" -%}

height: calc({{swatchSize}}px/ 0.66);

{%- endif -%}

}

</style>

{%- for value in option.values -%}

  {%- liquid

    assign option_disabled = true

 

    for option1_name in variants_option1_arr

      case option.position

        when 1

          if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]

            assign option_disabled = false

          endif

        when 2

          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]

            assign option_disabled = false

          endif

        when 3

          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]

            assign option_disabled = false

          endif

      endcase

    endfor

  -%}

 

  {%- if block.settings.picker_type == ''button'' -%}

    <input

      type="radio"

      id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"

      name="{{ option.name }}"

      value="{{ value | escape }}"

      form="{{ product_form_id }}"

      {% if option.selected_value == value %}

        checked

      {% endif %}

      {% if option_disabled %}

        class="disabled"

      {% endif %}

    >

    {%- if swatchType == ""variantImage"" -%}

      <label 

      data-{{ option.name }}="{{value}}"

      style="background-image:url(

      {%- liquid

        assign optionIndex = option.position | minus: 1 

        for variant in product.variants

            if variant.options[optionIndex] == value

              assign swatchSizePortrait = swatchSize | times: 2 

              echo variant.image | image_url: width: swatchSizePortrait 

              break

            endif

        endfor

    -%}

       );"

       class="color-swatch variant-swatch {% case swatchStyle %}{% when "'round'" %}round{% when "'square-round-corners'" %}round-corners{% endcase %}"

          for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

      <span class="visually-hidden"">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>

    </label>    

    {%- else -%}

        {%- liquid

        for colorData in swatchColors 

            assign colorDataArr = colorData | split:":" 

            assign ruleName = colorDataArr[0] | strip

            if value == ruleName

                assign colorCodes = colorDataArr[1] | strip |

• Step 9: Open the “…” dropdown menu at the top-left corner of the page and then choose “Customize theme.”

• Step 10: Navigate to the “Default product” template and select “Variant picker” from the left sidebar.

• Step 11: In the Style section, choose “Pills.”

• Step 12: The color options are now displayed as swatches. However, each color must be entered into the system for it to appear correctly. For example, while the black color is displaying properly, the green is showing as white because it hasn’t been added yet.

To add a new color swatch, go to “Theme settings” (represented by the gear icon on the left side of the page).

• Step 13. Select “Color Swatches” and add the color you want to add. 

Bottom Line

Adding Shopify color swatches to your product page significantly improves the customer experience by making product variants easier to view and select. Whether you use the theme editor or add color swatches to products Shopify via custom code, you can enhance both the usability and visual appeal of your store.

FAQs 

How do I add color swatches to my Shopify product page?

To add color swatches, navigate to the product settings in your Shopify admin, select “Color” as an option, and input the desired color variants. You may also need to update your theme settings to enable swatch functionality, depending on your theme.

How do I change the color of my product page on Shopify?

To change the color of your product page, go to “Online Store” > “Themes” > “Customize.” From there, access the theme settings and adjust the color options for different elements of your product page, such as backgrounds, buttons, or text.

How do you add image product variant swatches in Shopify?

To add image variant swatches, first create product variants and upload corresponding images. Then, enable image swatches through your theme settings or customize your product page to link variant options with their respective images.

How do I customize my product detail page on Shopify?

To customize your product detail page, go to “Online Store” > “Themes” > “Customize.” The theme editor allows you to adjust the layout, add or remove sections, modify text and buttons, and add custom HTML or CSS for a more personalized touch.