Create swatches for product variants

14 min

Product swatching allows you to show visually display available product variantsproduct variants on your Configured Commerce storefront. For instance, you can use swatching to display the variety of color choices available for a particular product. These swatches can be shown on the individual Product Detail Page (PDP) as well as among other products in your catalog on the Product List Page (PLP). You can configure swatching settings in the admin console for both Classic and Spire, and in the Style Guide in Spire.

Each Variant Type may have multiple Variant Traits with different swatch display types.

Use case

A business that sells clothing would like to show their customers the variety of options available for a t-shirt that has different sizes, colors and sleeve length options. They have already attached the desired traits to the applicable shirt variant type: size, color, and sleeve length. Using swatching settings, they can configure each trait according to how they would like the options displayed on their storefront: a dropdown menu for size, a swatch grid that shows available color option samples and buttons for the sleeve length.

Set the Swatch Type in the Style Guide in Spire

You can choose the way swatches will appear on your sites through the Content Administration page (Spire CMS only).

Go to Content Administration > Style Guide.

Scroll down to the Components section and select Swatch.

Select the desired Swatch Type from the dropdown menu: Square, Rounded Square, or Round. On the right, you can view a preview of the selected swatch type and how it will appear on your site by default, when disabled and when selected.

The selected swatch type will be set for every swatched variant type across your entire site.

If a Variant Value is out of stock or unavailable for a certain combination (for example, shirts are not made in the combination of XL and Red, and the user has selected the size XL), the disabled state version of the swatch will appear with a strikethrough.

Classic CMS sites have round swatches by default. You can customize swatch types in Classic by overriding the default CSS.

Create and configure variant traits for swatching

You can attach traits for swatching to existing variant types.

Go to Admin Console > Catalog > Variant Types.

Open the variant type you wish to configure from the Variant Types list, then click Traits on the left side of the page.

Click +Variant Trait to add values to your variant trait. This opens the Details tab.

Provide the Name of your variant trait.

Establish the Sort Order for your variant trait. Sort Order determines the order in which traits will be displayed on the PDP. The variant trait with the lowest sort order value will display on the PLP (in Spire).

Provide other details as needed, including:

A Description

An Unselected Value: the placeholder text that will display in a dropdown menu if no value is selected

The Display Trait Style: this setting determines how the variant displays on the PDP

Dropdown (default)

Button (a rectangular button with no swatch attached)

Swatch Dropdown (a dropdown menu with a swatch displayed to the left of each option on the menu)

Swatch Grid (a grid of swatched color/image samples)

Swatch List (a scrollable array of swatched color/image samples)

Note: Swatch Dropdown, Swatch Grid and Swatch List Display Trait Styles have two additional options:

Number Of Swatches Visible: the number entered in this field determines the number of swatches visible on the PLP in Spire; if there are more swatches than this number, a clickable View More link will direct users from the PLP to the PDP

Show Swatch Description: when toggled to No (default), only the swatch image/color will appear on the PDP; when toggled to Yes, the configured label will appear next to the swatch image/color on the PDP

Note: Swatch Dropdown menus always include descriptions.

Example PDP with swatch Display Trait Style configured:

Square

Rounded Square

Round

Swatch Grid

Square

Rounded Square

Round

Swatch List

Square

Rounded Square

Round

Swatch Description

When Show Swatch Description is toggled Yes in the Admin Console, Swatch Grid and Swatch List will include a swatch description on the PDP.

Swatch Grid with description

Swatch List with description

Create and configure variant trait values for swatching

After attaching traits to variant types, you then attach values to those traits.

Go to Admin Console > Catalog > Variant Types.

Click the Edit icon beside the variant type for which you want to add traits.

Click the Traits

Click the Edit icon beside the variant type for which you want to add traits.

Click the Values tab to configure Variant Trait Values. These values will be the available options for the selected variant trait.

Click +Variant Trait Value in the upper-right to add a variant trait value.

Enter the Value, or name for the trait.

Select the value’s Sort Order, or where it will appear on an ordered list among the other trait values for the variant.

Optionally, provide a Description for the value and establish it as the default value by toggling Yes or No.

If desired, select whether the Swatch Style is a Color or an Image

Color: provide a hex code for the swatch in the Color Value field; a preview of the color will appear in the box to the right of the field

Image: click Browse to browse your existing image files or upload a new one in the Media Manager, then click Choose.

Click Save.

Repeat this process for each Variant Trait Value for which you wish to establish swatches.