Variant swatches

Swatches use Shopify's built-in color and image data for each variant option value. Once that's set up, the theme renders clickable circles or squares instead of plain text.

Show swatches on product cards

1. Go to Theme settings > Product cards.
2. Turn on Show variant selector.
3. Leave Enabled variant option blank to show every option, or type one option name — usually Color — to show only that option on cards.

Swatches appear below the card image. Picking a swatch updates the card image when the variant has its own media. Full card setup is in Product cards.

Show swatches on the product page

1. Open your product template in the theme editor.
2. In Product information, select the Variant selector block.
3. Set Variant selector style to Pills (swatches don't appear in dropdown mode).
4. Choose Style swatch — Circle, Square, or Text (text-only pills, no color/image).
5. Adjust Size swatch if needed.

The Variant selector block is required for products with options — without it, customers can't choose a variant to add to cart. See Product information.

Set up swatch colors and images

Swatches pull from Shopify's category metafields for variant options — color hex values and swatch images assigned per option value.

Shopify's guide walks through the setup: Using category metafields.

In short: in the product admin, each variant option value (Red, Blue, etc.) can get a color or image swatch. The theme picks those up automatically — no theme-editor configuration per color.

Other settings

Collection filters can show swatch-style color filters when your store uses Shopify filter settings — see Storefront filtering. For gallery behavior when a variant is selected on the product page, see Product gallery settings and How can I prevent the gallery from changing with variant selection?.