Shopify with Colours: A Complete Guide to Product Variations

In the fiercely competitive world of e-commerce, images play a critical role in shaping user perception, engagement, and conversion rates. In the article below, NextSky will dive deep into Shopify with colors, exploring how to work effectively with colour systems to create a visually cohesive, professional, and conversion-focused online store.

What are colour swatches in Shopify?

Color swatches are small colour blocks displayed right on the product page, allowing users to select colours more quickly and intuitively. Each block corresponds to a product variant, such as a red, blue, or yellow t-shirt. When a user clicks on a colour block (usually circular, square, or a thumbnail image), the product image instantly updates to match the selected colour.

Key benefits of colour swatches

• Improved user experience: Swatches turn the shopping journey into a visual and seamless experience, helping customers choose variants faster. As a result, this solution can reduce bounce rates by up to 20%.
• Increased conversion rates: Displaying variants with images allows customers to visualize the product clearly from the start. Stores using swatches have seen average sales growth of 15–25%.
• Mobile optimization: With a compact design that's easy to tap and responsive on touchscreens, swatches ensure a smooth experience on mobile devices.
• SEO & performance benefits: Well-implemented swatches improve page load times and positive user signals, indirectly supporting higher search rankings.
• Brand consistency: Customizable swatches align with your overall color palette, enhancing credibility and professionalism.
• Supporting SEO and performance: When implemented with proper technical standards, swatches contribute to faster page loading and positive user behavior signals, thereby indirectly improving search engine rankings.
• Maintaining brand identity: Swatches allow flexible customization according to the overall color scheme and design style, contributing to a professional interface and increasing brand trustworthiness.

Read more: What Is a Shopify Theme? Definition, Features Explained 2026

How to add color swatches to your Shopify store

Method 1: Using the theme editor (No Coding Required)

Suitable for beginners and themes that already support swatches.

• Step 1: Go to Products > Select a product > Variants.

• Step 2: Add an option called “Color” and list the values (e.g., Red, Blue, Yellow).

• Step 3: Go to Online Store > Themes > Customize.

• Step 4: In the product template, select the Variant Picker block.

• Step 5: Set the “Picker type” to Color Swatch and customise the shape/size.

• Step 6: Save and preview, the swatches will appear along with image changes.

This method is simple but lacks advanced features, such as text fields. If your current theme doesn't support it, consider switching to Agile or Glozin, which have built-in swatches.

See more: How to Back Up Shopify Theme Safely Before Any Update

Method 2: Adding custom swatches using liquid code

For those who want maximum control over appearance and functionality.

• Step 1: Go to Online Store → Themes → Open the menu (...) → Edit code to access the full theme structure and start customising.

• Step 2: Open the file config/settings_schema.json and add a new section for Color Swatches around line 9. This section allows configuration of the option name, swatch type (colour or image), and a list of hex codes.

Example illustration (adjustable to your actual needs):

JSON

{

"name": "Color Swatches",

"settings": [

{

"type": "text",

"id": "optionName",

"label": "Swatch option name",

"default": "Color",

"info": "Make sure capitalization is same as variant for e.g Color not color "

},

{

"type": "paragraph",

"content": "If your store is in different languages, type in all the different words and separate them with commas. For example: Color, Colour, Couleur"

},

{

"type": "select",

"id": "swatchType",

"label": "Swatch type",

"options": [

{

"value": "color",

"label": "Color"

},

{

"value": "variantImage",

"label": "Variant image"

}

],

"default": "color"

},

{

"type": "textarea",

"id": "swatchColors",

"label": "Colors",

"placeholder": "Red:#ff0000\nGreen:#00ff00\nBlue:#0000ff",

"default": "Black:#000000\nWhite:#f5f5f5\nBlue:#005eff\nRed:#c9002c\nPink:#ffd5e6\nBrown:#a2896b\nOlive:#808000\nGreenRed:#008000#c9002c\nGreenRedBlue:#008000#c9002c#005eff",

"info": "One rule per line. Example: Blue:#005eff\n2 Color Swatch Example: GreenRed:#008000#c9002c\n3 Color Swatch Example: GreenRedBlue:#008000#c9002c#005eff"

},

{

"type": "paragraph",

"content": "You can also add [image files](/admin/content/files?selectedView=all&media_type=Image) instead of using colors, in lowercase with spaces replaced by hyphens. Example: Green kaki: green-kaki.png"

},

{

"type": "select",

"id": "swatchStyle",

"label": "Swatch style",

"options": [

{

"value": "round",

"label": "Round"

},

{

"value": "square",

"label": "Square"

},

{

"value": "square-round-corners",

"label": "Square round corners"

},

{

"value": "portrait",

"label": "Portrait"

}

],

"default": "round",

"info": "Portrait mode is only available for the variant image type."

},

{

"type": "range",

"id": "swatchSize",

"min": 20,

"max": 120,

"step": 2,

"unit": "px",

"label": "Swatch size",

"default": 40

}

]

}

