Lists

The lists view shows the customer’s custom lists. Default configuration:

ui: {
  lists: {
    sections: [
      { type: "sign-in" },
      { type: "content-block", hidden: true },
      {
        type: "lists-grid",
        options: { displayType: "slider" },
      },
    ],
  },
}

Sections:

Section	Description
`sign-in`	Sign-in callout for guest visitors. Takes an `options.message` — see below.
`content-block`	Custom content block with title, body, image, and link. Can be targeted at some shoppers — see below.
`lists-grid`	The customer’s lists. Always shown — this section has no `hidden` option.

The sign-in callout for signed-out shoppers. It renders above the lists - a guest’s own lists stay visible below it. Set hidden: true to remove it.

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.

Each view that carries this section has its own message, so Lists, Saves and Home can each make a different case for signing in.

content-block

A custom block of your own copy, image and link, above or below the lists. Lists ships one, switched off, seeded above the grid; you can add up to three and drag each anywhere in the order.

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 Home for the targeting rules — they are identical here.

This is the same section Home carries, so its documentation covers the options in full rather than being repeated here. In the customiser, Views → Lists has the Add content block button, a delete control on each block, and a drag grip on every row.

lists-grid

Option	Type	Default	Description
`displayType`	`"list" \| "slider"`	`"slider"`	Display lists as a vertical list or slider.

This section has no hidden option: the lists are the point of the view, so it is always shown.

Example

Put a block below the lists, aimed at shoppers who are signed out:

ui: {
  lists: {
    sections: [
      { type: "sign-in" },
      { type: "lists-grid", options: { displayType: "list" } },
      {
        type: "content-block",
        title: "Lists travel with you",
        body: "Create an account and pick up where you left off.",
        link: { url: "/account/register" },
        visibleTo: { audience: "signed-out" },
      },
    ],
  },
}

Get started

Features

Customize

Headless

AI tools

content-block

lists-grid

Example

Further reading

​sign-in

​content-block

​lists-grid

​Example

​Further reading

sign-in

content-block

lists-grid

Example

Further reading