Shopping cart

The holding pen between browsing and paying: chosen items with quantities and a running total, none of it charged yet.

the basketwhere stuff sits before you paybagthe cart icon with the number on ittrolleyshoping cartadd to cart thingthe list of what I'm about to buy

See it

Live demo coming soon

What it is

The cart is the holding pen between browsing and paying: a list of line items (a variant plus a quantity plus a captured price) with a running subtotal and nothing charged yet. It lives against a session for guests and against the customer record once someone logs in, which is why your bag follows you from phone to laptop on some stores and vanishes on others.

Reach for a real cart whenever people buy more than one thing at a time. Single-product stores and high-ticket configurators often skip it and send 'buy now' straight into checkout, which removes a step and a place to bail out. Most stores land on a cart drawer so adding something never yanks the shopper off the page they were browsing.

Gotcha: a cart is a snapshot of intent, not a reservation. Stock sells out and prices change while items sit there, so recalculate totals, stock, and discounts on the server at checkout instead of trusting what the client has been holding. Decide loudly what happens when a line item goes out of stock, because the silent default is usually a confusing error on the payment step.

Ask AI for it

Build a cart service and a full /cart page for this store. Persist guest carts against an opaque cart token stored in an httpOnly cookie, and merge a guest cart into the account cart on login rather than replacing either. Support add, update quantity, and remove operations keyed by variant ID, and revalidate prices, discounts, and stock on the server before checkout instead of trusting the client's stored totals. Adding to cart must not reserve stock; leave reservations to checkout. Render line items with a 64px thumbnail, title, selected variant in muted text, a quantity stepper, a remove button, and a right-aligned line price, plus a subtotal with a note that shipping and taxes are calculated at checkout. Handle the empty state and the unavailable-item state explicitly (price changed, out of stock, variant retired), each with a clear inline message and a recovery action. Expose the same cart state through a shared hook or store so a cart drawer renders from it without a second source of truth.

You might have meant

cart drawercheckoutabandoned cart recoveryfree shipping threshold barproduct variants