Drawer

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:

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" },
          ],
        },
      },
    ],
  },
}

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.
`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. 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. Example - add a logo and close button:

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:

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

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:

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:

ui: {
  design: {
    drawer: {
      drawerWidth: 520,
      drawerMobileTopOffset: 60,
    },
  },
}

Get started

Features

Customize

Headless

AI tools

Header

Greeting

Account button destination

Footer navigation

Drawer dimensions

Further reading

​Header

​Greeting

​Account button destination

​Footer navigation

​Drawer dimensions

​Further reading

Header

Greeting

Account button destination

Footer navigation

Drawer dimensions

Further reading