> ## Documentation Index > Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt > Use this file to discover all available pages before exploring further. # Header block > The Aftersell Cart Header block: the title, item count, logo, and close control pinned to the top of the drawer. > 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 | Setting | What it controls | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | | **Left** | Which elements render in the left section (`Title`, `Logo`, `Close button`) and in what order. | `Title` | | **Right** | Which elements render in the right section (`Title`, `Logo`, `Close button`) and in what order. | `Close button` | | **Title** | Rich-text heading for the cart. Supports the `{{cart_item_count}}` and `{{total_price}}` tokens. | `Cart • {{cart_item_count}}` | | **Image** | An image exposed to a custom template as `props.logoUrl`. This field only appears while a custom template is active, and the built-in header never renders it. Supported formats: WebP, JPEG, PNG, GIF, SVG. | None | 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](/aftersell/cart/custom-templates) 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. | Prop | Type | What it's for | | -------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | `title` | `string` | The header title as sanitized HTML, with `{{cart_item_count}}` and `{{total_price}}` already resolved. | | `logoUrl` | `string \| null` | The uploaded header image. `null` when the merchant hasn't set one. | | `leftSection` | `('title' \| 'logo' \| 'close_button')[]` | Items selected for the left section, in render order. | | `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Items selected for the right section, in render order. | | `itemCount` | `number` | Items in the cart, as the shopper sees it. | | `onClose` | `() => void` | Closes the drawer. Wire it to your close control. | | `isLoading` | `boolean` | Always `false` here: the block renders its built-in skeleton during load and only calls your template once the cart is ready. | 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. | Setting | What it controls | Default | | ------------------ | ---------------------------- | ------------------- | | **Font** | Font family for the title. | Inherits from theme | | **Size** | Font size. | `18px` | | **Line height** | Line height multiplier. | `1.3` | | **Letter spacing** | Tracking between characters. | Normal | What are design settings? Learn more here: [Design settings](/aftersell/cart/design-settings).