Cart Drawer UX
The slide-in mini-cart is one of the highest-leverage surfaces in your store — and one of the most under-invested. Here's what good looks like, with numbers.
Cart Drawer UX
The mini-cart panel that slides in after add-to-cart, deciding whether a shopper keeps browsing or proceeds to checkout.
Cart drawer UX is the design of the side-panel mini-cart that appears the moment a shopper taps add-to-cart. It replaces the older pattern of navigating to a dedicated /cart page, and it now handles three jobs at once: confirming the item was added, summarising the order, and routing the shopper toward checkout or back into browsing.
On mobile — where 70-80% of store traffic now lives — the drawer is often the single most-viewed surface after the product page. Small choices about button hierarchy, shipping messaging, and upsell placement compound into meaningful revenue swings, which is why drawer UX sits squarely inside broader cart optimization work.
Most Shopify themes ship with a default drawer that is functional but generic — a list of line items, a subtotal, and a checkout button. Stores that treat the drawer as a styling concern leave 5-15% of cart-to-checkout conversion on the table compared to stores that treat it as a dedicated conversion surface.
The drawer is a decision point, not a receipt. Every element should answer one of two shopper questions: 'is this the right order?' and 'what happens if I tap checkout?' Anything else — long product descriptions, secondary nav, social proof carousels — is noise that pushes the primary CTA below the fold.
Drawer Revenue Lift = ATC Sessions × (Drawer→Checkout Rate_new − Drawer→Checkout Rate_old) × AOV
ATC Sessions
Add-to-cart sessions
Sessions per month that reach the drawer at least once.
Drawer→Checkout Rate
Drawer-to-checkout rate
Share of drawer views that click through to the checkout page.
AOV
Average order value
Average revenue per completed order in the same period.
A Shopify apparel store redesigns its drawer — clearer free-shipping bar, single primary CTA, sticky checkout button on mobile.
ATC sessions / month: 120,000
Old drawer→checkout rate: 42%
New drawer→checkout rate: 49%
AOV: €68
→ €571,200 additional checkout-initiated revenue per month (before checkout drop-off).
A 7-point lift on a single surface compounds quickly at scale. Even at a 65% checkout completion rate downstream, that's roughly €370k incremental monthly revenue from drawer changes alone.
The patterns that consistently win share a few traits: one primary CTA (not a tie between 'View Cart' and 'Checkout'), a visible free-shipping progress bar when relevant, and upsells that appear below the line items rather than above the checkout button. Anything that pushes the checkout CTA off the first mobile screen is the first thing to fix.
Drawer-to-checkout click-through rate by vertical (mobile)
| Vertical | Bottom quartile | Median | Top quartile |
|---|---|---|---|
| Apparel & accessories | 35% | 44% | 55% |
| Beauty & skincare | 40% | 50% | 62% |
| Home & furniture | 28% | 38% | 48% |
| Food & supplements | 45% | 55% | 66% |
| Electronics & accessories | 30% | 40% | 51% |
The mobile-specific failure mode worth flagging: drawers that look fine on desktop QA but break on iOS Safari with the address bar showing. The checkout button ends up half-hidden behind the bottom toolbar, and tap-target accuracy drops. Always test the drawer on a real device with the URL bar visible, not just Chrome DevTools.
Cart drawer UX questions
For stores where multi-item baskets are common (apparel, beauty, food), the drawer wins because it preserves browsing context. For high-consideration single-item purchases (furniture, electronics over €500), a dedicated cart page can convert better because it gives space for trust signals and finance options.
Median is around 44-50% on mobile depending on vertical. If you're below 35%, the drawer itself is the bottleneck — usually a hidden CTA, unclear pricing, or too many competing actions. Above 60% suggests strong intent capture.
Only when they're placed above the checkout CTA or auto-rotate aggressively. A single relevant upsell below the line items (matching colour, refill, complementary SKU) typically lifts AOV 3-8% without measurable damage to checkout click-through.
Yes, if you offer free shipping above a threshold and the shopper is within 30% of hitting it. Showing 'Add €12 for free shipping' is one of the most reliable AOV levers in cart optimization. Hide it entirely once they qualify — don't celebrate, just confirm.
The checkout CTA should sit above the fold on a 375px-wide viewport with three line items in the cart. If it doesn't, you have too much chrome (logo, close button, headers) or upsells in the wrong position.
Yes for returning-customer-heavy stores — Shop Pay and Apple Pay buttons in the drawer typically lift mobile checkout completion 5-10%. Place them below the main checkout CTA, not above, so first-time shoppers aren't confused by unfamiliar wallets.
Run drawer experiments as A/B tests segmented by device — mobile and desktop behave differently enough that pooled results hide the real picture. Most stores see the biggest wins on mobile, so power your test for the mobile segment specifically.
Show shipping cost or a free-shipping threshold; defer tax to checkout unless your market legally requires VAT-inclusive pricing display (most of the EU). Surprise costs at checkout are a top-three abandonment cause, but cluttering the drawer with line items also reduces clarity.
Two equally-weighted CTAs — 'View Cart' next to 'Checkout' in the same visual hierarchy. The 'View Cart' link exists because the dedicated cart page existed first; on a modern drawer it just dilutes the primary action. Demote it to a small text link or remove it entirely.
The drawer is the first conversion gate after add-to-cart, so it sets the ceiling for everything downstream — checkout completion, payment-method conversion, post-purchase upsell. Cart optimization that skips the drawer and jumps straight to checkout fixes is usually leaving the easier wins on the table.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.