Add color swatches to the product page [NO apps]

Reading Time

One of the first things people ask me is how to get those little color circles on the product page without paying for an app every month.

Long story short, Shopify color swatches on the product page are just clickable buttons that map a variant name (like Red or Navy) to a HEX color or a tiny image. When someone taps Red, Shopify selects that variant. Dawn and the other free Online Store 2.0 themes still show this as pills or a dropdown by default. This tutorial replaces those pills with real swatches, using a section that lives in your theme. No monthly app, no third-party script, and it loads with the rest of the page.

I built it this way because the apps that do the same job usually inject extra JS and charge you forever. This one is copy/paste. Last tested on Dawn in 2026.

Here's a live demo. That demo also uses my Slider Pro with vertical thumbnails if you want the gallery to match.

This is the product page version. If you want swatches on collection cards, that's a different setup: Add color swatches to Shopify collections and cards (no apps).

Works on Dawn, Sense, Craft, Spotlight, Taste, Refresh and the other free OS 2.0 themes. Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.

This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.

Looking to install this on a premium or custom theme? Contact us.

Download a Shopify theme backup before editing code

What color swatches on a Shopify product page actually are

A color swatch is not a new Shopify feature you turn on in Settings. It's UI. Your product already has a Color (or Colour) option. The swatch is a button whose background is the HEX for that option name. Click it, and the theme selects the matching variant, same as clicking the pill.

That's why the variant name in the theme editor has to match the option name on the product. "Navy" and "navy" are not the same. I mention this because 80% of "it didn't work" emails are a typo or a capital letter.

How to add the swatch section

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, click the 3 dots > Edit code.
  3. Open the sections folder and click Add a new section. Name it exactly ezfy-color-variants. The file name and the section name have to match, otherwise Shopify won't load it.

    Add a new Shopify section named ezfy-color-variants

  4. Paste this code, then save. This is the whole section, schema included:

If you prefer reading Shopify's own editor docs, they cover Edit code here: Edit your theme code.

How to load it on product pages

  1. Open theme.liquid.

    theme.liquid file in the Shopify code editor

  2. Press Ctrl + F (Cmd + F on Mac) and search for:

    <body

  3. Paste this right below that line. Use the same name as the section file:

    {% if template == 'product' %} {% section 'ezfy-color-variants' %} {% endif %}

    Paste the EZFY color variants section under the body tag in theme.liquid

  4. Save the file.

This loads the section on product templates only. I wouldn't drop it on every page. Collection swatches belong on cards, not here. That's the other tutorial.

How to map variant names to HEX colors

  1. Click the 3 dots > Customize (top left).

    Open Shopify theme Customize from the theme actions menu

  2. At the top, go to Products > Default product.

    Open the default product template in the Shopify theme editor
    Default product template selected in Shopify theme editor

  3. You should see a section called EZFY Variant Colors above the header.

    EZFY Variant Colors section in the Shopify theme editor

  4. Click the arrow next to EZFY Variant Colors > Add block. You get three block types:

    color: one HEX value
    image: a 50 x 50 image instead of a HEX (patterns, prints). Use this sparingly.
    multicolor: two HEX values, 50/50, for split colors.

    In this example I add a simple HEX to the "Milky" variant.

    Add a color block to EZFY Variant Colors

  5. Click the new Color block.

    Open the Color block settings

  6. Add the variant name and the HEX. Match the option name exactly, including capitals.

    Variant name Milky mapped to a HEX color

  7. Click Save. The preview doesn't always refresh until you save.

    Save the theme to apply color swatches
    Color swatches showing on the Shopify product page

  8. That's it. Every product with a variant named "Milky" (not only that one bag) will use this swatch. You can turn the whole thing off under EZFY Variant Colors > enable.

    Enable or disable EZFY Variant Colors in the theme editor

If the swatches don't show up

Check the section file name and the {% section %} name. They have to be identical.

Check the variant spelling. "Light Blue" on the product and "light blue" in the block will not match.

Make sure the product actually has a Color option, not only Size.

Hard refresh the product page. Theme editor save is required before the storefront updates.

If you only need this on some products, keep the section enabled and only add blocks for the colors you sell. Products without a matching option name just keep the default pills.

If you get stuck, tell me which theme and what the Color option is named. That usually solves it.

Back to blog

Leave a comment

Related Articles