Techiepugs
Open the tools Theme guides

Color swatch guide

How to add color swatches to the Symmetry theme.

Symmetry is a paid theme by Clean Canvas, $420 in the Theme Store and at version 8.3.2 (July 3, 2026) when we checked on October 23, 2026. Clean Canvas says Shopify's swatches work in versions after 7.3.0, released September 3, 2024. Symmetry keeps almost every swatch choice in one place, Theme settings > Swatches, including product cards and collection filters.

Checked Symmetry theme profile

Which route fits Symmetry?

Route 1

Shopify's native swatches.

Native swatch support in Symmetry in versions after 7.3.0.

  1. Update Symmetry past 7.3.0

    Clean Canvas says Shopify swatches work in Symmetry versions after 7.3.0 (September 3, 2024). Check your version in Online Store > Themes and update if needed.

  2. 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.

  3. 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.

  4. 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 Symmetry.

  5. Choose Shopify swatches in Theme settings

    In the theme editor, open Theme settings > Swatches and set Swatches to display to Shopify. The other choices are None and Theme, which is Symmetry's own older swatch system.

  6. Pick a swatch style for the variant picker

    Open the product template's Variant picker block and set Swatch variant picker style to Icon-circle or Icon-square. Buttons and Dropdown are the other choices if you want text.

  7. Turn on swatches in product cards

    Back in Theme settings > Swatches, open the Product card group and turn on Enable swatches in product cards.

  8. 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 Symmetry 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.

Symmetry already shows swatches on product pages and product cards, so an app is for extras. Platmart Color Swatches joins separate products into one color picker, Rubik Variant Images & Swatch shows only the chosen color's photos, and GLO Color Swatch Variant Image adds product grouping and a hide-sold-out option.

  1. Duplicate Symmetry first

    In Online Store > Themes, open the menu beside Symmetry 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 draws its own swatches, set Swatches to display to None.

  6. Preview a product page and a collection page

    Use the theme editor preview, then a phone, to check both page types in Symmetry. 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 Symmetry

Swatch apps for Symmetry, from each App Store listing on October 23, 2026
AppFromRatingWhat it does
Platmart Color Swatches $9.99/month 5.0 (144 reviews) Made for stores that list each color as its own product: it joins them into one listing with swatches and lists collection-page support.
Rubik Variant Images & Swatch $25/month 5.0 (495 reviews) Best known for showing only the selected color's photos, with swatches included and ThemeForest themes named under Works with, but paid plans start at $25 a month.
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.

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

Alternatives: Variants King & Color Swatch also groups separate products by color, and FB Variant Image, Color Swatch is free. Both were listed in the Shopify App Store on October 23, 2026.

Route 3

Editing the theme code.

You don't need to edit code for swatches in Symmetry. Symmetry's Theme settings > Swatches group covers the product page, product cards and collection filters.

Collection pages.

Symmetry has settings for both card swatches and filter swatches, both in Theme settings > Swatches.

  1. Turn on product card swatches

    Open Theme settings > Swatches > Product card and turn on Enable swatches in product cards.

  2. Turn on filter swatches

    In the same Swatches group, open Collection filter and turn on Enable swatches in collection filter. Your Color filter itself is set up in the Search & Discovery app.

Symmetry at a glance.

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

Full Symmetry profile Check images against Symmetry's sizes
Symmetry: theme facts
Theme Symmetry
Vendor Clean Canvas
Price $420 One-time license price in the Shopify Theme Store, in US dollars, checked October 23, 2026.
Free or paid Paid
Where it is sold Shopify Theme Store
Status Current theme
Online Store 2.0 Yes
Current version 8.3.2 (July 3, 2026)
Native color swatches Yes In versions after 7.3.0.
Variant picker block Variant picker
Swatch setting Theme settings > Swatches > Swatches to display: Shopify (options None / Shopify / Theme); then, in the swatch guide's Variant picker settings, Swatch variant picker style: Buttons / Icon-square / Icon-circle / Dropdown
Swatches on product cards Theme settings > Swatches > Product card > Enable swatches in product cards
Swatches in collection filters Theme settings > Swatches > Collection filter > Enable swatches in collection filter
Theme Store swatch features Color swatches, swatch filters, combined listings
Swatch documentation Clean Canvas' documentation
General advice No fixed size No fixed pixel sizes: "Upload the largest version possible"; keep slideshow images identical in dimensions; max upload 20 MB. Source: Clean Canvas' documentation.
Favicon No fixed size Theme Settings > Favicon; PNG format; no pixel size stated. Source: Clean Canvas' documentation.
Last checked October 23, 2026

Swatch problems on Symmetry, 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 Symmetry. In Symmetry, the most common miss is Swatches to display still set to Theme or None. Also check the Variant picker block isn't set to Buttons or Dropdown.

  • 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. Clean Canvas gives no fixed pixel sizes and suggests uploading the largest version possible for photos; swatches are the exception, so keep those small.

  • Out-of-stock variants

    How a sold-out color looks is decided by the variant picker in Symmetry, 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 Symmetry 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.

Symmetry swatch questions.

Which Symmetry version supports Shopify swatches?

Clean Canvas says versions after 7.3.0, which came out on September 3, 2024. The Theme Store listed Symmetry 8.3.2 from July 3, 2026 on October 23, 2026.

What does Swatches to display: Theme mean in Symmetry?

Theme uses Symmetry's own older swatch system instead of Shopify's category metafields. Choose Shopify to use native swatches, which you manage once per color in the Shopify admin rather than in the theme.

Can Symmetry show swatches in collection filters?

Yes. Turn on Theme settings > Swatches > Collection filter > Enable swatches in collection filter, and set up a Color filter in the Search & Discovery app. The Theme Store lists swatch filters as a Symmetry feature.

What's the difference between Icon-circle and Buttons?

Icon-circle and Icon-square show each color as a swatch. Buttons shows the color names as text buttons, and Dropdown puts them in a menu. All four are choices in the Variant picker's Swatch variant picker style.

Does Symmetry support combined listings?

The Theme Store lists combined listings as a Symmetry feature (checked October 23, 2026). That lets products you sell separately by color share one picker; check Shopify's combined listings requirements for your plan first.

Related guides and tools.

Themes like Symmetry

About this page

This page replaces an older Color Swatch Pug setup guide for this theme, first archived in September 2021 on this domain. The domain changed hands in September 2026, and the app's setup has changed since the old guide was written.

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