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

# Views overview

> How views and sections work in the Swish UI.

The Swish UI is organized into views, and each view is built from an ordered list of sections. You configure views by passing a `sections` array under `ui` when initializing the SDK.

Every section follows the same shape:

```js theme={null}
{
  type: "section-type",
  hidden: false,
  options: { /* section-specific settings */ },
}
```

Set `hidden: true` on any section to remove it from the view without deleting its configuration. When you provide a `sections` array for a view, it replaces the defaults entirely.

## Available views

The drawer has a built-in router with the following views:

| View | Config key | Description |
| - | - | - |
| [Drawer](https://swish.app/docs/guides/customize/views/drawer.md) | `ui.drawer` | Header and footer chrome wrapping all views. |
| [Home](https://swish.app/docs/guides/customize/views/home.md) | `ui.home` | Default landing view with saved items, sections, and callouts. |
| [Saves](https://swish.app/docs/guides/customize/views/saves.md) | `ui.saves` | Flat list of all saved items with list sliders. |
| [Lists](https://swish.app/docs/guides/customize/views/lists.md) | `ui.lists` | Customer's custom lists with item counts. |
| [List detail](https://swish.app/docs/guides/customize/views/list-detail.md) | `ui.listDetail` | In-drawer view of a single list's items. |
| [Product detail](https://swish.app/docs/guides/customize/views/product-detail.md) | `ui.productDetail` | Full product view with images, variants, and buy buttons. |
| [Orders](https://swish.app/docs/guides/customize/views/orders.md) | `ui.orders` | Recent orders with status. |
| [Order detail](https://swish.app/docs/guides/customize/views/order-detail.md) | `ui.orderDetail` | Line items, tracking info, and reorder actions. |
| [Profile](https://swish.app/docs/guides/customize/views/profile.md) | `ui.profile` | Account profile form. |
| [Notifications](https://swish.app/docs/guides/customize/views/notifications.md) | `ui.notifications` | Price drop, back in stock, and low stock alerts. |
| [List detail page](https://swish.app/docs/guides/customize/views/list-detail-page.md) | `ui.listDetailPage` | Standalone full-page list detail view outside the drawer. |

## Single list only

Stores that want one wishlist per customer instead of many turn multiple lists off.

```js theme={null}
window.SwishOptions = {
  ui: {
    wishlist: {
      multipleLists: false,
    },
  },
};
```

| Option | Type | Default | Description |
| - | - | - | - |
| `multipleLists` | `boolean` | `true` | Let customers keep more than one saved list. |

When it's `false`, saving and unsaving stop prompting for a list: the save toast's action opens your [default view](https://swish.app/docs/references/sdk/configuration.md) instead of the list picker, and unsaving skips the picker whatever `intents.unsaveProduct.selectList` says. Saving still shows a toast - that stays governed by `intents.saveProduct.showFeedback`.

Intents you invoke yourself are unaffected: `edit:item-lists` (also reached through `useSwishItem().lists.update`), `create:list`, and `view:lists` still open list UI. The setting governs the prompts Swish raises on its own, not what your theme code can ask for.

Setting it in the customiser (Global → Preferences → Wishlist experience) also hides the list sections on Home and Saves, and the Lists tab in the drawer footer. "For you" lists stay visible: they're smart lists, with no create-or-manage actions of their own.

The classic wishlist page (`ui.wishlist.experience: "classic-page"`) already implies a single list, so it suppresses the same list prompts on its own - reach for `multipleLists` when you want one list *and* the drawer. On the classic page the save toast carries no action at all, since there is no drawer to open.

## Opening the drawer

> [!NOTE]
>
> `view:home` means "open Swish", not "open the Home view": it opens whichever
> view `ui.defaultView` names. That covers the header button, `swish-intent`
> buttons, `#swish` links and the query string below, so pointing a store at
> Saves takes one customiser setting rather than an edit to every trigger. See
> [`ui.defaultView`](https://swish.app/docs/references/sdk/configuration).

### From the home button

The [header button](https://swish.app/docs/guides/customize/placements/header.md) opens the drawer to the default view on click.

### From intents

Use navigation intents to open the drawer to a specific view:

```js theme={null}
await swish.intents.invoke("view:home");
await swish.intents.invoke("view:lists");
await swish.intents.invoke("view:list", { listId: "abc123" });
await swish.intents.invoke("view:product", { productId: 8234567890123 });
await swish.intents.invoke("view:orders");
await swish.intents.invoke("view:order", { orderId: 6234567890123 });
await swish.intents.invoke("view:notifications");
await swish.intents.invoke("view:saves");
```

### From HTML attributes

Add the `swish-intent` attribute to any clickable element:

```html theme={null}
<button type="button" swish-intent="view:home">Open Wishlist</button>
<a swish-intent="view:list?list=abc123">View List</a>
```

### From URL hash

A subset of views can be triggered via the URL hash, useful for links in emails or marketing campaigns:

| Hash | View |
| - | - |
| `#swish` or `#swish-home` | Default view |
| `#swish-lists` | Lists |
| `#swish-saves` | Saves |
| `#swish-orders` | Orders |
| `#swish-notifications` | Notifications |
| `#swish-profile` | Profile |

### From URL query string

```
https://your-store.com?swish-intent=view:home
https://your-store.com?swish-intent=view:list&list=abc123
```

## Further reading

* [Design](https://swish.app/docs/guides/customize/appearance/design.md) to customize colors, fonts, and spacing
* [Full defaults reference](https://swish.app/docs/guides/customize/defaults.md) for all view defaults
* [Configuration reference](https://swish.app/docs/references/sdk/configuration.md) for the complete options list


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