List detail page

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.

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.

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.

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.

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

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

Page path

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

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

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.

Get started

Features

Customize

Headless

AI tools

How it works

Configuration

page-header

list-items-grid

Page path

Shared lists

Further reading

​How it works

​Configuration

​page-header

​list-items-grid

​Page path

​Shared lists

​Further reading

How it works

Configuration

page-header

list-items-grid

Page path

Shared lists

Further reading