Techiepugs
Open the tools Theme guides

Color swatch guide

How to add color swatches to the Colorblock theme.

Colorblock is a free Shopify theme at Dawn's version number (16.1.0, October 9, 2026), and an old Colorblock demo store reported Dawn as its schema name. The Theme Store lists color swatches and swatch filters among its features (checked October 23, 2026). This guide follows Dawn's labels for the variant picker.

Checked Colorblock theme profile

Which route fits Colorblock?

Route 1

Shopify's native swatches.

  1. Give each product a category

    In Products, open a product and choose the most specific match in the Category field. Categories come from Shopify's Standard Product Taxonomy, and picking one adds that category's attributes to the product as category metafields. You want a category that lists Color (or a color attribute such as Frame color or Band color). If Color is missing under Category metafields, try a narrower category.

  2. Add the colors you sell

    Under Category metafields, open Color and select every color your variants come in. Each color is a reusable entry. You can rename an entry, set its exact hex value or upload a pattern image later in Content > Metaobjects, and the change shows everywhere that entry is used.

  3. Link the Color option to the metafield

    In the Variants section, add an option and pick Color from the suggestions so its values come from the entries you just chose. If the product already has a Color option, open it, use the connect icon beside the option name and choose the Color category metafield. Swatches only appear for options linked this way, so do this on every product you want swatches on in Colorblock.

  4. Turn on swatches in the Variant picker block

    In the theme editor, pick Products > Default product from the page menu, open the Product information section and select the Variant picker block. Set Swatch to Circle or Square; Circle is the default and None turns swatches off. The separate Style setting chooses Pills or Dropdown, and swatches can show in either.

  5. Product cards: no built-in setting

    Colorblock isn't confirmed to show swatches on product cards. Look in the collection template's product grid section for a swatch option; if there isn't one, see the Collection pages section below.

  6. Check it on a real product page

    Save, then open a product in a private browser window and on your phone. Click each swatch and confirm the price, photo and stock message change with it. If Colorblock shows plain text buttons instead, go back to the linking step: the option is probably not linked to the Color category metafield yet.

Route 2

A swatch app.

Colorblock's Variant picker already shows swatches on product pages, so the main reason for an app is collection product cards. GLO Color Swatch Variant Image and Color Swatch Pug both list collection-page swatches, and Variants King & Color Swatch works with collection pages for stores that list each color as its own product.

  1. Duplicate Colorblock first

    In Online Store > Themes, open the menu beside Colorblock and choose Duplicate. Set up the app on the copy, preview it, and publish the copy only when the swatches look right. Your live store keeps working while you test.

  2. Install the app and start its trial or free plan

    Install the app from the Shopify App Store and approve the access it asks for. Every app suggested on this page had a free plan, a free listing or a free trial of 7 to 30 days when we checked on October 23, 2026, so you can test before you pay.

  3. Switch on the app embed

    Open the theme editor on your copy (Online Store > Themes, then Customize or Edit theme), click the App embeds icon in the left sidebar, switch on the app's embed and click Save.

  4. Match each color name to a swatch

    In the app's own settings, give each color name a hex value or a small image. Apps read your option values as text, so Navy on one product and Navy Blue on another need two swatches. Tidy the names first and you only set each color once.

  5. Avoid two sets of swatches

    If the app replaces the product-page picker too, set the Variant picker's Swatch to None so shoppers don't see two sets. If you only want the app on collection pages, leave Dawn's swatches on and switch the app's product-page option off.

  6. Preview a product page and a collection page

    Use the theme editor preview, then a phone, to check both page types in Colorblock. If the app adds collection-page swatches, click one on a product card and confirm the card's photo or link changes to that color.

Apps that fit Colorblock

Swatch apps for Colorblock, from each App Store listing on October 23, 2026
AppFromRatingWhat it does
GLO Color Swatch Variant Image $9.90/month 4.9 (1,906 reviews) A dedicated swatch app whose free plan already covers collection-page swatches and hiding sold-out options; image swatches start on the $9.90 Silver plan.
Color Swatch Pug $6.99/month 4.6 (55 reviews) One $6.99 monthly plan with a 14-day trial for color and pattern swatches on collection and product pages; it isn't Built for Shopify, and its listing still links to this site, which is independent of the publisher.
Variants King & Color Swatch $14.90/month 5.0 (457 reviews) Groups separate products under color swatches or splits variants into their own products; the price follows your Shopify plan, from $14.90 a month on Basic.

Prices and ratings change often; check the listing before you install. This site is not affiliated with any of these publishers.

Alternatives: Platmart Color Swatches groups separate products by color, and option builders such as Globo Product Options and Easify Custom Product Options include swatches alongside text fields and add-on prices. Prices and plans are in the apps table on the color swatch guide hub.

Route 3

Editing the theme code.

You don't need to edit code for swatches in Colorblock. Colorblock's Variant picker already reads Shopify's swatch data on product pages. The one gap, swatches on product cards, is better filled by an app or a swatch filter than by an edit you would redo after each update.

