Browse by Topic

Product Options: Swatch

The swatch display type is used to show a color or texture for a product or one of its attributes. It’s commonly used for products that are available in different colors or materials. For example, you could use swatches to let your customers select from available patterns of fabric.

The condition of this option type can be used with option rule logic to trigger certain updates, such as changing the picture, the price, or the weight.

If you only need to add colors, not patterns or textures, check out Product Options: Color.

Setting Up the Option

1. Go to ProductsProduct Options and click Create an Option.

2. Select the Create your own tile.

"Create your own" button

3. Enter the following details:

  • Option Name — The name of your option (to be used internally for keeping track of options)
  • Display Name — The label of the options seen by customers
  • Display Type — Swatch

4. Once you select Swatch, you can add your individual swatches:

Configure Swatch

  1. Swatch name — the name of the color or pattern. Customers will only see this when hovering their pointer over the swatch.
  2. Swatch type — select whether the swatch will contain one, two, three colors, or be a pattern (i.e. an uploaded image)
  3. Hex code — if you have a particular color’s hexidecimal code (a six-digit color code) that you want your swatch to use, enter it here. The swatch color will populate automatically.
  4. Color swatch — click to display a color picker, then select the color for your swatch
  5. Upload image — if you are using a pattern, you can upload an image of your texture or pattern. It will be automatically resized to fit your theme.

5. Click Next when done. On the following page, you will be prompted to add your option to an existing option set or to create a new one.


What's an option set? An option set is a collection of one or more options that is assigned to an individual product. Products are added to an option set rather than directly to the product, so that you can apply options to more than one product at a time. Learn more.

Select an Option Set

Check The option is required to complete checkout to require your customer to select an option before they can add it to their cart. The option set can be edited from the Option Sets page.

6. Save your changes. You can now apply the Option Set to a product.

Adding and Removing Swatches

Each color swatch option can have a maximum of 250 values (swatches).

To add a new swatch, click any plus (+) sign.

To remove an existing swatch, click the minus (-) sign beside it.

Was this article helpful?