What Is a Cart Drawer in Shopify? Examples, How to Enable It

Short answer: A cart drawer in Shopify is the panel that slides in from the edge of the screen when a shopper adds a product or taps the cart icon. It shows the items, the subtotal and a checkout button without loading a separate cart page. Most Shopify themes already include one: in Dawn and its free siblings the setting is Theme settings → Cart → Type → Drawer, and Horizon ships with the drawer already selected. The default drawer only displays the cart; a free-shipping bar, upsells, a free gift or a sticky cart need theme code or a cart drawer app.

Cart Drawer vs Mini Cart vs Cart Page vs Cart Notification Popup

Four different things get called "the cart" in Shopify, and they behave differently.

The line that matters is the page reload: a cart page loads a new page, the other three keep the shopper where they were. The finer difference between a dropdown mini cart and a full drawer is covered in slide cart vs mini cart, and the drawer-or-page decision in cart drawer vs cart page.

Dawn's popup notification is what a new Dawn store gets out of the box: a small "Item added to your cart" toast with "View cart", "Check out" and "Continue shopping" links. It cannot edit quantities and it disappears on its own, which is why many merchants searching "why isn't my cart drawer opening" simply have the popup selected.

How a Cart Drawer Works Under the Hood

1. Add to cart is a background request, not a page load

When a shopper clicks Add to cart, the theme's JavaScript submits the product form to Shopify's Ajax Cart API endpoint, POST /cart/add.js, instead of letting the browser navigate to /cart. Quantity changes go through /cart/change.js, and notes, attributes and discount codes through /cart/update.js (Ajax Cart API reference).

2. The drawer is a theme section that Shopify re-renders for you

In Dawn the drawer lives in sections/cart-drawer.liquid, which renders snippets/cart-drawer.liquid. In Horizon it is sections/cart-drawer-section.liquid, described in the source as the "SRA target for /cart endpoints". When Dawn's product-form.js posts to /cart/add.js it appends a sections parameter naming the sections it wants back, cart-drawer and cart-icon-bubble. Shopify returns fresh HTML for both in the same response, a feature called bundled section rendering, and the script swaps that HTML into the page before opening the drawer. One request can return up to five sections (Section Rendering API).

3. Opening, closing and accessibility are plain JavaScript and CSS

Dawn's cart-drawer.js adds an active class to the <cart-drawer> element to slide it in, locks page scrolling, traps keyboard focus inside the panel, and closes on the Escape key. That is why a theme drawer usually passes accessibility checks and a hastily coded one often does not.

Two consequences follow. A cart drawer app hooks the same /cart endpoints, so it can replace the theme drawer without touching checkout. And a custom add-to-cart button that posts to the cart without the theme's script updates the cart but never triggers the re-render, the classic "item is in the cart but the drawer did not open" bug.

Which Shopify Themes Have a Cart Drawer Built In (and Where the Setting Is)

Every free theme Shopify publishes ships a drawer, and most paid themes do too; the setting name and extras vary. Each row was checked against the theme's source, docs or Theme Store listing in September 2026.

How to enable the cart drawer in Dawn (and its free siblings)

1. In Shopify admin go to Online Store → Themes and click Customize on your live theme.
2. Open Theme settings in the editor's left panel and click Cart.
3. Under Type, switch from Popup notification (the default) to Drawer.
4. Optional: tick Cart note and Vendor, pick a Collection to show when the drawer is empty, and choose a colour scheme.
5. Click Save, then add a product on the storefront. The drawer should slide in from the right without a reload.

How to enable the cart drawer in Horizon

1. Follow the same route to Theme settings → Cart.
2. Check that Type is set to Drawer. A fresh Horizon install already is; older installs may have been switched to Page.
3. Tick "Add to cart" auto-opens drawer if you want the panel to open after every add. It is off by default; out of the box Horizon only animates the item into the cart icon.
4. Under Cart features, decide on Allow note to seller, Allow discounts in cart (on by default), Installments and Accelerated checkout buttons, and set the Empty cart button link.
5. Click Save and test on the storefront.

Older or heavily customised themes

