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

# Home

> Configure the home view, the default landing screen when the drawer opens.

The home view is the default landing when the drawer opens. Sections control what appears and in what order.

**Default configuration:**

```js theme={null}
ui: {
  home: {
    sections: [
      { type: "sign-in" },
      { type: "notifications" },
      { type: "recently-viewed" },
      { type: "saved-from-cart" },
      { type: "saved-items" },
      { type: "lists" },
      { type: "content-block", hidden: true },
      {
        type: "mini-menu",
        hidden: true,
        items: [
          {
            title: "t:drawer.home.miniMenu.shipping",
            url: "/policies/shipping-policy",
          },
          {
            title: "t:drawer.home.miniMenu.returns",
            url: "/policies/refund-policy",
          },
          { title: "t:drawer.home.miniMenu.contactUs", url: "/pages/contact" },
        ],
      },
    ],
  },
}
```

The `mini-menu` section ships hidden with three placeholder links. Set `hidden: false` and replace `items` with your own links to use it.

The `content-block` section ships hidden and empty. Set `hidden: false` and give it a `title`, `body`, `image` or `link` to use it — and optionally a [`visibleTo`](#content-block) rule so only some shoppers see it.

An item's `title` may be either literal text or a translation key prefixed with `t:`, which is resolved against the shopper's language. Four common titles are translated into every [supported language](https://swish.app/docs/guides/customize/translations.md):

| `title` | English |
| - | - |
| `t:drawer.home.miniMenu.contactUs` | Contact Us |
| `t:drawer.home.miniMenu.shipping` | Shipping |
| `t:drawer.home.miniMenu.returns` | Returns |
| `t:drawer.home.miniMenu.faqs` | FAQs |

Any other `title` renders verbatim in every language. To translate your own, add the key to `translations` — see [Translations](https://swish.app/docs/guides/customize/translations.md).

## Section types

| Section type | Description |
| - | - |
| `sign-in` | Sign-in callout for guest visitors. Takes an `options.message` - see below. |
| `notifications` | "Since last visit" notification callout. |
| `recently-viewed` | Recently viewed products slider. |
| `saved-from-cart` | Items saved from the cart. |
| `saved-items` | The main saved items preview. |
| `lists` | Customer lists section. |
| `mini-menu` | Quick links menu. |
| `content-block` | Custom content block with title, body, image, and link. Can be targeted at some shoppers - see below. |
| `featured-collection` | Products from a specific collection. |

## sign-in

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

The [Saves](https://swish.app/docs/guides/customize/views/saves.md) and [Lists](https://swish.app/docs/guides/customize/views/lists.md) views carry the same section with their own `message`, so each view can make a different case for signing in.

## content-block

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

A block with neither text nor an image renders nothing.

### Targeting a block at some shoppers

`visibleTo` narrows who an enabled block reaches. Omit it and the block shows to everyone.

| Option | Type | Default | Description |
| - | - | - | - |
| `audience` | `string` | `"all"` | `"all"`, `"signed-in"` or `"signed-out"`. |
| `customerTags` | `string[]` | `[]` | Shopify customer tags. Matches **any** one of them, case-insensitively. Empty means no tag filter. |

```js theme={null}
{
  type: "content-block",
  title: "Early access",
  body: "Your VIP preview starts now.",
  visibleTo: { customerTags: ["VIP"] },
}
```

Both options apply together, and only customers have tags — so a `customerTags` list also means signed in, and pairing it with `audience: "signed-out"` shows the block to nobody.

Tags come from `context.customer.tags`. On Shopify themes the app embed supplies them; headless stores pass them themselves — see [Configuration](https://swish.app/docs/references/sdk/configuration.md).

Home ships one content block and you can add up to **three**. In the customiser, **Views → Home** has an **Add content block** button under the section list, a delete control on each block, and a drag grip on every row so you can put a block anywhere among the other sections. The button goes disabled at three.

The [Saves](https://swish.app/docs/guides/customize/views/saves.md#content-block) and [Lists](https://swish.app/docs/guides/customize/views/lists.md#content-block) views carry the same section, with their own blocks and their own cap of three. Everything on this page — the options, the targeting rules, the stacking — applies there identically.

Blocks **stack**: a shopper matching several sees all of them, in the order the sections are listed. `hidden: true` still switches a block off for everyone regardless of `visibleTo`.

> [!NOTE]
>
> Adding and deleting blocks is done in the customiser. The setup assistant can
> edit a block you already have — including its `visibleTo` rule — but can't
> create or remove one.

The customiser preview applies `visibleTo` too, so a block aimed at shoppers the preview isn't won't appear there. It stays in the **Sections** list, which is where you edit it.

## Examples

### Reorder sections and add a content block

```js theme={null}
ui: {
  home: {
    sections: [
      { type: "sign-in" },
      { type: "saved-items" },
      {
        type: "content-block",
        title: "Holiday sale",
        body: "Up to 50% off select items.",
        link: { url: "/collections/sale", target: "_self" },
      },
      { type: "lists" },
      { type: "recently-viewed" },
      {
        type: "mini-menu",
        items: [
          { title: "Shipping", url: "/policies/shipping-policy" },
          { title: "Returns", url: "/policies/refund-policy" },
        ],
      },
    ],
  },
}
```

### Add a featured collection

```js theme={null}
{
  type: "featured-collection",
  handle: "best-sellers",
}
```

The `handle` property is the Shopify collection handle. The section displays products from that collection in a horizontal slider.

## Further reading

* [Views overview](https://swish.app/docs/guides/customize/views/overview.md) for how sections work
* [Drawer](https://swish.app/docs/guides/customize/views/drawer.md) to configure the drawer header and footer


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