Step 3: Open Snippets → product-variant-picker.liquid, find the <fieldset> block (around line 51) and replace the entire block with the following code, then Save:

liquid

<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 4: In the Snippets folder, choose Add a new snippet, name it color-option.liquid, paste the entire prepared swatch code into this file, and Save.

liquid

{% comment %} [Your swatch code here - the provided snippet] {% endcomment %}

{%- liquid

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 {

width: {{ swatchSize }}px;

height: {{ swatchSize }}px;

border: 1px solid #d6d6d6;

background-size: cover;

background-position: center;

margin-right: 8px;

}

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

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

}

</style>

{% for value in option.values %}

<input

type="radio"

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

name="{{ option.name }}"

value="{{ value | escape }}"

{% if option.selected_value == value %}checked{% endif %}

>

{% liquid

assign bgColor = ''

for colorData in swatchColors

assign pair = colorData | split: ':'

if pair[0] == value

assign bgColor = pair[1]

endif

endfor

%}

<label

class="color-swatch {{ swatchStyle }}"

style="background-color: {{ bgColor }};"

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

</label>

{% endfor %}

Step 5: Return to the theme list, open the “…” menu, and select Customize.

Step 6: In Default product, select the Variant Picker block and set the style to Pill.

Step 7: Go to Theme settings → Colors, in the Colors section, enter colors in the format Color Name:Hex code, one per line, no spaces. Example: Green:#008000.

Explore more: Shopify Speed Optimization Guide for Faster Store Loading

Method 3: Using apps for advanced swatches

• Step 1: Visit the Shopify App Store and install popular swatch-supporting apps such as:
  • Kickflip: A comprehensive product personalisation solution, allowing unlimited customisation from colours, image,s to text with real-time preview technology. The perfect choice for complex product lines that elevates the shopping experience for just $59/month.
  • GLO Color Swatch: Elevate the shopping experience with a lightweight yet effective swatch display. No complex configuration needed—you can get started with the free version or upgrade to advanced features for only $9–19/month.
  • Globo Product Options: Full support for eye-catching swatches, flexible add-on fees based on selections. Get started with the Free plan or upgrade for just $12/month onward.
• Step 2: After installation, configure the app by mapping product variants to the “Color” option in Shopify.
• Step 3: Use the app's extended features like creating custom-shaped swatches, uploading images as patterns, or adding text fields for personalization (e.g., Enter Hex Code).

Read more: How to Add Social Media Icons to Shopify: A Complete Guide

How to remove a color in Shopify when it's already linked to products

Removing a linked color requires caution to avoid store errors.

• Step 1: Go to Products > Variants in the Shopify admin.
• Step 2: Use filters to find the colour to remove (e.g., search for “Red”).
• Step 3: Use Bulk edit to:
  • Unlink the variant from the product.
  • Switch to another color.
  • Delete the variant if the product is out of stock.
• Step 4: Open the product editor and remove that colour from the Options list.
• Step 5: If your store uses code-based swatches, update the swatch configuration to remove the corresponding colour.

Tip: Use Shopify's bulk editor tool for quick handling. For stores with many variants, this prevents “ghost colours” that confuse customers. Our Agile theme includes an automatic cleanup tool to support this.

Adding custom colour options with text fields in Shopify

To add a custom field like “Secondary Color” with a text input:

• Step 1: In the product's Variants section, create a new option named “Custom Color”.
• Step 2: Use custom code or a third-party app to display a text input field next to the colour swatch.
• Step 3: If using code, extend the product-form.liquid file and add the input field: <input type="text" name="properties[Custom Color]">.
• Step 4: Set up server-side input validation to ensure data is valid and prevent errors.

Custom color swatches with text fields in Shopify

Combine color swatches with a text input to create a hybrid option:

• Step 1: Use apps like Custom Product Options to add a text input field, displayed directly below the color swatch to allow customers to enter custom choices.
• Step 2: For a code-based custom solution, edit the swatch snippet and insert an input field, for example: <input type="text" placeholder="Enter custom color">.
• Step 3: Set up logic to link the entered data to the product variant so information syncs and updates in real time.

Important tips you need to know when implementing color swatches

• Clear mobile-first approach: Swatches need to be large enough for comfortable tapping (minimum 40px) and spaced reasonably to reduce selection errors.
• Accessibility standards: Prioritise high-contrast borders and alt text for images to ensure accessibility for all users.
• Performance as priority: Compress swatch images, test load speeds, and ensure consistent display across devices.
• Data-driven optimisation: A/B test horizontal vs. vertical layouts to determine which delivers the best conversion rate.
• Smart measurement: Integrate Google Analytics to track swatch interaction behaviour, gaining insights to improve UX and revenue.