Colour swatches on product cards

Colour swatches are small dots or images on a product card. They show the colour or finish choices for a product before the shopper opens it. This guide explains how to turn them on and what product data they need.

What the shopper sees

• Up to five swatches on a product card, for the first option that has swatch data.
• Each swatch shows a colour or an image. Hovering over a swatch shows its name.
• The swatches are a preview. Shoppers choose the exact variant on the product page.

Before you begin

• Give the product an option, such as Colour, with one value for each colour.
• Add swatch data to each value in the Shopify admin. Use a colour or an image for each value.
• Products without swatch data show no swatches.

1. Turn on swatches

1. Open the theme editor. Select Customize on the Chisel theme.
2. Open the theme settings and go to the Product cards group.
3. Turn on Show swatches.
4. Select Save.

2. Check the card

1. Open a collection page on the storefront.
2. Find a product with colour options.
3. Confirm that the swatches appear under the price. Confirm that the swatch names show when you hover over them.
4. Open the product. Confirm that the product page has the full colour choice.

Things to know

• Only the first option with swatch data is shown on the card.
• Turn on Show swatches and keep the product page choice in place. Shoppers need the product page to pick the exact variant.
• If you do not want swatches on cards, turn off Show swatches. The product page is not affected.