Swatches on collection cards

Collection cards have less room than product pages, so their swatches come with their own set of controls: how many to show per card, what to do with the overflow, and whether to show swatches at all or just a count.

These settings live on the Appearance page, under the Product groups tab, in the Collection swatches card. The collection page widget must be on for any of them to matter.

Swatches or a count

The Display setting has two modes:

Swatches (default) - a row of visual swatches on each card.
Count only - a short text instead, like 5 colors, telling shoppers there are options without showing them.

In count-only mode, you control the text with the {{count}} variable - {{count}} color(s) renders as 5 color(s). The text is translatable, so it adapts to the shopper’s language.

Size and shape

Size - swatch size on cards, from 14 to 50 px. Cards usually want smaller swatches than product pages.
Use custom height - lets you set a separate Height for rectangular swatches.

How many swatches per card

Swatches limit (desktop) and Swatches limit (mobile) - how many swatches show on each card before the rest are cut off. Defaults: 5 on desktop, 3 on mobile.
Show hidden swatches count - adds a +N counter for the cut-off swatches, so shoppers know there’s more than what’s shown.
Counter position - whether the +N sits to the right (default) or left of the swatches.

Other display settings

Always display active swatch first - same as on product pages: the current product’s swatch moves to the front of the row.
Show swatches for pills - whether groups that use pill (text) swatches appear on collection cards at all. On by default; turn it off to keep text pills off your cards while they still show on product pages.

The Advanced section adds margin, alignment, and Custom CSS controls specific to the collection widget.

What clicking a swatch does

By default, clicking a swatch on a collection card navigates to that product’s page.

The app can instead update the card in place - clicking a swatch swaps the card’s image, price, and link to the matching product, so shoppers can compare colors without leaving the collection. If you’d like that behavior, contact support and we’ll switch it on for your store.

Which options appear on cards

Two more places control what shows up on cards, outside the Appearance page:

Per group: each group’s Displayed on setting can limit it to product pages, collection pages, or both.
Per option name: in Settings > Product groups, the Collection display card lists your option names - uncheck one to drop it from collection cards everywhere while keeping it on product pages. Handy when you want Color on cards but not Size.

Variant swatches on cards

Variant swatches can render on collection cards too - shoppers pick a color and the card updates to the matching variant. That’s controlled by the Displayed on setting on the Variant swatches page, not here.