Skip to main content
The Header block is the pinned top area of the cart drawer, giving the drawer a clear title and an obvious way to close it. You control its layout by assigning Title, Logo, and Close button to the left and right sections. Because the Header is pinned to the top, it stays visible while the rest of the cart scrolls.
Header block with cart title, item count, and close control at the top of the drawer

​
Behavior

  • The Header is pinned to the top of the drawer and doesn’t scroll with the cart body.
  • The close control is always available and dismisses the drawer.

​
Settings

The title is translatable. If your title resolves to empty (for example, an unset translation), the cart falls back to showing Cart so the header is never blank. Elements appear in the order you select them, left to right, and each element can be assigned to only one section at a time.

​
Placement and limits

  • Region: top only.
  • Maximum: 1 per cart state.
  • State: filled and empty cart (each state has its own Header instance).
  • Added to new carts by default in both states. Not locked, so you can remove or hide it with the eye toggle.

​
Custom template

Supports a custom template from its Code tab, which replaces this block’s built-in markup with your JSX. These are the props it receives.
logoUrl is the one prop that has no built-in equivalent: the Header’s uploaded image is only ever rendered by a custom template. If a merchant set a logo and it isn’t showing, this is why.
If you don’t wire onClose to something, shoppers can still close the drawer by clicking the overlay or pressing Escape, but your header will have no close button. Always include one.

​
Design

Style this block with its Design section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.

​
Text

The Text section in Design lets you control the typography of the cart title. Bold and text color are set in the Rich Text Editor above (in the Settings tab), not here. What are design settings? Learn more here: Design settings.