Cart State
Renders your Populated cart design when the cart has items and your Empty design when it doesn't.
Last updated
How to use
Place this component as the root of your cart overlay or cart page.
Set
Statesto how many responsive tiers you need (1–4) and connect aPopulatedandEmptydesign per tier. Then overrideDisplayfor each of Framer's breakpoints so the right tier shows at each screen size.
Populated vs. Empty
Cart State is a switcher, not a modal — pair it with Cart Trigger / Cart Close Button for actual open/close behavior.
State | Renders when |
|---|---|
| The cart has at least one line |
| The cart has no lines |
The switch is reactive, so it updates instantly as lines are added or removed — no page reload needed.
Designing in the Framer canvas
On the Framer canvas, Cart State always shows the Empty design so you can design it directly — the live site still switches automatically based on the real cart. If no Empty design is connected, the canvas shows a build hint instead.