search

Swatches

Display your product variants as Swatches to make it easy for customers to quickly view and select product options at a glance. Instead of a dropdown menu, swatches visually represent your variants as a row of clickable buttons.

circle-exclamation

If you want to set up variants as individual products with their own images and details, learn how to set up Sibling product swatches. Note that sibling product swatches link to separate products and will not appear as swatches on collection pages or product listings.

chevron-rightWhy are my swatches blank?hashtag

If your swatches appear blank, make sure that you are using an existing default color or that your image files and custom swatch names match your variant names. You may also need to add custom swatches for multiple languages.

hashtag
Enable swatches

In your theme settings, choose which product options you want to show swatches for. By default, swatches are display for "Color".

circle-info

hashtag
Steps

  1. Go to gear Theme settings > Product.

  2. In Variant option for swatches, enter the exact name of your product options in a comma-separated list. If your store uses multiple languages, make sure to add the translated product option names for each language (e.g. "Color, Couleur, Farbe")

  3. Click Save.

hashtag
Use custom colors and images

You can add swatches using default colors, custom colors, or you can upload custom images.

Use default colors for swatches

Use custom colors for swatches

Upload custom images for swatches

circle-info

Shopify swatches

Cornerstone v4.2.0 added support for Shopify’s built-in swatches feature.

If you've added custom colors or images using Shopify’s category metafields, those swatch values will be used by default on product pages, product cards, and filter options.

Learn more about adding swatches with category metafieldsarrow-up-right.

hashtag
Swatch display options

Change the shape of swatches, show swatches on product cards, and enable Dynamic option availability to automatically gray-out swatches of out-of-stock variants.

Change swatch styles
Show on product cards
Dynamic option availability

hashtag
Watch tutorial

Watch the tutorial video for setting up swatches, including default colors, custom colors, and custom images.

Related links

Product pages Product listings Variant chips

Last updated