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

# How do carts work?

> How an Aftersell Cart is structured: filled and empty states, Header/Body/Footer sections, and how blocks fit into each.

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:

* The [**Empty cart**](/aftersell/cart/empty-cart-block) block appears only in the **empty** state.
* [**Cart items**](/aftersell/cart/cart-items-block), [**Checkout button**](/aftersell/cart/checkout-button-block), [**Notes**](/aftersell/cart/notes-block), [**Express payments**](/aftersell/cart/express-payments-block), and [**Shipping protection**](/aftersell/cart/shipping-protection-block) appear only in the **filled** 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.

<Info>
  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.
</Info>

## 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?](/aftersell/cart/blocks-overview#blocks-available-in-each-section).

## 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?](/aftersell/cart/blocks-overview).

## Next steps

* [Create a cart](/aftersell/cart/creating-carts)
* [Preview a cart](/aftersell/cart/previewing-carts)
* [Manage multiple carts](/aftersell/cart/having-multiple-carts)