Collection pages.

Product-card swatches aren't confirmed for Colorblock, and Dawn, whose version number it shares, has none. Swatch filters work, and an app can add swatches to the cards.

  1. Add color filters with swatches (optional)

    The Theme Store lists swatch filters for Colorblock (checked October 23, 2026). Open the Search & Discovery app, go to Filters > Add filter, choose Color with the type Category metafield, then open Manage values and turn on Include swatch. For patterns, turn on Use images when available so the filter shows each entry's image.

  2. Or add an app for card swatches

    Apps such as GLO Color Swatch Variant Image (its free plan lists collection-page variants) and Color Swatch Pug (collection and product pages) add swatches under each product card through an app embed. Test on a duplicate of Colorblock first.

Colorblock at a glance.

The theme's facts from the Shopify Theme Store and Shopify's own pages, checked October 23, 2026. Anything we could not confirm says so.

Full Colorblock profile Check images against Colorblock's sizes
Colorblock: theme facts
Theme Colorblock
Vendor Shopify
Price Free Free in the Shopify Theme Store, checked October 23, 2026.
Free or paid Free
Where it is sold Shopify Theme Store
Status Current theme
Online Store 2.0 Yes
Current version 16.1.0 (October 9, 2026)
Theme family Shares Dawn's code and version number
Native color swatches Yes
Variant picker block Not confirmed by the vendor
Swatch setting Not confirmed by the vendor
Swatches on product cards Not confirmed by the vendor
Theme Store swatch features Color swatches, swatch filters
Swatch documentation Shopify Help Center
Product images 2048 x 2048 px Shopify help, all themes: "For square product images, a size of 2048 x 2048 px usually displays best." Product and collection images up to 5000 x 5000 px / 25 MP and under 20 MB. Source: Shopify Help Center.
Last checked October 23, 2026

Swatch problems on Colorblock, and fixes.

  • Swatches not showing

    Work through three checks in order: the product has a category that includes Color, its Color option is linked to the Color category metafield, and the swatch setting is on in Colorblock. Then open the Variant picker block and make sure Swatch isn't set to None. Updating Colorblock to the newest version in your theme library is worth trying too.

  • Wrong colors

    A native swatch takes its color from the entry in Content > Metaobjects, not from the color's name. Open the entry, correct the hex value and save, and every product linked to it updates at once. If two products show different shades of the same color, they're probably linked to two separate entries, so point both at one.

  • Pattern or image swatches

    Upload a square image to the color's entry. Crop it to the fabric or finish itself rather than a product photo, because at swatch size a busy photo turns into a blur. Multicolor has no preset hex value, so it always needs an image. The image is stored on the same entry as the color, so there's no second setting to find in the theme.

  • Out-of-stock variants

    How a sold-out color looks is decided by the variant picker in Colorblock, so test it: set one color to zero stock and open the product. If you'd rather hide sold-out colors completely, Color Swatch Pug and GLO Color Swatch Variant Image both list that option (checked October 23, 2026).

  • Speed

    Native swatches are drawn by Colorblock itself, so they add no app script to your pages. A hex swatch costs nothing extra to load; an image swatch adds one small image per color, so keep those files small. The swatch loading speed guide shows how to measure a collection page before and after a change. Colorblock draws no swatches on collection pages, so a card-swatch app is the part to watch: measure a large collection with the app's embed on and off.

Colorblock swatch questions.

Does Colorblock support native color swatches?

Yes, as far as the Theme Store shows: it lists color swatches and swatch filters for Colorblock (checked October 23, 2026), and Colorblock carries Dawn's version number, 16.1.0. Dawn has supported swatches since version 13.

Is Colorblock built on Dawn?

Shopify doesn't publish a list, but the evidence points that way. Colorblock carries Dawn's version number (16.1.0, October 9, 2026), and an old demo store for Colorblock reported Dawn as its schema name. That's why this guide uses Dawn's labels.

Do I need an app for swatches in Colorblock?

Not on the product page, where Colorblock's Variant picker handles swatches. An app makes sense if you want swatches on collection product cards, which we couldn't confirm for Colorblock, or extras such as hiding sold-out colors.

Can Colorblock use image swatches for patterns?

Yes. Upload an image to the color's entry in Content > Metaobjects. Shopify's swatch data carries a color, an image or both for each value, and Theme Store rules require listed themes to handle either, which suits stripes, prints and wood finishes.

Will updating Colorblock keep my swatches?

Yes. The colors and their hex values or images are stored with your products and in Content > Metaobjects, not in Colorblock. After an update, open the Variant picker block and confirm Swatch is still set to Circle or Square.

Related guides and tools.

Themes like Colorblock

Checked

Sources

Make the swatch files.

Turn your colors into hex values, swatch images and a printable sheet, ready for Shopify.

Open the swatch generator All theme guides