Display options
These settings change how the product-group widget lays out swatches on your product pages. They live on the Appearance page, under the Product groups tab. Swatches on collection cards have their own set of controls in the same place.
List or slider
Section titled “List or slider”By default, swatches wrap onto multiple rows as a list. Switch the display to Slider to keep them on a single horizontal row that scrolls sideways instead.
Use the slider when you have long swatch lists and want to keep the product page compact. The list works better when you want every swatch visible at once.
Show the active swatch first
Section titled “Show the active swatch first”Turn on Always display active swatch first to move the swatch for the current product to the front of the list. This helps shoppers see which option they’re viewing when the list is long.
It’s available for both product-page and collection-page swatches.
Limit how many swatches show
Section titled “Limit how many swatches show”For long lists, turn on Limit number of visible swatches to collapse the list behind a “Show more” button. Set separate limits for desktop and mobile, and change the button text if you want something other than “Show more”.
A few things to know:
- The button text is translatable, so it adapts to the shopper’s language.
- This setting is hidden in slider mode, since the slider already handles overflow.
- Collection cards have their own limits (5 per card on desktop by default).
Tooltips
Section titled “Tooltips”Tooltips show a swatch’s name when a shopper hovers over it. They’re off by default.
To turn them on, set Tooltip behavior to Show above swatch or Show below swatch.
Labels
Section titled “Labels”Turn on Show label to display a line of text above the swatches, like Color: Red. The label supports two variables:
{{option_name}}- the group’s option name (Color, Style, Size).{{current_value}}- the name of the selected swatch.
So a label of {{option_name}}: {{current_value}} renders as Color: Red on a red product.
Show only unique swatches
Section titled “Show only unique swatches”Unlike the settings above, this one is per group: open the group, expand Advanced, and turn on Show only unique swatches. The group then shows one swatch per name - if five products in the group all carry a Cotton swatch, shoppers see a single Cotton swatch instead of five copies.
It’s most useful for pill and button swatches, where several products often share the same value (the same material, style, or size) and the duplicates add nothing. The swatch for the product a shopper is viewing always stays visible.