Shopify Cart Drawer vs. Cart Page: Which One Converts Better?
A cart drawer keeps shoppers on the product page and a cart page gives them room to review. Here is how to pick between them on Shopify, what the research says, and what to test.
Key Signal
70.22% abandon
The posts in this archive are written to help Shopify teams identify what is weakening buying momentum, what is suppressing AOV, and what deserves action first.
Most Shopify themes let you choose how the cart appears: as a drawer that slides in over the page, as a full cart page, or as a small pop-up notification. Which one converts better depends on the store. A drawer usually suits stores where shoppers add one or two items and keep browsing. A cart page usually suits stores with bigger baskets, more line-item detail, or buyers who need to check quantities, notes, and delivery before they pay.
To choose, work out what shoppers need to confirm when they add to cart, and pick the format that lets them confirm it fastest.
Quick answer
| Store situation | Usually the better default |
|---|---|
| Low AOV, impulse or gift products, one to two items per order | Cart drawer |
| Shoppers who browse several products before buying | Cart drawer, with a clear "view cart" link |
| Large baskets, bulk quantities, or B2B reorders | Cart page |
| Products that need notes, engraving, or delivery dates | Cart page, or a drawer that is tested carefully |
| Heavy reliance on discount codes or cart attributes | Cart page, with room for codes and notes |
| You do not know yet | Pick the theme default and A/B test the other option |
Either format can win. A cart usually loses because of what's in it: a hidden total, a buried checkout button, or modules that compete with checkout.
How Shopify themes handle cart type
In Shopify's theme settings, under Cart, the help center says the cart "can be displayed as a drawer, a page, or a pop-up notification." Shopify's own tip is direct about the trade-off: to keep the customer on the product page, use the drawer or pop-up notification.
Drawer mode adds a couple of options that the page mode lacks, such as a collection to show when the cart is empty and a separate color scheme. Settings like showing the vendor and enabling cart notes are available too.
Shopify's Horizon theme family, ten free themes built on theme blocks and released in May 2025, lists "Slide-out cart" and "Cart notes" among its features. If you migrated to Horizon this year, check which cart type your preset defaults to. Plenty of stores changed cart behavior during a theme migration without deciding to.
What the research says about carts
Baymard Institute's running average of documented cart abandonment studies sits at 70.22%, based on 50 studies (last updated September 2025). Its survey of reasons is more useful than the headline number. Among shoppers who abandoned for a reason other than "just browsing":
| Reason for abandoning | Share |
|---|---|
| Extra costs too high (shipping, tax, fees) | 40% |
| Delivery was too slow | 20% |
| Didn't trust the site with card details | 19% |
| Site wanted me to create an account | 18% |
| Checkout too long or complicated | 17% |
Each of these depends on what the cart shows, whatever its format. A drawer that hides shipping until checkout will lose people for the same reason a cart page would.
Baymard's research on add-to-cart feedback adds one more relevant finding: an overlay confirming the add is effective as long as it gives enough detail about what was added. Where the next step was unclear, test participants wasted time. That is the main risk with drawers. The shopper sees the drawer open, isn't sure whether to keep shopping or check out, and closes it.
When a cart drawer tends to win
A drawer keeps momentum. The shopper adds a product, sees the confirmation, and either checks out or closes the drawer and keeps browsing, all without a page load.
That works well when:
- Most orders contain one or two items.
- Shoppers come from paid social and are deciding quickly on mobile.
- The cart contents are simple: no engraving text, no delivery date picker, no long notes.
- You want to show one relevant add-on or a free-shipping progress bar at the moment of add-to-cart.
The agency-reported tests we found lean this way. GemPages summarized a three-way test that the agency Fuel Made ran for Live Bearded, where a slide-out cart with icons and trust badges beat the original cart page, with gains of up to 18% and up to 40% in checkout completion. The same write-up quotes the CEO saying an earlier slide cart left the brand "bearing a huge loss." The same brand saw a slide cart lose and then win, which suggests execution mattered more than format. The source gives no sample sizes, so treat it as directional.
When a cart page tends to win
A full page gives shoppers room to review. That helps when:
- Baskets have many line items or quantities above one.
- Buyers need to edit quantities, add order notes, or pick delivery details.
- Customers often apply discount codes before checking out.
- You sell to trade or wholesale buyers who reorder in bulk (see our Shopify B2B CRO guide).
There is also a technical reason. Shopify's dynamic checkout compatibility notes say accelerated checkout buttons don't support cart attributes. If your checkout relies on cart attributes, such as gift notes or delivery instructions captured in the cart, a standard checkout button on a cart page keeps them intact.
What either cart must do well
Whichever format you choose, check the cart against this list on a real phone:
| Check | Why it matters |
|---|---|
| Total cost is visible, including shipping expectations | Extra costs are the top abandonment reason in Baymard's data |
| Checkout button is the dominant action | Shoppers should never hunt for the next step |
| "Keep shopping" is available but secondary | Browsers need an exit that doesn't fight checkout |
| One add-on offer at most, relevant to the cart | Recommendation stacks push the checkout button below the fold |
| Quantity and remove controls work with a thumb | Small tap targets cause accidental edits |
| Delivery or shipping threshold message is accurate | A wrong "you've unlocked free shipping" banner costs trust |
Agency case studies suggest the contents matter as much as the container. Blend Commerce reported a 26.2% increase in revenue per visitor from adding express checkout to the cart. That's a single-store agency result, so yours will differ, but it suggests the cart's contents deserve as much testing as its format.
If you are adding a free-shipping bar, set the threshold carefully first. Our guide to choosing a Shopify free shipping threshold covers the margin math.
How to test drawer vs. page on Shopify
Switching cart type is a theme setting, which makes it a reasonable candidate for a theme A/B test. Shopify's native Rollouts feature can run experiments against a main-theme variant on eligible plans (we cover the details in how much traffic you need to A/B test on Shopify).
Before you test:
- Fix the obvious cart problems in both versions first. Testing a broken drawer against a broken page tells you nothing.
- Pick revenue per visitor or checkout completion as the primary metric. Add-to-cart rate will rise with a drawer simply because adding feels lighter.
- Segment results by device. A drawer that wins on mobile can lose on desktop.
- Run the test through at least two full weekly cycles, and avoid launching it in the weeks right before Black Friday.
FAQ: Shopify cart drawer vs. cart page
Is a cart drawer better than a cart page on Shopify?
Neither is better for every store. Drawers tend to suit simple, low-item baskets and mobile shoppers who keep browsing. Cart pages tend to suit larger baskets, bulk quantities, order notes, and discount-code-heavy checkouts. Test the alternative against your theme default.
How do I change my Shopify cart from a page to a drawer?
In the theme editor, open Theme settings, then Cart, and choose drawer, page, or pop-up notification. The exact labels vary by theme, and older or third-party themes may handle it differently.
Does a slide-out cart increase conversion?
It can. Agency-reported tests show slide carts winning on some stores and losing on others, depending on execution. The winning versions show total cost clearly, keep checkout dominant, and avoid crowding the drawer with offers.
Do accelerated checkout buttons work with cart attributes?
No. Shopify's dynamic checkout compatibility notes say accelerated checkout buttons don't support cart attributes. If you collect notes or attributes in the cart, test the full checkout path after any cart change, including on a real phone.
Should I put upsells in the cart drawer?
One relevant add-on can lift order value. Several stacked recommendation carousels usually push the checkout button out of view on mobile. Keep checkout visible without scrolling.
What is the average cart abandonment rate?
Baymard Institute's documented average is 70.22% across 50 studies. Extra costs such as shipping, taxes, and fees are the most cited reason, at 40% of shoppers who abandoned for a reason other than browsing.
The decision comes down to what shoppers check
If your shoppers mostly confirm one item and go, a drawer saves them a page load. If they need to review, edit, and apply codes, a page gives them the space. When you're unsure, fix the cart contents first, then test the format. A HiveSense audit flags cart-stage friction such as hidden costs, competing modules, and weak checkout prominence, so you know what to fix before testing. The sample report shows what the findings look like.
Sources: Shopify Help Center: theme settings, Shopify Changelog: Horizon themes, Shopify Theme Store: Horizon, Shopify Help Center: dynamic checkout compatibility, Baymard Institute: cart abandonment rate, Baymard Institute: added-to-cart confirmation, GemPages: Shopify A/B testing examples, Blend Commerce: Shopify A/B tests.
Next Step
Turn these patterns into a real storefront audit.
If you want a faster read on conversion blockers, AOV gaps, checkout friction, and the issues most likely to cost revenue, run a HiveSense audit on your store.