A colour dropdown makes shoppers work: click, read a list, pick a word, hope it's the shade they wanted. Colour swatches replace that with a row of tappable dots or images — every option visible, one tap to choose. Here are the two ways to add them to your Shopify product page.
Option 1 — the native Online Store 2.0 method
Newer Shopify themes (Online Store 2.0) can show swatches for colour options without any app, using category metafields.
- Open Settings → Custom data → Metafields and make sure your products use the Color category metafield for the colour option.
- In your product, connect the colour option to that metafield (edit the option → connect to category metafield).
- In the theme editor, open the product template → select the Variant picker block → set the colour selector type to Swatch.
That's it for supported themes. It's free and native — but it comes with limits:
- Only works on themes that support variant swatches (many older/free themes don't).
- Colour swatches only — no image or pattern swatches for things like wood grain or fabric.
- No swatches on collection pages, and no grouping of separate products.
If that covers your needs, you're done. If you hit one of those walls, use option 2.
Option 2 — the no-code app method
An app adds swatches on any Online Store 2.0 theme and removes the native limits — colour, image, pattern, or text swatches, on product and collection pages, without touching theme code.
Using AWE Color Swatches:
- Install the app and enable its app embed in the theme editor.
- Pick the option to turn into swatches — Color, Size, or any option.
- Choose the swatch look — colour dots, real product images, patterns, or text buttons.
- Style shape, size, and spacing to match your theme, then save.
No code, no theme support required. You also get things the native method can't do: image swatches, collection-page swatches, and product groups that mimic Combined Listings without Plus.
Which should you use?
- Native swatches — free, fine if your theme supports it and you only need simple colour dots on the product page.
- App swatches — when you need image/pattern swatches, swatches on collection pages, an unsupported theme, or product grouping.
The short version
- Modern themes can show colour swatches natively via category metafields + the variant-picker block.
- For image swatches, collection pages, or unsupported themes, a no-code app is the way.
- Either way, the goal is the same: every option visible, one tap to choose.
Want the app route? Try Color Swatches free — swatches on any OS 2.0 theme, no code.