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 and 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.
Draft previews may not fully reflect live cart behavior — treat them as a close approximation, and do a final check after publishing.
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 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:
Your choice affects the editor preview only. It’s never saved to the cart, and it resets when you reload the editor.