> ## Documentation Index
> Fetch the complete documentation index at: https://swish.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# List detail

> Configure the in-drawer list detail view that displays a single list's items.

The list detail view appears when a customer opens a specific list from inside the drawer. It renders the list's items in one of two layouts, set by `layout`. The Swish admin doesn't expose that choice for this view — it renders the gallery layout unless you set `layout` in code.

For the standalone full-page version of this view (the dedicated wishlist page on your store), see [List detail page](https://swish.app/docs/guides/customize/views/list-detail-page.md).

**Default configuration:**

```js theme={null}
ui: {
  listDetail: {
    sections: [
      {
        type: "list-items-grid",
        options: {
          layout: "gallery",
          showVendor: true,
          showBuyButton: false,
          showQuickBuyButton: false,
          showQuantityInput: false,
          showVariantTitle: true,
          showVariantOptionNames: false,
          enableVariantChange: false,
          hideCompareAtPrice: false,
          showImageToggle: false,
          showExpandButton: false,
        },
      },
    ],
  },
}
```

## list-items-grid

| Option | Type | Default | Description |
| - | - | - | - |
| `layout` | `"gallery" \| "card"` | `"gallery"` | `gallery` is a two-column grid of product tiles. `card` gives each item a full-width row — image on the left, details on the right, and an **Add to cart** button too if `showBuyButton` is on. Not exposed in the Swish admin for this view — set it in code if you want card. |
| `showVendor` | `boolean` | `true` | Show the product's vendor above the title. **Card layout only** — the gallery tile has no vendor line. Not exposed in the Swish admin for this view — set it in code if you want it. |
| `showBuyButton` | `boolean` | `false` | Show the solid buy button beneath each product card. Off by default; applies to both layouts when you turn it on. |
| `showQuickBuyButton` | `boolean` | `false` | Show the floating quick-buy button on the card image. Off until you turn it on. |
| `showQuantityInput` | `boolean` | `false` | Show a quantity stepper on each card, set to the item's saved quantity. The buy and quick-buy buttons add that amount, and quick buy opens on it. On the customer's own list a change is saved to the item; on a smart list it only changes the amount added. |
| `showVariantTitle` | `boolean` | `true` | Show the saved variant's title on the product card. |
| `showVariantOptionNames` | `boolean` | `false` | Show option names alongside values (e.g. "Size: M" instead of "M"). Not exposed in the Swish admin for this view — set it in code if you want it. |
| `enableVariantChange` | `boolean` | `false` | Allow customers to change the saved variant directly on the card. |
| `hideCompareAtPrice` | `boolean` | `false` | Hide the strike-through compare-at price; only the active price renders. |
| `showImageToggle` | `boolean` | `false` | Show a switch above the grid that flips every card between its main image and the one the [`productImage` transform](https://swish.app/docs/guides/customize/transforms#product-image) picks. Shows only when that transform is set. |
| `showExpandButton` | `boolean` | `false` | Show an expand button in the list's header that widens the drawer to the full browser width. See [Full-width view](#full-width-view). |

> [!NOTE]
>
> In card layout the product image renders square, rather than following the
> **Global → Components → Product cards → Card image aspect ratio**. A portrait image would make
> each row half again as tall and cut the number of items a customer sees at
> once, which is the reason to pick card layout in the first place.

> [!NOTE]
>
> `showBuyButton` only reveals a button that the
> [`addToCartButton` transform](https://swish.app/docs/guides/customize/transforms#add-to-cart-button)
> also allows. That transform defaults to `true`, so supply it only when you
> want to hide cart buttons for particular products.

> [!NOTE]
>
> `showBuyButton` controls the solid buy button *beneath* the card;
> `showQuickBuyButton` controls the floating quick-buy button over the card
> image. They are separate buttons and separate switches, both off by default.
> To hide quick-buy across every surface at once in code, use the store-wide
> [`ui.productCard.showQuickBuyButton`](https://swish.app/docs/references/sdk/configuration#product-cards)
> switch, which overrides this one.

## Full-width view

Turn on `showExpandButton` (**Show expand button** in the Swish admin) to give customers an expand button at the start of the list's header, before the share and menu buttons. It widens the drawer to the full width of the browser, and the grid fills the extra room with more columns, so a long list or a list of large products shows more items at once.

While the drawer is expanded:

* The footer navigation is hidden.
* The header stays, with its back button and the list's share and menu buttons.
* The expand button becomes a collapse button that returns the drawer to its usual width.

The drawer also returns to its usual width when the customer leaves the list, opens another list or closes the drawer. It does not remember the choice between visits.

The button shows only on screens 600px wide and up, where the drawer opens as a side panel. Below that, the drawer already fills the width of the screen. Its screen-reader labels are `drawer.listDetail.expand` and `drawer.listDetail.collapse` in [translations](https://swish.app/docs/guides/customize/translations.md).

To style the expanded drawer with [custom CSS](https://swish.app/docs/guides/customize/appearance/css.md), target `.sheet-container.expanded`.

## Further reading

* [List detail page](https://swish.app/docs/guides/customize/views/list-detail-page.md) for the standalone full-page configuration
* [Lists](https://swish.app/docs/guides/customize/views/lists.md) for the lists view configuration
* [Views overview](https://swish.app/docs/guides/customize/views/overview.md) for how sections work


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.