Cart
Cart is where purchase intent crystallizes. Most stores treat it as a holding area. It isn't. It's the last structured opportunity to reinforce the purchase decision before checkout.
Cart Drawer vs. Cart Page
Cart Drawer
Right for most stores. Opens without leaving the current page, visitor can keep browsing. Faster, less disruptive, works well for orders with 1–3 items.
Cart Page
Right when order complexity is high, bundles, subscriptions, multi-SKU orders where the visitor needs to review everything at once before committing.
Never use both. Pick one and optimize it. A drawer that redirects to a cart page on checkout is a friction point, not a feature.
Cart Item Display
What must be visible without scrolling when the cart drawer is open:
- Product image, large enough to recognize, links back to the PDP
- Variant details, color and size must be readable, not a tiny secondary line of text
- Quantity stepper, easy to tap, not so small it causes mis-taps
- Line item price, updates when quantity changes
- Remove button, accessible but not accidentally tappable
Free Shipping Progress Bar
- Position: top of the cart drawer, above the item list. First thing the visitor sees when the cart opens.
- Copy is dynamic: "Add $12 more for free shipping" → "You've unlocked free shipping." Two states. Both visible at the right moment.
- If your store doesn't offer free shipping at a threshold, skip this. A static "Free shipping on all orders" line is fine if it's true, but it doesn't create urgency.
Upsells in Cart
One rule
Maximum two upsell products in the cart. More than that and completion rate drops. One well-chosen product, relevant to what's already in the cart, outperforms a grid of bestsellers every time.
- Placement: above the checkout CTA, not below it. Below the CTA is a dead zone, most visitors never see it.
- Frame it as a recommendation: "Customers who bought this also added..." not "Before you go..."
- Only show products that are genuinely complementary. Surfacing random bestsellers here trains visitors to ignore the upsell widget.
- Quick-add from the cart: one tap to add, no drawer required. The cart itself is the drawer.
Checkout CTA
- Label: "Proceed to checkout" or "Go to checkout", not just "Checkout." The extra word explains what happens next and reduces hesitation.
- Size: full width in the drawer. Never a small button at the bottom of a long scrollable list.
- Sticky: the CTA must be visible without scrolling when the cart is open. If a visitor has to scroll down to find the checkout button, that's friction.
- Visual weight: the checkout CTA should be the most prominent element in the cart. Nothing else should compete with it visually.
Trust at Point of Purchase
Directly above or below the checkout CTA, one line of copy and one row of icons. No more.
- One trust line: your guarantee, return policy, or a specific reassurance that addresses the main hesitation in your category. "Free returns within 30 days." "Secure checkout." "Shipped same day."
- Payment icons: Visa, Mastercard, PayPal, Apple Pay, Afterpay or Klarna if relevant. One row, standard icons, nothing custom.
- The cart is not the place for a full trust section. One line. One row of icons. Move on.
Edge Cases
- Empty cart state: never show a blank screen with "Your cart is empty." Show 4–6 bestselling product cards and a clear path back to browsing.
- Low inventory nudge: if a product in the cart has 5 or fewer units left, show it inline. "Only 3 left" above the quantity stepper, not a countdown timer, a fact.
- Sold out in cart: if a product sells out between add-to-cart and checkout, show a clear warning with a remove button and a link to similar products. Never let it silently block checkout.
What good looks like
The cart opens without leaving the page. Free shipping progress is visible immediately. The visitor can see exactly what they're buying, product, variant, quantity, price, without scrolling. One well-placed upsell. The checkout CTA is always visible and unmissable. One line of trust copy, one row of payment icons. Nothing between the decision and the click.
This is 1 area. The full audit covers 11.
Which of your leaks is actually costing the most?
A checklist shows you what to look for. It cannot tell you which leak is bleeding the most revenue on your store, or in what order to fix. The Store Autopsy ranks the 20 to 70 leaks actually costing you money, top 3 surfaced, delivered in about 2 weeks. $800, credited in full toward the fix. Proof, not opinions.
Get the Store Autopsy →
See the full audit