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 Variants from the Shopify App Store and start the 30-day free trial. 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 swatch display type to the variant picker that can replace dropdown variant selectors. It is free, ships with the theme, and needs no app. Swatch colours do not come from option names: Shopify only renders swatches for a colour option connected to a colour category metafield, where each colour entry holds a hex colour or an image.

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).
• In Shopify admin, open the product and assign a product category that has a colour attribute (for example Apparel & Accessories > Clothing > Clothing Tops > Shirts).
• In the product's Variants section, add the colour option by selecting the Color category metafield, so each option value is linked to a colour entry. Method 2 below covers the entries in more detail.
• Open the theme editor (Customize), navigate to the Product page template, and select the Variant picker block.
• Change the display type to Swatch, choose the swatch shape (circle or square), then save and preview.

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, open the product and assign a standard product category that includes a colour attribute. Assigning the category unlocks its category metafields automatically, so there is no metafield definition to create under Settings -> Custom data. See the Shopify Help Center guide to color swatches with category metafields.
• In the product's Category metafields section, open the colour metafield and select or edit the colour entries you need. For a custom colour (Sage, Blush, Ecru), add a new entry and set its colour value or swatch image.
• In the Variants section, add the colour option by selecting the colour category metafield (or connect an existing option to it), so each option value uses its colour entry.
• In the theme editor, select the Variant picker block and choose the swatch display if the theme supports variant options with swatches. Dawn 13 and newer surface this option.
• 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 Variants 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 app is free on Shopify trial, partner/development, Pause & Build, and staff stores. Live stores pay from $11.90/mo based on their Shopify plan, with a 30-day free trial, and every paid plan includes unlimited swatches, variant images, and combined listings for stores splitting colours across separate products.

1. 1

   Install OPTIS Color Swatch from the Shopify App Store

   Search OPTIS Color Swatch Variants on the App Store, install, and start the 30-day free trial. 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 app. Method 1 shape, theme support, and code rows re-checked September 2026 against the Shopify Help Center and Dawn's source.

Edge cases: non-Dawn themes and Online Store 1.0

Non-Dawn themes. Whether a non-Dawn theme shows native swatches depends on the theme: Shopify requires a theme that supports variant options with swatches, and vintage themes like Debut need code edits. Check your theme's documentation before relying on Method 1. 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 colour entry in the product's colour category metafield, and confirm the colour option is connected to that metafield.
• 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.