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

# 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](https://994607468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBkiMxIEXMgyaOj8WfXt%2Fuploads%2Fgit-blob-72accab371b219ac9864b7762a5cdee260f87ee3%2Fcompact-display-1-section.png?alt=media)

## 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"](https://994607468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBkiMxIEXMgyaOj8WfXt%2Fuploads%2Fgit-blob-6a4e9c05eb083b910c40e8e4b5d000e00ed22d63%2Fcompact-display-2-behavior.png?alt=media)

## 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](https://994607468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBkiMxIEXMgyaOj8WfXt%2Fuploads%2Fgit-blob-5e2bedbf5f5f815d8d84fc5a13e3a9554e28fe01%2Fcompact-display-3-limit-options.png?alt=media)

## 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](https://994607468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBkiMxIEXMgyaOj8WfXt%2Fuploads%2Fgit-blob-7e47bc9f2a99314850cd2e8cd17212b5831e0a1d%2Fcompact-display-4-carousel.png?alt=media)

## 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.awecommerce.net/swatches/compact-display-on-collection-cards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.