Cart Drawer

Understanding Cart Drawer

The cart drawer replaced the classic "go to cart page" pattern in most modern Shopify themes because it preserves context. The shopper sees their new addition, can continue browsing, and can review the cart state without losing the page they were on. For collection and category pages especially, this reduces friction on multi-item purchases — a major driver of AOV.

The drawer is also high-value real estate for add-on revenue. Well-designed drawers surface one or two relevant upsells (cross-sell products, warranty, gift wrap), shipping-threshold progress bars ("add $12 more for free shipping"), and limited-time add-to-cart incentives. These patterns work because the shopper is in a confirmed buying mindset — they have committed to one item and are evaluating next steps — which is the highest-converting moment in the funnel.

Not every upsell belongs in the drawer. Irrelevant or heavy-handed recommendations distract from checkout and measurably lower checkout-start rate. The rule of thumb is that upsells should be obviously related to the item being added and priced at less than 30% of the trigger product. Large-ticket cross-sells belong on a dedicated post-add-to-cart page or on the cart-drawer expansion; they don't work as an inline tile beside the checkout button.

Mobile cart drawers deserve dedicated design. On mobile, a drawer that takes 90% of the viewport height is effectively a full-screen takeover; the checkout CTA must stay sticky at the bottom, and the close affordance must be unmistakable. Drawers that bury checkout below the fold on mobile are a consistent source of checkout-start drops in session recordings.