Variant swatches

Product pages

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

You can add swatches using default colors or custom colors added to your theme settings. You can also upload custom images to represent your product variants more precisely.

Why are my swatches blank?

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.

Enable swatches

In the theme editor, enable swatches in your theme settings by adding the option name for your product variants. You can enable swatches for multiple product options. If your store uses multiple languages, make sure to add the translated product option names for each language.

If you want to set up variants as individual products with their own images and details, learn how to set up Sibling product swatches..

STEPS

In your theme editor (Customize):

Click Theme settings, then click Product.
Enter the exact product option name in the Option for swatches field (e.g. "Material").
For multiple product options, enter all product option names, separated by commas (e.g. "Color, Material, Style").
If your store uses multiple languages, enter the translated names of the product options for each language, separated by commas (e.g. "Color, Couleur, Farbe").
Click Save.

Set up swatch colors or images

Choose one of four ways to add swatches:

Use default colors

Use default color names for variants to show one of 140 colors.

Use custom colors

Use hexcodes to show custom web colors.

Use custom images

Upload custom images uploaded to your store.

You can also enable Variant chips on product pages, which display product options as a row of clickable buttons with the variant name as the label. See the variant chips guide.

Appearance settings

You can choose to show swatches on products cards when hovered over anywhere on your site. Spark also has Dynamic option availability that grays out swatches of out-of-stock variants.

Enable dynamic option availability

Show swatches on product cards

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 2 days ago

Enable swatches

If you want to set up variants as individual products with their own images and details, learn how to set up Sibling product swatches..

STEPS

In your theme editor (Customize):

Click Theme settings, then click Product.
Enter the exact product option name in the Option for swatches field (e.g. "Material").
For multiple product options, enter all product option names, separated by commas (e.g. "Color, Material, Style").
If your store uses multiple languages, enter the translated names of the product options for each language, separated by commas (e.g. "Color, Couleur, Farbe").
Click Save.

Set up swatch colors or images

Choose one of four ways to add swatches:

Use default colors

Use default color names for variants to show one of 140 colors.

Use custom colors

Use hexcodes to show custom web colors.

Use custom images

Upload custom images uploaded to your store.

You can also enable Variant chips on product pages, which display product options as a row of clickable buttons with the variant name as the label. See the variant chips guide.

Appearance settings

You can choose to show swatches on products cards when hovered over anywhere on your site. Spark also has Dynamic option availability that grays out swatches of out-of-stock variants.