List detail

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. Default configuration:

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

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.

showBuyButton only reveals a button that the addToCartButton transform also allows. That transform defaults to true, so supply it only when you want to hide cart buttons for particular products.

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 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. To style the expanded drawer with custom CSS, target .sheet-container.expanded.

Get started

Features

Customize

Headless

AI tools

list-items-grid

Full-width view

Further reading

​list-items-grid

​Full-width view

​Further reading

list-items-grid

Full-width view

Further reading