Skip to main content
A cart in Aftersell is a configurable cart-drawer experience. You design it in two states, lay it out across three sections, and fill those sections with blocks.

​
Cart states

Every cart has two independent layouts. You switch between them in the editor:
  • Filled cart: what shoppers see when the cart has items.
  • Empty cart: what shoppers see when the cart has no items.
Some blocks only belong in one state: Other blocks (Header, Banner, Rewards, Image, Custom code, and more) can live in either state. New carts start with Header + Empty cart in the empty state, and Header → Banner → Cart items → Summary → Checkout button in the filled state.
The empty cart state is the whole empty layout. The Empty cart block is one block inside that layout, usually the message and continue-shopping button. They sound alike, but the state can hold more than that one block.

​
Sections

Each state is divided into three sections: Header, Body, and Footer. Sections control where a block sits and how it scrolls:
  • Header: pinned to the top of the drawer; stays visible as the body scrolls.
  • Body: the scrollable middle. Blocks here move with the content. Locked block: Cart items.
  • Footer: pinned to the bottom of the drawer. Locked block: Checkout button.
When you add or move a block, its section decides its scrolling behavior. Not every block is available in every section. See How do blocks work?.

​
Blocks

A block is a configurable piece of the drawer (the product list, an upsell offer, a checkout button, and so on). You stack them in a section, reorder them, and style them. For how adding, limits, sub-blocks, and conditions work, see How do blocks work?.

​
Next steps