How to Add Color Swatches to Shopify (2026 Guide)

The three methods at a glance

This guide covers all three methods of how to add color swatches Shopify stores typically use, in order of increasing capability. Pick the method that matches your theme, your technical comfort, and your conversion goal.

Quick answer: fastest way to add swatches to a product page

Method 3 is the fastest path. Install OPTIS Color Swatch, Variant Image from the Shopify App Store on the free plan. From the OPTIS dashboard, choose Color Swatch as the swatch type, map each variant option value (Red, Navy, Forest Green) to a hex code or swatch image, enable Auto image swap so the main product image updates when shoppers click a colour, and verify on the storefront.

Total time: approximately 15 minutes on a standard Shopify theme. For collection-page swatches, see Method 3 in full detail below.

Method 1: Dawn native swatch picker (Dawn 13+)

Shopify's Dawn 13 release added a built-in swatch picker that can replace dropdown variant selectors. It is free, ships with the theme, and needs no app.

Steps to enable it:

• Verify Dawn version 13 or higher in Shopify admin: Online Store -> Themes -> theme name -> Actions -> Edit code (or check the changelog on Dawn's GitHub releases).
• Open the theme editor (Customize) and navigate to the Product page template.
• Find the Variant picker section, then change the display type from Dropdown to Swatch.
• Save and preview. Dawn maps option value names to CSS colour names or a small built-in lookup table.
• For custom colours (Sage, Blush, Ecru), add a `color_swatch.json` file in the theme's `assets` folder mapping each option value name to a hex code. This step needs theme file access.

Method 2: Category metafields

Shopify exposes a built-in color metafield in the standard product taxonomy. Stores comfortable in admin can populate this metafield and have a theme render the value as a swatch, with no app installed.

Setup:

• In Shopify admin, go to Settings -> Custom data -> Products.
• Add a metafield definition: namespace `shopify`, key `color-pattern`, type Color. Some recent Shopify plans ship this metafield as a built-in standard definition under `product.metafields.shopify.color-pattern`. See the Shopify dev docs on standard metafields.
• Populate the metafield value for each product variant with the relevant hex code or colour reference.
• In the theme editor, enable the metafield-based variant swatch display if the theme supports it. Dawn newer versions surface this option in the Variant picker block.
• For collection-page swatches via metafields, update the collection template to render the metafield value. This needs developer time.

Method 3: OPTIS Color Swatch app (recommended for conversion-grade swatches)

OPTIS Color Swatch, Variant Image is a Built-for-Shopify app used by stores that need the full swatch feature set: image auto-swap, custom shape, collection-page swatches, tooltip, and out-of-stock states. It installs via Theme App Extensions, which means uninstalling is clean (no leftover Liquid in the theme).

The free plan covers unlimited swatches and most core features. The Premium plan ($11.90/mo) unlocks combined listings for stores splitting colours across separate products.

1. 1

   Install OPTIS Color Swatch from the Shopify App Store

   Search OPTIS Color Swatch, Variant Image on the App Store and install on the free plan. OPTIS uses Theme App Extensions only: no checkout code, no theme file injection.

2. 2

   Configure swatch display settings

   Open the OPTIS dashboard, go to Swatch Settings. Choose swatch shape (circle, square, rounded rectangle), size (small / medium / large), border, and out-of-stock behavior (strikethrough, greyed-out, or hidden).

3. 3

   Map option values to colours or images

   For each colour option value in the store (Midnight Blue, Cream, Olive), assign a hex code (#003153) or upload a swatch image. The mapping UI provides a colour picker and an image upload.

4. 4

   Enable Auto image swap

   Toggle Variant image swap to on. Test by opening a product page and clicking each swatch: the main product image should update to the variant-specific photo without a page reload.

5. 5

   Enable collection-page swatches

   In the dashboard, open Collection Swatch settings and enable. Shoppers browsing collection pages will see colour swatches directly on product cards and can select a colour before entering the product page.

Full capability matrix: 3 methods compared

Verified May 2026 against live Dawn 14, Shopify admin, and OPTIS free plan.

Edge cases: non-Dawn themes and Online Store 1.0

Non-Dawn themes. Most third-party themes (Impulse, Prestige, Debut, Warehouse) do not have a built-in native swatch picker equivalent to Dawn 13+. Method 1 does not apply. Method 2 needs developer theme customisation. Method 3 is the practical answer because it uses Theme App Extensions and works independently of the theme's own variant picker. OPTIS ships free customisation help on install for unusual theme markup.

Online Store 1.0 themes. OS 1.0 themes (pre-2021, not using JSON templates) use a different architecture. Theme App Extensions require OS 2.0. For stores on OS 1.0, OPTIS can still be installed using a legacy embed block, but the setup needs a Liquid snippet added to the theme. The recommended path is to migrate to OS 2.0 first - Shopify itself strongly encourages this for long-term maintenance.

Troubleshooting

• Swatches not showing on the product page. Most common cause: the swatch app's App embed is not enabled in the theme editor. Go to theme editor -> App embeds -> verify OPTIS is toggled on. Second cause: the swatch is assigned to a product that is unpublished or whose variant option name does not match the swatch assignment.
• Wrong colour displaying. The hex code does not match the visual expectation, or the variant option value name does not match exactly (case-sensitive) what was entered in the swatch mapping. For Dawn native, check the `color_swatch.json` file for typos.
• Image not swapping on colour select. For OPTIS: verify Variant image swap is toggled on. Then verify each colour variant has its own first image assigned in Shopify admin (Products -> [product] -> Media). OPTIS swaps to the variant's first image; if none is set, it falls back to the main product image.
• Swatches appear on product page but not on collection page. For OPTIS: collection-page swatches must be enabled separately in Collection Swatch settings. Verify the theme's collection template supports app block embeds.

Related: Shopify's variant model and combined listings

If colour is currently split across separate Shopify products (one product per colour) and you want shoppers to see all colours on one product page, look at Shopify combined listings as a complementary feature. The full variant model also matters: variants are the underlying inventory unit that the swatch picker selects.