Product group styles and swatches

Choose the display style for a group and set what each product's swatch shows.

The styles

Style in the Product group configuration section decides how the group is displayed:

Style	What shoppers see
Product image swatch	Each product's own image, used as the swatch.
Product title button	A button with each product's label.
Dropdown list	A plain select list of the labels.
Dropdown list with product image	A select list with a thumbnail beside each label.
Product image, title and price	A tile per product with its image, name and price.
Pill swatch	A colour or image chip inside a pill, with the label beside it.
Button with price	A button showing the label and the price.

Product image swatch is the default and the right choice for colour families. Product title button and the dropdowns suit groups where the label matters more than the picture — models, capacities, lengths.

Set a product's swatch

Click the swatch thumbnail on any product row to open Select color.

Click on the swatch thumbnail

The Select color window for one product in a group

You have four ways to fill it, and you can set more than one:

Control	What it does
Color 1	A single colour.
Two colors + Color 2	Tick Two colors and set a second colour for a two-tone swatch.
Enable uploaded image	Tick it, then use Add file to upload a JPG, PNG or GIF.
Enable image URL	Tick it and paste a link starting with http:// or https://.

Click Save in the window, then Save on the group.

Change the alternative name for the product name

By default, we use the product name as option value.

Click Save in the window, then Save on the group.

Which one wins

If you set several, the app uses them in this order:

1. Image URL

2. Uploaded file

3. Two colours

4. One colour

If none is set, the product's own Shopify image is used.

Group settings that apply to every group

Settings → Product groups holds the storewide options:

• Show Group Name — show or hide the option name above the swatches.

• Show Tooltip for Product Group — show the label on hover. Only applies to the product image swatch style, and may not display properly when Carousel is enabled.

• Show Carousel on collection pages and on product pages — put the group on one scrollable line.

• Limit of the product number displayed for Product Group — hide extra products behind a "More" button on collection pages, with a Limit you set.

See Product groups settings.

Related pages

• Create a product group

• Show product groups on your storefront