Home

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

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

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

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.

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

{
  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. 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 and Lists 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.

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

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

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

Get started

Features

Customize

Headless

AI tools

Section types

content-block

Targeting a block at some shoppers

Examples

Reorder sections and add a content block

Add a featured collection

Further reading

​Section types

​sign-in

​content-block

​Targeting a block at some shoppers

​Examples

​Reorder sections and add a content block

​Add a featured collection

​Further reading

Section types

sign-in

content-block

Targeting a block at some shoppers

Examples

Reorder sections and add a content block

Add a featured collection

Further reading