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

# Drawer

> Configure the drawer header, footer, and navigation bar.

The drawer is the main Swish surface. It slides in from the right side of the screen and contains all views. Configure the drawer chrome under `ui.drawer` in your `SwishOptions`.

The drawer has two sections: a header and a footer navigation bar.

**Default configuration:**

```js theme={null}
ui: {
  drawer: {
    sections: [
      {
        type: "drawer-header",
        options: {
          title: "",
          logo: { url: "", altText: "" },
          headerStyle: "logo",
          guestGreeting: "",
          useCloseButton: false,
          accountButton: true,
          accountButtonUrl: "profile",
          notificationButton: true,
        },
      },
      {
        type: "drawer-footer",
        hidden: false,
        options: {
          displayType: "docked",
          showIcons: false,
          showText: true,
          fontScale: 1,
          items: [
            { id: "home", enabled: true, intent: "view:home" },
            { id: "saves", enabled: true, intent: "view:saves" },
            { id: "lists", enabled: false, intent: "view:lists" },
            { id: "notifications", enabled: true, intent: "view:notifications" },
            { id: "orders", enabled: true, intent: "view:orders" },
            { id: "profile", enabled: true, intent: "view:profile" },
          ],
        },
      },
    ],
  },
}
```

## Header

The `drawer-header` section controls the top bar of the drawer.

The header is always shown — `hidden` has no effect on it, and it is not exposed
as a toggle in the Swish admin. Use the options below to change what it carries.

| Option | Type | Default | Description |
| - | - | - | - |
| `title` | `string` | `""` | Title displayed in the drawer header. Left empty, the header shows your store's name. |
| `logo.url` | `string` | `""` | URL for a logo image in the drawer header. |
| `logo.altText` | `string` | `""` | Alt text for the logo image. |
| `headerStyle` | `"logo" \| "greeting"` | `"logo"` | What the header leads with: your logo, or a greeting. See [Greeting](#greeting). |
| `guestGreeting` | `string` | `""` | The greeting a guest sees when `headerStyle` is `"greeting"`. Left empty, guests see "Welcome", translated. |
| `useCloseButton` | `boolean` | `false` | Show a close button at the end of the header, after the notification and account buttons. |
| `accountButton` | `boolean` | `true` | Show the account button in the header. |
| `accountButtonUrl` | `string` | `"profile"` | Where the account button goes. See below. |
| `notificationButton` | `boolean` | `true` | Show the notification button in the header. |

A logo replaces the title. With neither set, the header shows your store's name — the one from **Settings → Store details** on Shopify, or `context.shopName` if you build your own context.

### Greeting

Set `headerStyle` to `"greeting"` to greet customers at the top of the drawer instead of repeating the logo from your store's header. In the Swish admin, it's **Views → Drawer → Header → Header style**.

* A signed-in customer sees **Hi, Sarah**, with the first name from their Shopify account.
* A guest sees `guestGreeting`, or **Welcome** when it's empty. A signed-in customer with no first name on their account sees the same.

The greeting replaces the logo, the title and your store's name, and uses the drawer's heading style. Reword either default per language with the `drawerHeader.greeting` and `drawerHeader.guestGreeting` [translations](https://swish.app/docs/guides/customize/translations.md#drawer-header). `guestGreeting` may itself be a `t:`-prefixed translation key.

### Account button destination

`accountButtonUrl` takes either a preset or a URL:

| Value | Where the button goes |
| - | - |
| `"profile"` | The Swish profile view, inside the drawer. The default. |
| `"shopify"` | Your store's own Shopify account page, resolved automatically — including its locale prefix, and the absolute URL Shopify uses under new customer accounts. |
| any other value | Used as a URL, exactly as typed. Relative (`/pages/my-account`) or absolute (`https://…`). |

Use this if you'd rather customers managed their account on your own pages than in Swish's profile view. Both URL options are a normal link, so a customer can open them in a new tab, and a signed-out customer is sent to sign in by whatever page they land on.

The setting has no effect when `accountButton` is `false`.

The drawer footer's **Profile** item and the **Account link** placement still open the Swish profile view. To take customers off it everywhere, turn those off too — see [Account](https://swish.app/docs/guides/features/account.md).

**Example - add a logo and close button:**

```js theme={null}
ui: {
  drawer: {
    sections: [
      {
        type: "drawer-header",
        options: {
          logo: { url: "/logo.svg", altText: "My Store" },
          useCloseButton: true,
        },
      },
      { type: "drawer-footer" },
    ],
  },
}
```

**Example - greet customers instead of showing a logo:**

```js theme={null}
ui: {
  drawer: {
    sections: [
      {
        type: "drawer-header",
        options: {
          headerStyle: "greeting",
          guestGreeting: "Welcome to My Store",
        },
      },
      { type: "drawer-footer" },
    ],
  },
}
```

## Footer navigation

The `drawer-footer` section controls the bottom navigation bar.

| Option | Type | Default | Description |
| - | - | - | - |
| `displayType` | `"floating" \| "docked"` | `"docked"` | Navigation bar style. `"docked"` sits at the bottom edge, `"floating"` hovers above content. |
| `showIcons` | `boolean` | `false` | Show icons alongside navigation labels. |
| `showText` | `boolean` | `true` | Show text labels in navigation items. |
| `fontScale` | `number` | `1` | Multiplier on the navigation label size, `0.8`-`2`. Labels only; icons are unaffected. |
| `items` | `FooterMenuItem[]` | see defaults | Navigation items. Each item has `id`, `enabled`, and `intent`. |

Override the default navigation items to control which views appear and in what order:

```js theme={null}
ui: {
  drawer: {
    sections: [
      { type: "drawer-header" },
      {
        type: "drawer-footer",
        options: {
          displayType: "floating",
          showIcons: true,
          showText: false,
          items: [
            { id: "home", enabled: true, intent: "view:home" },
            { id: "saves", enabled: true, intent: "view:saves" },
            { id: "notifications", enabled: true, intent: "view:notifications" },
            { id: "orders", enabled: true, intent: "view:orders" },
          ],
        },
      },
    ],
  },
}
```

## Drawer dimensions

Control the drawer panel size through [design tokens](https://swish.app/docs/guides/customize/appearance/design.md#drawer):

```js theme={null}
ui: {
  design: {
    drawer: {
      drawerWidth: 520,
      drawerMobileTopOffset: 60,
    },
  },
}
```

## Further reading

* [Home](https://swish.app/docs/guides/customize/views/home.md) for the default landing view
* [Header placement](https://swish.app/docs/guides/customize/placements/header.md) to configure the button that opens the drawer
* [Icons](https://swish.app/docs/guides/customize/appearance/icons.md) to customize navigation bar icons


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