If Theme settings → Cart shows no Type control, the theme predates the drawer or a developer removed it. Switch theme, have it coded in, or install an app that supplies its own; the three routes are compared in replacing the Shopify cart page with a slide cart drawer.

How to Edit the Cart Drawer

"How do I edit the cart drawer" has three answers.

• Theme settings (no code). Dawn exposes the cart note, vendor name, empty-cart collection and colour scheme; Horizon adds the discount field, installments and accelerated checkout buttons; paid themes add toggles such as Impulse's terms checkbox or Be Yours' cart recommendations.
• CSS and Liquid (some code). Width, fonts and button colours take a few lines of CSS; how to customise the Shopify cart drawer walks through it and cart drawer custom CSS has copy-paste snippets. New behaviour such as a shipping bar means editing snippets/cart-drawer.liquid and its JavaScript, and a theme update can overwrite the change.
• A cart drawer app (no code, more features). Apps replace or extend the theme drawer with a drag-and-drop editor, so the shipping bar, upsells and free gift become settings rather than code.

Why Isn't My Cart Drawer Opening?

Work through these in order. The first two fix most cases.

1. The cart type is Page or Popup notification. Open Theme settings → Cart → Type and pick Drawer. On Dawn-based themes the popup is the default.
2. Horizon's auto-open box is unticked. Horizon keeps the drawer closed after add to cart unless "Add to cart" auto-opens drawer is enabled. The cart icon still opens it.
3. Two drawers are fighting. With a cart drawer app installed, the theme drawer and the app drawer can both try to open, or neither does. Set the theme type to Page and let the app own the drawer, or remove the app. Also check Theme editor → App embeds: an embed toggled off during a theme change means no drawer at all.
4. A custom add-to-cart button skips the theme's script. Page-builder buttons (GemPages, PageFly and similar) and hand-coded buttons often post to /cart/add without the sections parameter, so the cart updates but nothing re-renders. Set the builder's add-to-cart action to "open cart drawer" instead of a redirect, or use the theme's product form.
5. The button is Buy it now, not Add to cart. Shopify's accelerated checkout buttons are designed so the customer "skip[s] the cart and go[es] to the Shopify Checkout" (Shopify Help Center). Some themes and apps also have a "skip cart" toggle; turn it off if you want the drawer.
6. Another app throws a JavaScript error. Open the browser console, add a product and look for red errors. Then duplicate the theme and switch off app embeds one at a time in the copy until the drawer works.

What the Default Theme Drawer Can and Cannot Do

The built-in drawer can:

• Show line items with image, variant, quantity controls and a remove button
• Show discounts that are already applied, the estimated total and a tax/shipping note
• Take an order note (Dawn, Horizon, Impulse) and a discount code (Horizon only)
• Show accelerated checkout buttons such as Shop Pay (Horizon, Impulse)
• Match your theme's colour scheme and fonts

The built-in drawer cannot (Dawn and its siblings, checked against the source):

• Show a free-shipping progress bar; the Dawn snippet and its locale file contain no such string. See how to add a free shipping bar to the cart drawer.
• Recommend products or run "frequently bought together" inside the panel. See how to add upsells to the Shopify cart drawer.
• Add a free gift automatically, run BOGO or quantity-break pricing, or let the shopper pick a gift
• Show trust badges, a countdown, or a sticky cart button that follows the shopper
• Report which offers in the drawer produced revenue

The default drawer is a display tool: it shows the cart, it does not grow it. That is fine if you only want to spare shoppers a page load. But the drawer is the last screen before checkout, which is why stores that want to lift order value upgrade it with theme code or one of the best Shopify cart drawer apps.

What a Good Cart Drawer Looks Like: Three Examples

Example 1: Apparel store, one hoodie in the cart

A bar at the top reads "Add $10.00 more for free shipping" with a progress line at 80%. Under the hoodie, one row titled "Goes well with" shows a $14 beanie with a one-tap Add button. Adding it fills the bar, the message flips to "You've unlocked free shipping", and the subtotal updates without a reload.

Example 2: Skincare store, a consumable product

