Saves

The saves view shows the customer’s saved items. It combines list sliders and a grid of saved items, laid out either as product tiles or as one full-width row per item (layout). The grid’s heading links to the same grid on a screen of its own, headed All Items (saves.allItems) and without the sliders above it. That screen reads the all-items-grid options below, so whatever you configure here — layout included — applies to both. The link is hidden when no lists-section is visible, since the view is then already only the grid. Default configuration:

ui: {
  saves: {
    sections: [
      { type: "sign-in" },
      { type: "lists-section", options: { display: "myLists" } },
      { type: "lists-section", options: { display: "forYouLists" } },
      { type: "content-block", hidden: true },
      { type: "all-items-grid" },
    ],
  },
}

Sections:

Section	Description
`sign-in`	Sign-in callout for guest visitors. Takes an `options.message` — see below.
`lists-section`	A slider or list of the customer’s own lists, or of smart lists.
`content-block`	Custom content block with title, body, image, and link. Can be targeted at some shoppers — see below.
`all-items-grid`	The grid of saved items.

The sign-in callout for signed-out shoppers. It renders above the rest of the view - a guest’s own saved items stay visible below it. Set hidden: true to remove it.

Option	Type	Default	Description
`message`	`string`	`""`	Copy shown above the sign-in button. Empty uses the translated `signIn.description` default. A `t:`-prefixed value is resolved as a translation key.

Each view that carries this section has its own message, so Saves, Lists and Home can each make a different case for signing in.

lists-section

Option	Type	Default	Description
`display`	`"myLists" \| "forYouLists"`	`"myLists"`	Which lists to show: the customer’s own or smart lists.
`layout`	`"list" \| "slider"`	`"slider"`	Display as a vertical list or horizontal slider.

content-block

A custom block of your own copy, image and link, anywhere among the sections. Saves ships one, switched off, seeded above the grid; you can add up to three and drag each anywhere in the order.

Option	Type	Default	Description
`title`	`string`	—	Heading text.
`body`	`string`	—	Body copy below the title.
`image`	`object`	—	`{ url, width?, height? }`. `width` and `height` set the aspect ratio.
`link`	`object`	—	`{ url, target? }`. Makes the whole block clickable and adds a chevron.
`visibleTo`	`object`	—	Which shoppers see the block. See Home for the targeting rules — they are identical here.

This is the same section Home carries, so its documentation covers the options in full rather than being repeated here. In the customiser, Views → Saves has the Add content block button, a delete control on each block, and a drag grip on every row.

Content blocks belong to the Saves screen itself. The All Items screen is the grid on its own, so it drops them along with the sliders.

all-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 and an Add to cart button on the right. Applies to the All Items screen too.
`showVendor`	`boolean`	`true`	Show the product’s vendor above the title. Card layout only — the gallery tile has no vendor line.
`showSaveButton`	`boolean`	`true`	Show the save/unsave button on cards.
`showQuickBuyButton`	`boolean`	`false`	Show the floating quick-buy button on the card image. Off until you turn it on.
`showBuyButton`	`boolean`	`false`	Show the solid buy button beneath each product card. Card layout always shows it, regardless of this option — see the note below.
`showVariantTitle`	`boolean`	`true`	Show the variant title on cards.
`enableVariantChange`	`boolean`	`false`	Allow changing the variant from cards.
`showVariantOptionNames`	`boolean`	`true`	Show option names alongside values.
`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.

showBuyButton and showQuickBuyButton only reveal 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. The two rungs point opposite ways on purpose: the transform is on, so a cart button is always available, and each section’s own switch is off, so you decide per surface where one actually appears.

Card layout renders one item per row and shows the buy button on every card. showBuyButton is not exposed in the Swish admin for this view, so card layout turns the button on itself rather than depending on a switch you can’t reach. It is still subject to the addToCartButton transform above.

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.

showQuickBuyButton here covers this grid only. To hide quick-buy on every card - including featured collections, which have no option of their own - use the store-wide ui.productCard.showQuickBuyButton switch. Setting it to false wins over this option.

Example

Hide the for-you slider, promote a members-only collection above the grid, and disable quick buy on that grid:

ui: {
  saves: {
    sections: [
      { type: "sign-in", options: { message: "Sign in to keep your saves on every device." } },
      { type: "lists-section", options: { display: "myLists" } },
      { type: "lists-section", options: { display: "forYouLists" }, hidden: true },
      {
        type: "content-block",
        title: "Members get 20% off",
        body: "Sign in to see your price.",
        link: { url: "/collections/members", target: "_self" },
        visibleTo: { customerTags: ["VIP"] },
      },
      { type: "all-items-grid", options: { showQuickBuyButton: false } },
    ],
  },
}

Get started

Features

Customize

Headless

AI tools

lists-section

content-block

all-items-grid

Example

Further reading

​sign-in

​lists-section

​content-block

​all-items-grid

​Example

​Further reading

sign-in

lists-section

content-block

all-items-grid

Example

Further reading