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

# Saves

> Configure the saves view that displays all saved items.

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:**

```js theme={null}
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. |

## sign-in

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](https://swish.app/docs/guides/customize/views/lists.md) and [Home](https://swish.app/docs/guides/customize/views/home.md) 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](https://swish.app/docs/guides/customize/views/home.md#targeting-a-block-at-some-shoppers) for the targeting rules — they are identical here. |

This is the same section Home carries, so [its documentation](https://swish.app/docs/guides/customize/views/home.md#content-block) 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.

> [!NOTE]
>
> 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](https://swish.app/docs/guides/customize/transforms#product-image) picks. Shows only when that transform is set. |

> [!NOTE]
>
> `showBuyButton` and `showQuickBuyButton` only reveal 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. 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.

> [!NOTE]
>
> 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.

> [!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]
>
> `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`](https://swish.app/docs/references/sdk/configuration#product-cards)
> 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:

```js theme={null}
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 } },
    ],
  },
}
```

## Further reading

* [Lists](https://swish.app/docs/guides/customize/views/lists.md) for the lists view configuration
* [Home](https://swish.app/docs/guides/customize/views/home.md#content-block) for content blocks in full
* [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.