How to set up swatches (for versions after 6th Sept 2024)

Use swatches to showcase Variants on both the Product page and Product grid. This handy visual tool allows customers to compare Variants and give a quick overview of all the product options.

You can show swatches in 3 different ways:

  1. Text

When you set up variants and enable Swatches on your Variant picker block, swatches will be displayed as text.

  1. Color swatches.

If you set up Category metafields and connect them to Variants you can assign HEX values or use a color picker to show color swatches.

  1. Image swatches.

Using Category metafields or connecting your Product media to your Variants you can show images as swatches.

1. Creating the swatches on your products

There are 2 ways you can assign colors or images to your variant swatches.

Remember: The theme also still supports the use of HEX values and PNG uploads when using the option name of 'Color' to ensure a smooth upgrade path for our existing merchants but we recommend using Category metafields for more flexibility and easier updates.

Using Category metafields.

Set up category color and images that can be used across product categories. For example a black swatch for clothing may need to look different than a black swatch for footwear.

Using Product media.

Pulls through the images assigned to those variants and displays them as swatches.

Using Category metafields

  1. Follow the Shopify guide below on how to set up Category metafields for your swatches:
    ​

Using variant images

  1. Follow Shopify's guide on adding variant images

  2. In the admin go to Sales channels > Online store > Themes and Customize your chosen theme

  3. Go to the Theme settings
    This is the cog icon in the top left on desktop or within the ... menu on mobile

  4. Open the Swatches dropdown

  5. In the setting labeled Use variant images add the Option names you wish to display variant images for. E.g. Material,Color,Flavour,Chain-length
    Note: The name must exactly match what you have on your product.

  6. Save

2. Enabling swatches in the theme

Product page

To show swatches on your product page you need to:

  1. In the admin go to Sales channels > Online store >Themes and Customize your chosen theme.
  2. Navigate to a product page or use the Template dropdown.
  3. In the Product > Variant picker block set Variant style to Swatches and save.

Product grids

To show swatches on your product grids (e.g. Collection templates, Featured collection section, Recently viewed etc.) you need to:

  1. In the admin go to Sales channels > Online store > Themes and Customize your chosen theme

  2. Go to the Theme settings
    This is the cog icon in the top left on desktop or within the ... menu on mobile

  3. Open the Product cards dropdown and enable Show swatches.
    ​

1. In the admin go to Sales channels > Online store > Themes and Customize your chosen theme.

2. Go to the Theme settings

This is the cog icon in the top left on desktop or within the ... menu on mobile.

  1. Open the Product cards dropdown and enable Show swatches.

Please reach out to our support team for further assistance if needed.