Cart and checkout
Use Cart Overlay as a ready-made starting point, or assemble a custom cart with the individual cart components.
Build the cart
A basic cart needs:
Cart List
Cart Subtotal
Checkout Button
Common optional additions:
Cart Counter in the site header or cart trigger
Promotion Progress Bar for a spend-based incentive
A custom empty-cart component connected to Cart List
Cart components share one live cart and do not need Product Data.
Cart items and empty state
Use Cart List to render cart lines, quantity controls, and removal actions. Connect a custom empty component when the cart needs a designed empty state.
Cart count and subtotal
Place Cart Counter in the header or cart trigger. Use Cart Subtotal inside the cart. Shipping, taxes, and checkout discounts are not included in this subtotal.
Promotions
Use Promotion Progress Bar for a spend-based message such as free shipping. Configure the threshold in the active market currency.
Shopify Checkout
Use Checkout Button to open the current Shopify checkout URL. Test this action in Preview and on the published site; it does not run from the Framer canvas.