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

# Previewing carts

> Preview your Aftersell Cart before publishing — in the editor canvas and on your live storefront theme.

You can preview a cart two ways: live in the editor as you build it, and on your storefront theme before it goes public.

## The editor canvas

The center of the cart editor is a live preview that renders the real cart. It shows **both cart states side by side** — a **Filled cart** card and an **Empty cart** card — so you can see both as you work.

* **Choose which state you're editing** with the **Filled / Empty** toggle in the sidebar, or by clicking the **title above** a card. Clicking *inside* a card doesn't switch state — it selects the block under your cursor. The active card is outlined, and the block you're editing gets its own highlight.
* **Zoom** with the zoom pill on the canvas itself (25%–200%): `+` and `−` step by 10%, and clicking the percentage resets to 75%. Ctrl/Cmd + scroll zooms around your cursor, plain scroll and dragging pan.
* The preview reflects your [design settings](/aftersell/cart/design-settings) and [custom CSS](/aftersell/cart/custom-css) live as you change them.

## Preview on your storefront

Use **Preview** on a cart to see it on a real theme in a new tab, without making it public:

* **Live carts** open your storefront directly — the live cart is already what shoppers see.
* **Draft carts** open a **theme preview**. You pick which theme to preview on (your main theme is the default), and Aftersell stages the draft cart on that theme just for your preview session, without touching your live cart. The app embed must be enabled on the theme you choose.

<Note>
  Draft previews may not fully reflect live cart behavior — treat them as a close approximation, and do a final check after publishing.
</Note>

Save your changes before previewing — the editor prompts you to save so the preview reflects your latest work.

## Empty vs. filled states

Both states are always available in the editor canvas (the two cards), so you can design and check the empty cart and the filled cart independently. On the storefront, shoppers see whichever state matches their cart.

## Sample data scenarios

The [Cart items block](/aftersell/cart/cart-items-block) settings panel has a **Preview** section with a **Sample data** picker, letting you switch the editor preview between line-item scenarios so you can check how each one looks without building a matching cart:

| Scenario              | What it shows                                                              |
| --------------------- | -------------------------------------------------------------------------- |
| **Standard product**  | A single product with a discount applied.                                  |
| **Long product name** | A product with a very long title, for checking text wrapping and overflow. |
| **Bundle**            | A bundle anchor line with its child items.                                 |
| **Subscription**      | A subscription line with its selling plan label.                           |
| **All item types**    | The long product name, subscription and bundle lines together in one cart. |

Your choice affects the editor preview only. It's never saved to the cart, and it resets when you reload the editor.