Docs/Color Swatch & Variants

Color Swatch Setup Guide

Two surfaces to switch on, then a few minutes checking that the app read your colours correctly.

Before you start

An Online Store 2.0 theme, so the theme editor has an App blocks section on the product template
At least one product option holding colours, usually named Color
Nothing to prepare in advance. The app reads your catalogue itself on first open

Install the app from the Shopify App Store and open it from Apps in your Shopify admin.
The first time the Dashboard loads, the app reads your products and builds the list of options and values. Large catalogues take a moment.
It syncs again on its own whenever you edit a product, so a new colour appears without you doing anything. There is also a Sync catalog button on the Dashboard if you want it now.

On the Dashboard, click Add to product page. This opens the theme editor with the block ready to place.
The block is called Color swatches. Position it directly above your theme's own variant picker.
Leave the theme's variant picker in the template. The app hides it and drives it, so removing it breaks add to cart.
Click Save in the theme editor.

Back on the Dashboard, click Enable on theme for the collection surface.
In the theme editor, open App embeds and switch on Collection swatches, then Save.
This one embed covers collection pages, search results, the home page and the related products row on product pages. You choose which of those in Display.

Open Swatches. The app has already mapped your colour values, first from any native option value swatches you set in Shopify, then from a built-in colour dictionary.
Anything it was unsure about is left unmapped and listed for you. Fix those by picking a colour or uploading an image.
For a large catalogue, use the CSV export and import on the same page rather than editing one by one.

Open Options. Each product option gets its own display style, so Color can be swatches while Size stays a dropdown.
There are eleven styles grouped as Swatches, Buttons and Dropdowns, plus six swatch shapes. A preview updates as you change them.
Set an option to Theme default to make the app render nothing for it and leave that option to your theme.
In Display you can also set how sold out values look, cap how many swatches appear on a product card, and turn on a stock line such as Only 3 left in stock.

Place the app block above the theme's variant picker. Below it, shoppers see the theme picker for an instant before the swatches take over.
If your theme is one the app cannot drive, it reveals your normal variant picker again after two seconds rather than leaving the page broken. If that happens, contact us with your theme name.
Selling one colour per product listing instead of one product with colour variants? Use Product groups to link those listings into a single swatch row.
Missing Images lists variants that have no photo of their own. It is the fastest way to find the gaps that make a swatch row look unfinished.
Deleted mappings are recoverable for 30 days, so experimenting is safe.