Prerequisites

A connected storefront, a synced product with Product Data bindings, and a product Add to Cart component.

1. Choose the cart presentation

Insert the Cart Overlay design from Shopiframe or build a cart page from cart components. The documentation supports both presentations. All cart components share one live Shopiframe cart across the site.

2. Configure cart contents

Use Cart List to display images, titles, variant labels, prices, quantity controls, and remove actions. Configure its Empty component so the cart still provides a clear experience before a product is added.

3. Add feedback and totals

Add Cart Counter and Cart Subtotal where useful. Decide whether the counter counts lines or sums quantities. Subtotal is before shipping and taxes; label it accordingly rather than presenting it as a final order total.

4. Connect successful additions

On the product Add to Cart component, connect Open Cart Event to your cart overlay or another suitable Framer action. The event fires only after a successful add. If the success animation is enabled, a short delay lets that feedback remain visible.

5. Add and test checkout

Insert Checkout Button. It uses the live checkout URL for the current cart and disables when that URL is unavailable or the cart is empty. Test in Framer Preview; the editor canvas does not perform a live redirect.

Check your work

Add two variants, change quantity, remove a line, and empty the cart. Confirm counter and subtotal agree. In Preview, open Shopify Checkout and verify the intended items and variants before completing any purchase.

Troubleshooting

A disabled checkout button may be correct for an empty cart or absent live checkout URL. If Add to Cart targets the wrong product, inspect Product Data. A cart that does not open after adding needs its Open Cart Event wiring checked, not a replacement checkout link.

Resources

Cart components reference