Set up color swatches

This guide describes how to set up color swatches to represent variants of a product.

A single product can have many variants. For example, a clothing product might have variations in pattern, size, and color. Refer to Shopify help: Variants.

Use color swatches to provide your store's visitors with selectable icons that represent each variant of a product.

The previous image shows a store's Product page. In the center right, the color swatch icons indicate that the T-Shirt product has the color variants Black, Gray, and White.

Enable color swatches on Product pages

To enable color swatches on Product pages, complete the following steps:

1. In your Shopify admin, go to Sales channels > Online store > Themes.

2. In the Themes pane, next to the name of the theme you want to customize, select Edit theme to open Shopify's Theme editor.

3. In the Theme editor, select Theme settings > Color swatches.

4. Turn on the Enable color swatches on product pages option.

   

5. Select Save.

Use color swatches on Product pages

To use color swatches on Product pages, add variants to your store's products, and then complete the following steps:

Note

To add variants to products in your store, refer to Shopify help: Add variants to a product.

1. In the Theme editor, at the top of the page, use the theme templates dropdown menu to select a Product template. For example, select Products > Default product.

2. Expand the Product pages section menu.

3. Select the Variant picker block.

4. Use the block's Options style setting to select Button.

   

5. Select Save.

Set up a product variant to trigger swatches

By default, color swatches are triggered automatically for product variants named Color or Colour. You can trigger swatches for other product variants, such as patterns or textures.

To set up a product variant to trigger swatches, complete the following steps:

1. In your Shopify admin, go to Sales channels > Online store > Themes.

2. In the Themes pane, next to the name of the theme you want to customize, select ... (the ellipsis icon) to open the Actions menu.

3. From the Actions menu, select Edit default theme content.

   

4. On the Theme content page, select the Products tab.

5. Locate the Product > Color swatch trigger field, and then enter a name for the product variant that will use swatches.

   For example, enter Pattern into the Color swatch trigger field. Now, whenever a product has a variant named Pattern, you can use a swatch icon to represent each pattern variant.

   

6. Select Save.

Use a PNG image as a color swatch icon

With Baseline, you can choose a PNG image to use as an icon for a color swatch. To use a PNG file as an icon, complete the following steps:

1. In your store's Shopify admin, select Content > Files.

2. Add an image file to use as a color swatch icon.

   Note

   The following lists the criteria for using image files as color swatch icons.

   • The image file format must be PNG.
   • Image filenames must be lowercase.
   • Image filenames cannot contain spaces; instead, you can use hyphens in the filename.
   • Special characters are not permitted in image filenames.

3. Select Save.

Example: Color swatch names with corresponding PNG image filenames

The following table provides examples of color swatch names and their corresponding PNG image filenames.

Color swatch name	PNG image filename
Blue	blue.png
Black	black.png
Rose Gold	rose-gold.png
Green/Yellow	green-yellow.png

If a PNG image filename matches the name of a color swatch, Baseline uses the PNG as an icon for the swatch. Otherwise, Baseline uses a CSS color (if a CSS color with the same name as the swatch exists). Refer to CSS Colors for a list of CSS colors.

Set up an image file for a product variant

To set up an image file to use for a product variant on a Product page, complete the following steps:

1. In your store's Shopify admin, select Products.

2. Select a product from the Products list.

3. In the Variants area, select the Add image icon for the required product variant.

4. Select an existing image file to use, or choose Add image to upload a new image, and then select Done.

   

5. Select Save.