Skip to content
Back to all fixes

Shopify Color Swatches: Connect Your Color Option to a Metafield

  • shopify
  • variants
  • metafields

The Problem

Your product has a Color option and you typed the values in by hand: “Red”, “Blue”, “Striped”. When you decide “Red” should be called “Crimson”, you get to edit it on every product that has it. Typos like “Blue” vs “blue” create duplicate entries, and nothing ties your colors together across the catalog.

Step 1: Give the product a category

Open the product in admin. Under Product organization, set Category to the closest match, for example Apparel & Accessories > Clothing > Shirts. Save.

The category is what unlocks the Color metafield. Most apparel and accessories categories have it. No category, no Color field.

Step 2: Create your color entries

After saving, a Category metafields section appears with a Color field. Click it. Shopify offers hundreds of preset colors. For your own, click Add new entry:

  • Label: the name the customer sees, like “Red”
  • Color: the hex code, like #FF0000
  • Image: optional, see below
  • Base color: the nearest standard color, like Red. This drives the color filter on collection pages Save. The entry now exists once for the whole store, and any product can use it.

If the swatch isn’t a flat color

Prints, patterns, glitter, wood grain: a single hex code doesn’t cut it. That’s what the Image field is for. Upload a small square image (around 100 by 100 pixels is plenty) and the theme uses it as the swatch instead of the color. A “Striped” entry with a striped image shows a striped swatch. You can still set a base color like Blue so filtering works.

Step 3: Connect the Color option to the entries

Scroll to Variants.

New product: click Add options like size or color, choose the Color category metafield as the source, and pick the entries this product comes in.

Existing product with a hand-typed Color option: click the option, click the dynamic source icon (⛁) next to it, and select the Color category metafield. Shopify will warn that existing values will be cleared, so confirm you have the right entries ready before proceeding.

Why This Is Better

  • Rename once, updates everywhere. Change “Red” to “Crimson” in one place.
  • No spelling drift. “Blue”, “blue” and “Blue Dark” become one entry.
  • Swatches survive a theme change. The data lives in your store, not in the theme.
  • Filters for free. The Search & Discovery app can add Color as a swatch filter on collection pages, with images where you’ve set them.
  • Better listings elsewhere. Category metafields feed Google Shopping, Facebook and the Shop app, which understand a structured color and not a free-text one.

One Limitation

Shopify’s native swatches only work for one metafield-connected option per product. If a product has two variant options like Color and Material, only Color gets swatches this way. The second option would need an app or custom theme code.

If you’d rather have someone set this up across your catalog, get in touch.