Skip to content

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 to represent each variant of a particular product.

Three example color swatches on a store's Product page.

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

Turn on color swatch use

To turn on the use of color swatches for Product pages, complete the following steps.

  1. On your store's Shopify admin page, on the side menu, select Sales channels > Online store > Themes.

  2. In the Current theme or Theme library area, locate the version of Baseline you want to modify, and then select Customize to open Theme editor.

    The Customize Theme option on a store's Shopify admin page.

  3. From the Theme editor menu, select Theme settings.

    The Theme settings option in Theme editor.

  4. From the Theme settings menu, select Products to expand the menu options.

    The products menu in Theme settings

  5. On the Products menu, locate the Color swatches menu area.

  6. Select the checkbox Enable color swatches on product pages to turn on using color swatches for Product pages.

    The color swatches checkbox options in Theme settings.

TIP

When you're finished adjusting the theme, to avoid losing your unsaved changes, select Save at the top of the Theme editor.

The save button in Theme settings

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. Refer to Shopify help: Add variants to a product.

  1. In Theme editor, use the dropdown at the top to select a Product template.

    For example, select Products > Default product.

    The Default product page template selected in Theme editor.

  2. On the side menu, expand the Product pages section menu.

    The Product pages section selected in Theme editor.

  3. On the Product pages section menu, select the Variant picker block.

    The variant picker option in the Product pages section in Theme editor.

  4. On the Variant picker block menu, set Options style to Button.

    The Variant picker's Options style setting in Theme editor.

Setup a product variant to use swatches

By default, color swatches are enabled or "triggered" for product variants named Color or Colour. You can trigger the use of swatches with other product variants, like patterns or textures.

To setup a product variant to use swatches, complete the following steps.

  1. On your store's Shopify admin page, on the side menu, select Sales channels > Online store > Themes.

  2. In the Current theme or Theme library area, locate the version of Baseline you want to modify, and then select "..." (the ellipsis icon) to open the Actions menu.

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

    The Actions menu selected in Shopify admin.

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

    The Products tab selected on the Theme content page in Shopify admin.

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

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

    The Color swatch trigger textbox on the Theme content page in Shopify admin.

  6. Select Save.

    The Save button on the Theme content page in Shopify admin.

Use a png image as a color swatch icon

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

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

    The Files menu option in Shopify admin.

  2. Select a png file from the Files list.

    For example, in the following image, the file blue.png is selected. Now, when a product has a variant named blue, the blue.png file is used as the color swatch icon.

    Alternatively, to upload a new png file, select Upload files, and then choose a png file on your computer or enter a URL for an image file.

    A png file uploaded and selected in the Files menu in Shopify admin.

  3. Select Save.

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.
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 namePNG image filename
Blackblack.png
Rose Goldrose-gold.png
Green/Yellowgreen-yellow.png

If a png image filename matches the name of a color swatch, Baseline theme 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 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. On your store's Shopify admin page, 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.

    Example image files uploaded and selected in the Variants are of the Shopify admin Products page.

  5. Select Save.