Mini Cart List
Renders CMS product cards for only the line(s) from the most recent add to cart — for post-add mini cart overlays.
Last updated
How to use
Build a mini cart Overlay — the post-add overlay that shows only what a customer just added.
Place this component inside that overlay.
Insert your Products CMS collection from the
+icon on the top left of Framer's canvas. Place the collection on the canvas, outside any pages/variants (it should be on the root-level of the layer's panel). Important: Remove any pagination or filters from the list.If you want a different card design on mobile vs. desktop, set
Statesto how many designs you need (1–4) and connect aCollection Listper tier — each list must contain exactly one product card design. Then overrideDisplayfor each of Framer's breakpoints so the right tier shows at each screen size.Configure
Layout— wrap, gap, columns, min/max width, row gap, padding, background, and radius.On your Purchase Button or Quick Add Button, set
On Clickto Trigger Mini Cart Event, then in Framer's Interactions panel connect that event to open this overlay.Build the card itself with Cart Item Data, Remove Item Button, quantity controls, and any other line-level components.
What shows: the latest add, not the whole cart
Mini Cart List repeats your card for whatever the customer just added — typically a single item, but when one add covers several lines at once (a Purchase Button with cross-sells selected, or a Recipe adding several items), every one of those lines shows here.
Until the customer adds something in the current session, it renders nothing at all — there's no "last add" to show yet. It also doesn't persist across a full page reload; it reflects only the most recent add made during this visit.
One collection, one card
The connected Collection List must contain exactly one product card. Anything that needs a line's data — Cart Item Data, Remove Item Button, quantity controls — has to live inside that card, since it reads its line from context.
Mini Cart List vs. Cart List
Both use the same CMS card pattern, but they're built for different places in the flow.
| Shows | Where it goes |
|---|---|---|
Mini Cart List | Only the line(s) from the most recent add | A post-add Mini Cart overlay |
Cart List | Every line currently in the cart | The full Cart Overlay or cart page |
If your mini cart is showing nothing, confirm the customer has added something this session, and that the overlay wired to the Purchase Button's Mini Cart event actually contains this component (not Cart List).