Compact display on collection cards

When a product has lots of options, the swatches can crowd your collection, search, and home‑page cards. Compact display keeps those cards tidy — show only a few swatches with a "+N" for the rest, put them on a scrolling row, or keep showing them all. It applies to listing cards only (the product page always shows every option), and works for the Swatch, Card, and Button styles (the Dropdown style is already compact).

Everything below is layout‑stable — cards don't jump or resize when shoppers expand options.

Open the setting

1. In the AWE app, open Design.
2. Click Custom on the style you want to tune (Swatch, Card, or Button).
3. Switch to the Collections view, then open the Compact display section.

   

   The Compact display section under the Collections view

Choose how overflow behaves

Under Overflow behavior, pick what happens when a card has more options than fit:

• Show all (default) — every swatch shows, exactly like before.
• Limit + "+N" — show a set number of swatches, then a "+N" for the rest.
• Carousel — keep every swatch on one row that scrolls sideways.

  

  The Overflow behavior dropdown set to "Limit + +N"

Fine‑tune "Limit + +N"

When you choose Limit + "+N", a few more controls appear:

1. Count mode

   • Fixed (default) — you set an exact number of swatches.
   • Auto‑fit — the app shows as many as fit the card width.
2. Max swatches (Fixed only) — how many show before the "+N". Most cards look best at 5–6.

   • Desktop — default 6 (2–12).
   • Mobile — default 4 (2–8).
3. When "+N" clicked — what the "+N" does:

   • Expand inline (default) — opens the rest of the swatches right on the card, no page load.
   • Show in popover — opens a small panel with the remaining options (hover on desktop, tap on mobile).
   • Go to product — takes the shopper to the product page.

   

   Limit controls: count mode, max swatches, and the "+N" action

Carousel

Carousel puts every swatch on a single row that scrolls, so nothing is hidden behind a "+N". On desktop, shoppers use the arrows or drag with the mouse; on mobile, they swipe.

Carousel selected, with the preview showing a scrolling swatch row

Good to know

• The preview panel updates as you change these settings — check both Desktop and Mobile to see how the counts differ.
• On mobile, swatches always keep a comfortable tap size even when you make them small.
• One setting covers all your listing cards — collections, search results, and home‑page product cards.