Beside the serum is a toggle: "Subscribe and save 15%, delivered every 60 days." Below the items sit a collapsed "Have a discount code?" field and a note box, and three quiet badges under the checkout button: free returns, dermatologist tested, ships in 24 hours.

Example 3: Home goods, a $180 order

A tiered rewards bar reads "Free shipping unlocked. Spend $20 more for a free tote." Under the items, gift wrap ($5) and shipping protection ($2.90) are checkboxes rather than product cards, and a sticky cart button on the collection pages brought the shopper here in one tap.

The common thread: one incentive bar, one to three offers, a discount field, and a checkout button that is never covered.

Does a Cart Drawer Increase Conversion?

Honest answer: no public, controlled study isolates "drawer versus cart page" across many stores, and vendor case studies are not that. What is documented is why carts are abandoned. Baymard's running average is 70.22% of carts, and the top reason, cited by 40% of shoppers in its most recent survey, is extra costs such as shipping, tax and fees (Baymard Institute).

A drawer addresses that mechanically: it shows the running total and shipping threshold on the page the shopper is already on, so the surprise comes earlier and cheaper than at checkout, and it removes one page load on mobile. Whether that becomes more orders is something to measure, not assume: compare cart-to-checkout rate for two weeks before and after the switch, and read cart abandonment fixes for the drawer and do upsells hurt conversion rate before you load the panel with offers.

When a Cart Page Is Still the Better Choice

A drawer is not always the answer. Keep the full /cart page as the primary cart when:

• You sell B2B or wholesale. Buyers add dozens of lines, edit quantities in bulk and need per-line totals and company pricing; a narrow panel fights that.
• Products are configured, not picked. Custom furniture, engraved goods and bundles with many options carry line-item properties that need room to be reviewed before payment.
• Carts are long or high-ticket. Buyers comparing warranties, financing or delivery windows want a page they can read slowly, print or share.
• Your team cannot maintain two carts. Every offer in the drawer must exist on /cart too, or shoppers who click "View cart" see different prices.

Many stores run both: the drawer for quick adds, the page for the full review; /cart stays live in every theme even with the drawer on. The trade-offs are in cart drawer vs cart page.

How to Add or Upgrade a Cart Drawer

Three routes, from simplest to most technical.

1. Turn on the theme's drawer. Free, two minutes, using the Dawn or Horizon steps above. You get the display features and nothing else; do it first so you know the baseline.

2. Install a cart drawer app. This is how you get the shipping bar, upsells, free gift and sticky cart without editing Liquid. In Oxify Cart Drawer & Upsell those are four toggles in the drawer editor: Free shipping bar (single or multi-tier rewards), Cart upsells (AI or hand-picked, one to three cards), Free gift (auto-add or pick-a-gift with the discount applied automatically) and Sticky cart. Every plan includes every feature; pricing is by order volume from $9.99/month for up to 100 orders, with a 14-day free trial. The app is Built for Shopify and rated 4.9 from 37 reviews on its App Store listing. If you need enterprise-scale AI merchandising across the whole site, Rebuy is the stronger fit; the full comparison is in best Shopify cart drawer apps.

3. Custom code. Full control, but you need a developer and a theme update can overwrite the work. Sensible for one visual change; expensive for a shipping bar plus offers plus analytics.

A note on speed

The theme drawer adds almost nothing, because its HTML comes back in the same response as the add-to-cart call. An app adds its own script and usually one extra request for recommendations. Hold any app to the Built for Shopify bar: no more than a 10-point drop in Lighthouse performance, and admin pages within Core Web Vitals (LCP 2.5 s, CLS 0.1, INP 200 ms at p75). Measure before and after with this cart drawer speed test guide.

Frequently Asked Questions

The Bottom Line

A Shopify cart drawer is the slide-in panel that replaces the trip to /cart. Your theme almost certainly has one: switch Type to Drawer in Dawn, or tick auto-open in Horizon, and you are done in two minutes. The better question is what the drawer does for you: a default drawer shows the cart, while an upgraded one shows the shipping target, a relevant add-on and a discount field on the last screen before checkout.