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

> Set up and configure a dedicated wishlist page that displays list items in a product grid.

The list detail page renders a list as a standalone page on your store, outside of the drawer. It displays saved items with save buttons, variant selection, and quick buy actions, in one of two layouts set by `layout`: a responsive product grid, or a full-width row per item. The Swish admin doesn't expose that choice for this view — it renders the grid unless you set `layout` in code.

By default, the page is available at `/apps/wishlist` through the Shopify app proxy. Customers can reach it from shared list links or from navigation links you add to your store.

For the in-drawer version of this view, see [List detail](https://swish.app/docs/guides/customize/views/list-detail.md).

## How it works

On init, Swish looks for `#wishlist-page` in the DOM and replaces it with a `list-detail-page` element. On Shopify themes, the `/apps/wishlist` app proxy page provides this host element automatically. Headless storefronts (Hydrogen, Next.js, or custom storefronts) don't have the app proxy, so add `<div id="wishlist-page"></div>` to the page yourself.

The element reads query parameters to determine which list to display:

| Query parameter | Description |
| - | - |
| `list-id` | Display a specific list by its ID. |
| `public-list-id` | Display a shared public list. |

If no query parameter is present, the page shows all of the customer's saved items.

The page opens with a header: the title, then the page's actions. Which actions appear depends on the view:

| Element | All saved items | Own list (`list-id`) | Shared link (`public-list-id`) |
| - | - | - | - |
| Title | The `title` option, or "Wishlist" | The list's name, with a lock if it's private | The list's name |
| **Share** | Never shown: the API shares one list at a time | Shown when `showShareButton` is on (off by default) | Not the visitor's list |
| **Add all to cart** | Shown when `showAddAllToCartButton` is on | Same | Same |
| List menu | Not shown | Edit, add items, make public or private, share, delete | Not shown |
| Account button | **Sign in** for a guest, the customer's initial for an account | Same | Same |

**Share** makes the list public if it isn't already, then opens the device's share sheet on mobile or copies the link elsewhere. Deleting the list from the menu returns the customer to all of their saved items. The account button's menu offers the customer's lists (where the drawer is on), their account page and sign out.

## Configuration

Configure the page under `ui.listDetailPage` in your `SwishOptions`.

```js theme={null}
window.SwishOptions = {
  ui: {
    listDetailPage: {
      sections: [
        {
          type: "page-header",
          options: {
            title: "",
            titleAlignment: "left",
            showShareButton: false,
            showAddAllToCartButton: false,
            showAccountAvatar: true,
          },
        },
        {
          type: "list-items-grid",
          options: {
            layout: "gallery",
            showVendor: true,
            desktopColumns: 4,
            showBuyButton: false,
            showQuickBuyButton: false,
            showQuantityInput: false,
            showVariantTitle: true,
            showVariantOptionNames: false,
            enableVariantChange: true,
            hideCompareAtPrice: false,
          },
        },
      ],
    },
  },
};
```

A `sections` array replaces the defaults, so include both sections when you set one.

## page-header

| Option | Type | Default | Description |
| - | - | - | - |
| `title` | `string` | `""` | The title on the all-items view. Empty shows the translated "Wishlist". A single list always shows its own name. |
| `titleAlignment` | `"left" \| "center"` | `"left"` | `center` stacks the title above the actions, both centred, to sit beside a centred collection page. |
| `showShareButton` | `boolean` | `false` | Show **Share** on a list the customer owns. Off, and locked in the Swish admin, until the whole wishlist can be shared; set it in code to turn it on for single lists. |
| `showAddAllToCartButton` | `boolean` | `false` | Show **Add all to cart**. It adds every item on the page, at its saved variant, in one cart call. Items without a variant are skipped. With `showQuantityInput` on, each item is added at the amount its card shows. |
| `showAccountAvatar` | `boolean` | `true` | Show the account button. Turn it off if your theme's header already has one. |

## list-items-grid

| Option | Type | Default | Description |
| - | - | - | - |
| `layout` | `"gallery" \| "card"` | `"gallery"` | `gallery` is the responsive product grid. `card` gives each item a full-width row — image on the left, details and an **Add to cart** button on the right. 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. |
| `desktopColumns` | `number` | `4` | Number of product columns on desktop viewports. Applies to both layouts, but card rows are wide — 1 or 2 reads best. Mobile is always one column in card layout. |
| `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 shared list it only changes the amount added, and a reload shows the saved quantity again. |
| `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` | `true` | Allow customers to change the saved variant directly on the page. |
| `hideCompareAtPrice` | `boolean` | `false` | Hide the strike-through compare-at price; only the active price renders. |

> [!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 — in either layout.

> [!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` 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.

## Page path

The default path is `/apps/wishlist`. If your store uses a custom path, configure it under `context.routes`:

```js theme={null}
window.SwishOptions = {
  context: {
    routes: {
      listDetailPagePath: "/pages/my-wishlist",
    },
  },
};
```

> [!NOTE]
>
> The page path determines where shared list links point to and where drawer
> "view all" links navigate. Make sure the path matches an actual page on your
> store.

## Shared lists

When a customer shares a list, Swish generates a URL with a `public-list-id` query parameter pointing to the list detail page path. Visitors who follow this link see a read-only view of the shared list.

Shared list visitors can save items from the shared list to their own account, but cannot edit or remove items from the original list.

## Further reading

* [List detail](https://swish.app/docs/guides/customize/views/list-detail.md) for the in-drawer list view configuration
* [Lists](https://swish.app/docs/guides/customize/views/lists.md) for the lists view configuration
* [Configuration reference](https://swish.app/docs/references/sdk/configuration.md#page-header) for all page options


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