Cart List
Renders one of your CMS product cards per cart line, filtered to what's actually in the cart.
Last updated
How to use
Place this component inside the cart's Populated design (the state rendered by Cart State when the cart has items).
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.Build the card itself with Cart Item Data, Remove Item Button, quantity controls, and any other line-level components.
How lines are matched to your CMS
Cart List reads the live cart and matches each line to the corresponding item in your connected Collection List by product, then repeats your card design once per matched line — filtered to what's actually in the cart. Matched lines are automatically shared with everything inside the card, which is how Cart Item Data, Remove Item Button, and cart cross-sell toggles automatically know which line they belong to.
The list is reactive: adding, removing, or changing quantity anywhere on the page updates it immediately — you may see a line appear a moment before Shopify finishes saving, which is expected.
One collection, one card
The connected Collection List must contain exactly one product card — don't add filters or pagination to it. Anything that needs a line's data (Cart Item Data, Remove Item Button, quantity controls, cross-sell toggles) has to live inside that card as a descendant, since it reads the line from its surrounding card rather than from its own controls.
If a product isn't showing up here even though it's in the cart, the most common cause is that it isn't in the CMS collection connected to this list.
Cart List vs. Mini Cart List
Both repeat the same CMS card pattern, but they show different lines and belong in different places.
Component | Shows | Where it goes |
|---|---|---|
Cart List | Every line currently in the cart | Your cart overlay or cart page |
Mini Cart List | Only the line(s) from the most recent add | A post-add mini cart overlay |
If you only want to confirm what a customer just added, use Mini Cart List in a mini cart overlay instead of this component.