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. On the left, the color swatches icons indicate that the product has the color variants White, Grey, and Black.

Turn on or off color swatch use

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

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

  2. In the Current theme or Theme library area, locate the version of Cascade 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.

  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 or off 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 Products page template.

    For example, in the following image, the Products > Default product page is selected.

    The Default product page template selected in Theme editor.

  2. On the product page, select a product section to expand the section menu.

    For example, in the following image, a Products section is selected.

    The Product section selected on the Default product page in Theme editor.

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

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

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

    The Options style dropdown in Theme settings

  5. Select Save.

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, select Sales channels > Online store > Themes.

  2. In the Themes area, locate the version of Cascade you want to modify, and then select "..." (the ellipsis icon) to open the Actions dropdown.

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

    The Actions dropdown 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 to represent each pattern variant.

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

  6. Select Save.

Use a png image as a color swatch icon

With Cascade, 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, Cascade theme uses the png as an icon for the swatch. Otherwise, Cascade 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 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.

    Three jpg files uploaded and selected in the Variants are of the Shopify Admin Products page.

  5. Select Save.