> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-color-swatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-color-swatches/getting-started/design/compact-display-on-collection-cards.md).

# Compact display on collection cards

Show a few swatches with "+N", a scrolling row, or all of them on product cards.

When a product has lots of options, swatches can crowd your collection, search and home-page cards. **Compact display** keeps those cards tidy.

To get started:\
**Design** → **Swatch**, **Card** or **Button** → **Custom** → **Collection page** tab → open **Compact display**.

{% hint style="info" %}
Compact display is on the **Collection page** tab only, for the **Swatch**, **Card** and **Button** styles. The product page always shows every option, and the Dropdown style is already compact.
{% endhint %}

***

## 1. **Overflow behavior**

What to do when a product has more options than fit on the card:

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-7a6b7a0354c5abc2795ef019366b629c1d83436e%2Fdesign-compact-display-01-section.png?alt=media" alt="Compact display section on the Collection page tab"><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="180"></th><th></th></tr></thead><tbody><tr><td><strong>Show all</strong> (default)</td><td><ul><li>Every swatch shows. Extra swatches wrap onto more rows.</li></ul></td></tr><tr><td><strong>Limit + "+N"</strong></td><td><ul><li>Show a set number of swatches, then a <strong>+N</strong> chip for the rest.</li><li>Great for: busy grids with many colors per product.</li></ul></td></tr><tr><td><strong>Carousel</strong></td><td><ul><li>Every swatch sits on one row that scrolls sideways. Arrows appear only when the row overflows.</li><li>Shoppers use the arrows, drag with the mouse, or swipe on mobile.</li></ul></td></tr></tbody></table>

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-d50d401c64897ad4e12918923bb2c51dcfd411cf%2Fdesign-compact-display-03-carousel.png?alt=media" alt="Carousel selected for compact display"><figcaption></figcaption></figure>

## 2. **Limit + "+N" settings**

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-fd5f5b63bc8fcf392f82679ad8bc1918c5ab7c3f%2Fdesign-compact-display-02-limit.png?alt=media" alt="Limit + N with count mode, max swatches and the +N action"><figcaption><p>1. Overflow behavior. 2. Count mode. 3. Desktop and mobile limits. 4. Action when shoppers select +N.</p></figcaption></figure>

### **2.1 Count mode**

* **Fixed** (default) — you set an exact number.
* **Auto-fit** — shows as many as fit the card width.

### **2.2 Max swatches**

How many show before the **+N** (for **Fixed**). Most cards look best at 5–6.

* **Desktop**: 2–12 (default 6)
* **Mobile**: 2–8 (default 4)

→ *Mobile means a screen 767 px wide or less.*

### **2.3 When "+N" clicked**

<table data-header-hidden><thead><tr><th width="180"></th><th></th></tr></thead><tbody><tr><td><strong>Expand inline</strong> (default)</td><td><ul><li>Opens the rest of the swatches right on the card — no page load, no layout shift. The chip turns into <strong>−</strong> (or <strong>Show less</strong> for buttons) to collapse again.</li></ul></td></tr><tr><td><strong>Show in popover</strong></td><td><ul><li>Opens a small panel with the remaining options — on hover on desktop, on tap on mobile.</li></ul></td></tr><tr><td><strong>Go to product</strong></td><td><ul><li>Takes the shopper to the product page to see every option.</li></ul></td></tr></tbody></table>

## 3. **Good to know**

* If a product has fewer options than your limit, no **+N** appears.
* Values hidden by **Sold-out variant display → Hidden** are not counted in **+N**.
* One setting covers every product card — collections, search results, the home page and related products.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-bbfc2354678154ff2656439c8116e50f457570fd%2Fdesign-compact-display-04-preview.png?alt=media" alt="Collection page preview with compact display"><figcaption></figcaption></figure>

***

💬 If you have any related questions, please contact us via **Live chat** in the app.