Getting started

This is the shortest path from a fresh install to swatches your customers can see. It takes about ten minutes. Every step links to a deeper guide, but you won’t need them for the happy path.

1. Pick your feature

The app has two features, and which one you need depends on how your store is built. Open any product in your Shopify admin and scroll to the Variants section:

• Your colors are listed there as variants of that product → use Variant Swatches.
• Each color is its own product with its own page → use Product Groups.

Some catalogs mix both - that’s fine, the features work side by side. Start with whichever covers more of your products; you can add the other later.

2. Turn on the app embed

Swatches render through a theme app embed. Turn it on from the app - it opens the theme editor at the right spot and verifies the install:

1. Open the Color Swatches app and click Manage widgets on the home page.
2. In the Product widget section, select your theme.
3. Click Enable app embed. The theme editor opens with the embed turned on.
4. Click Save in the theme editor.
5. Back in the app, click Check status to confirm the install.

If you also want swatches on collection pages, repeat the steps in the Collection widget section.

The app finds the right spot on your pages automatically. For custom positioning or non-standard themes, see installation - but for most stores, this is the whole step.

3. Set up your first swatches

Product Groups

Link your first set of related products - say, one t-shirt sold as five color listings:

1. Open Color Swatches and go to Product groups, then click Create group.
2. Give the group a Title for your own reference (like Classic Tee) and an Option name your customers will see (like Color).
3. Add the products that belong together using search or Browse.
4. For each product, pick a swatch type and set its color or image. Click Auto-fill swatches to name them all from product titles in one go.
5. Click Save.

That’s one group done. The full walkthrough is at create a product group, or watch the flow:

Variant Swatches

Turn your existing option dropdowns into swatches:

1. Open Color Swatches and go to Variant swatches. The app pulls your options (Color, Size, and so on) from Shopify automatically the first time.
2. For each option, pick a Swatch style - Color or image for Color, Pill / Button for Size and the rest.
3. For color options, click the option and run Auto-detect colors - the app matches standard names automatically and you can correct any it gets wrong.
4. In the Status card, set the status to Enabled. Prefer to test first? Choose Only selected products and pick a product or two.

The full walkthrough is at set up variant swatches.

4. Check your storefront

Open one of the products on your storefront. Swatch data syncs through Shopify metafields, so give the first sync a few minutes, then reload.

You should see a row of swatches on the product page - and on collection cards too, if you enabled the collection embed. If nothing shows up after a few minutes, work through swatches aren’t showing - the answer is almost always one of the first three checks.

Note

Want to see what a finished setup looks like? Browse the demo store - product groups and variant swatches, live.

5. Where to go next

• Customize how swatches look - shape, size, tooltips, out-of-stock styling.
• Swatches on collection cards - per-card limits, the “+N” counter, click behavior.
• Working with a big catalog? Automations build groups from collections or metafields, and CSV import handles bulk setup.
• Plans and features - what’s included where, and the limits at a glance.