How to Edit & Customize Your Shopify Cart Drawer (2026)

Your default Shopify cart drawer is leaving money on the table — no upsells, no free shipping bar, no brand colors that actually match your store. The good news: you can fix all of that in under 10 minutes, and you don't need a developer to do it.

Quick answer: To edit the cart drawer in Shopify, go to Online Store → Themes → Customize, click the gear icon (Theme settings), open Cart, and set Cart type to Drawer — the other options vary by theme (in Dawn they're Page and Notification; in Horizon, just Page). Colors and fonts live in the same panel, and that's everything the free theme editor can do. If you want upsells, a free shipping bar, or free gifts, a cart drawer app is the best route for most stores (10 minutes, no code); developers who need pixel-perfect control can edit the theme's cart-drawer Liquid and CSS directly.

This guide covers all three paths — app, theme editor, and custom code — plus exact steps and verified file names for Dawn, Horizon, Prestige, and Impulse, ready-to-paste CSS, a cart AJAX API reference, and how to customize the cart page itself.

What Is a Shopify Cart Drawer — and Should You Use One Instead of the Cart Page?

A Shopify cart drawer (also called a slide cart or mini cart) is a side panel that slides in when a shopper clicks the cart icon or adds a product. Instead of redirecting them to a separate /cart page, the drawer shows their items, totals, and checkout button right there — no page reload, no lost browsing momentum, and a layout designed for thumb navigation on mobile.

Here's the trade-off against the classic cart page:

Trade-off	Cart drawer	Cart page
Shopping flow	Slides in without a reload — shoppers keep browsing	Redirects to a separate /cart URL
Best for	Mobile-heavy stores, impulse and low-consideration purchases	Large or B2B-style orders that need careful review
Selling space	Compact — 1–3 upsells plus a free shipping bar	Roomy — full recommendation sections and content blocks

You don't have to pick one: most stores run the drawer as the default and keep the /cart page as a fallback (customizing that page is covered below). For the full data on when each wins, see cart drawer vs cart page, and if the terminology is fuzzy, here's slide cart vs mini cart.

Which Customization Method Should You Pick?

Before you start clicking, decide which path fits your situation:

Method	Time	Cost	Skill Needed	Best For
Method 1: Cart App	10 min	$0–$80/mo	None	Stores wanting upsells, free gifts, BOGO, full design control
Method 2: Theme Editor	5 min	Free	None	Tiny tweaks (drawer on/off, basic colors)
Method 3: Custom Code	30+ min	Free	Liquid/CSS/JS	Devs who want pixel-perfect control

Quick rule of thumb:

• If you want sales features (upsells, free shipping bar, BOGO) → Method 1
• If you only need to enable the drawer or change one or two basic colors → Method 2
• If you have a dev and need pixel-perfect tweaks → Method 3

Method 1: Restyle the Cart Drawer With an App (Recommended)

This is the fastest, most powerful, no-code path. You install a cart drawer app, click through a visual editor, and you're live in 10 minutes — with upsells, a free shipping bar, trust badges, and full brand customization included.

There are several good cart drawer apps out there (here's our honest comparison of the best ones, and verified pricing for three of them is below). For this walkthrough, we'll use Oxify Cart Drawer & Upsells because it's the one we build, and the screenshots match what you'll actually see.

The same 7 steps apply to any modern cart app — only the UI labels change.

Step 1: Pick a Color Template

Open the Design tab. You'll see 12 ready-made color circles — purple, blue, sky blue, green, brown, red, beige, black, pink, orange, and more.

Click one and your entire cart re-skins instantly. Background, buttons, text — everything updates. This single click saves you 20 minutes of hex-code guessing.

Step 2: Set Your Brand Colors Manually

If none of the templates match your brand, drop in your hex codes under Cart Global Design:

• Cart background color — usually #ffffff (white) or your brand off-white
• Button background color — your primary CTA color (make it pop)
• Button text color — usually #FFFFFF (white) or black for contrast
• Title bar text color — #1a1a2e works for most stores

One rule worth stealing: your "Secure Checkout" button should be the loudest element in the entire drawer. If shoppers can't find it in one second, you're losing them.

Step 3: Choose Title Type — Text or Logo

Under the Title Section, pick:

• Text — something like Your cart • {{cart_quantity}} items (the dynamic variable updates the count automatically)
• Brand Logo — upload your logo for a more premium feel

Logos tend to suit skincare, fashion, and luxury; text suits grocery, supplements, and high-volume stores. Test both for 7 days each and check your AOV.

Step 4: Adjust Button Radius and Font Size

Tiny details that change the whole vibe:

• Button radius 0 — sharp, modern, masculine (think tech, gym, or streetwear)
• Button radius 8 — balanced (the default that works for most stores)
• Button radius 24+ — soft, friendly, beauty/wellness feel
• Font size 14–16 — compact carts (more items visible)
• Font size 17–20 — spacious carts (easier mobile reading)

Step 5: Turn On the Sales Boosters

This is where AOV moves. In the left sidebar, toggle on:

• Upsells — show 1–3 related products under the cart items (full upsell strategy guide)
• Upsells with Discount — same, but with an "Add for $5 off" hook
• Volume Discount — "Buy 2 save 10%, buy 3 save 20%"
• Add Ons — gift wrap, shipping protection, warranties
• Rewards — free shipping bar or free gift progress meter
• Discount Codes — let shoppers paste codes inside the cart (here's why this boosts conversion)

Don't switch all of them on day one. Start with Upsells and Rewards — those are the highest-leverage boosters — and add the rest only after you've watched your AOV for a couple of weeks.

Step 6: Add Trust Elements and the Overlooked Extras

Toggle on:

• Trust Badges — secure checkout, money-back, verified payments (see the 7 badges that move the needle)
• Announcements — "Free shipping over $50" or "Orders ship same day"
• Additional Notes — let shoppers add gift messages
• Countdown Timer — "Order in the next 14:32 to ship today"

These reduce checkout anxiety at the exact moment shoppers decide whether to pay.

While you're in the editor, open the settings most stores never touch: the Empty cart state (swap the bored "Your cart is empty" for a "Here's what's trending →" hook with a collection link), the Custom HTML & CSS slot (for the one odd tweak no toggle covers), a Subscribe & save toggle if you sell consumables, and split payments — showing Shop Pay Installments or Klarna inside the drawer, not just at checkout, defuses price shock early.

Step 7: Preview on Mobile and Save

Most Shopify traffic is mobile. Toggle the preview to mobile view, scroll through the cart, and check:

• Is the checkout button thumb-reachable (bottom 1/3 of the screen)?
• Are upsell images crisp on small screens?
• Is the close icon (×) visible against your background?
• Is the font readable without zooming?
• Does the cart take up 90–95% of mobile screen width?

Once it looks good, hit save. Done.

Total time: 10 minutes. Total skill needed: zero.

Method 1: Pros and Cons

Pros:

• Live in 10 minutes with zero code
• Full feature set out of the box: upsells, free shipping bar, BOGO, trust badges, countdown timer
• Visual editor with live preview — see changes instantly
• Updates automatically — no maintenance when Shopify or your theme updates
• Mobile-responsive by default, with built-in analytics and A/B testing on many apps
• Customer support if something breaks

Cons:

• Monthly subscription cost ($0–$80/mo depending on app and plan)
• Learning curve for advanced features (upsell rules, segmentation)
• Some apps add minor page weight (pick "Built for Shopify" certified apps to avoid this)
• Limited by what the app's UI exposes — extreme custom needs may still require Method 3

Method 2: How Do You Edit the Cart Drawer in Shopify's Theme Editor? (Free, No App)

Open Online Store → Themes → Customize, click the gear icon (Theme settings), open Cart, and set Cart type to Drawer. Colors and typography are adjusted in the same Theme settings panel, but they apply store-wide — the free editor has no cart-only styling, and no upsell or free-shipping-bar features.

This works on most Online Store 2.0 themes (Dawn, Sense, Craft, Refresh, Studio, Origin, Ride, Horizon). Important: it only works if your theme already ships a cart drawer. If yours doesn't, jump to the legacy-theme section.

Step 1: Switch From Cart Page to Cart Drawer

Most stores start with the default cart page. To switch to a drawer:

1. From your Shopify admin, go to Online Store → Themes
2. Find your active theme and click Customize
3. In the customizer, click the gear icon (Theme Settings) at the bottom of the left sidebar
4. Look for the Cart section
5. Under Cart type, select Drawer — the alternatives depend on your theme: Dawn offers Page and Notification (the small corner popup), Horizon offers only Page
6. Click Save

That's it. Your cart will now slide in from the side instead of redirecting.

Step 2: Adjust Basic Cart Drawer Colors

Still in Theme Settings:

1. Click Colors in the left sidebar
2. Find the color scheme your cart uses (usually "Background 1" or "Inverse")
3. Change:
   • Background color
   • Text color
   • Button background and text colors
4. Save

Note: Shopify's theme editor changes colors globally — your cart drawer colors are tied to the same scheme as other parts of your store. If you want cart-only color control, you need Method 1 or 3.

Step 3: Edit Cart Drawer Typography

Under Theme Settings → Typography:

• Headings font — affects the cart title
• Body font — affects product names, prices, totals
• Font size scale — slider that bumps everything up or down

Again, these changes apply store-wide, not cart-only.

Step 4: Toggle Built-In Cart Features

Some Shopify themes (especially newer ones like Horizon and Studio) include basic cart features in the theme editor:

• Show vendor name under product
• Show product type
• Cart note field (let shoppers add order notes)
• Currency code display
• Order notes character limit

Open the cart drawer section in the customizer, scroll through the available toggles, and switch on what you need.

Step 5: Add a Free Shipping or Announcement Bar (If Supported)

A handful of premium themes (Impulse, Symmetry, Prestige) include a built-in cart goal bar or free shipping progress bar. If yours does:

1. Find the Cart section in the theme customizer
2. Look for "Free shipping bar" or "Cart goal"
3. Set your threshold (e.g., $50 for free shipping)
4. Customize the message and progress bar color
5. Save

If your theme doesn't include this natively — Dawn and Horizon don't — you'll need Method 1 or Method 3.

What You CAN'T Do With the Theme Editor

Be honest about the ceiling. The native theme editor cannot:

• Add cart upsells or product recommendations
• Show "You may also like" sections in the cart
• Add volume discount tiers (Buy 2 Save 10%, etc.)
• Display BOGO offers inside the cart
• Add countdown timers
• Show trust badges inside the drawer
• Add gift wrap or shipping protection add-ons
• Display post-purchase upsells
• Customize the cart independently of your theme colors

If you need any of those, Method 1 or 3 is your only option.

Total time: 5 minutes. Total skill needed: zero. Limitation: basic only.

Method 2: Pros and Cons

Pros:

• 100% free — no app subscription
• Native to Shopify — zero performance impact
• 5-minute setup, no code knowledge, no theme-breaking risk
• Settings persist through normal theme updates
• Works with any Shopify 2.0 theme that supports drawers

Cons:

• Extremely limited — basic colors and typography only
• No upsells, free shipping bar, BOGO, trust badges, countdown timers, or add-ons
• Color changes apply globally, not just to the cart
• No mobile-specific controls, no analytics, no A/B testing
• Won't work on older themes or custom themes without native drawer support

Method 3: Style the Drawer With Custom Liquid + CSS Code

This method gives you total pixel-level control but requires comfort with Liquid templating, CSS, and ideally JavaScript. Always duplicate your theme before editing code — one missing tag can break your whole storefront.

Step 1: Locate Your Cart Drawer File

1. Go to Online Store → Themes
2. Click Actions → Edit code on your active theme
3. In the left file tree, look under Snippets or Sections — the location depends on the theme (Dawn and Horizon both keep it under Snippets) — for one of:
   • cart-drawer.liquid
   • mini-cart.liquid
   • cart-notification.liquid (Dawn's corner-popup variant)
4. Open the file

If you don't see any of these, your theme may not have a built-in drawer — see what to do when your theme has no drawer.

Step 2: Customize Cart Drawer Width and Position

Find your theme's CSS file under Assets (usually base.css, theme.css, or application.css). Add this at the bottom:

/* Cart drawer width */
.cart-drawer,
.drawer__inner,
cart-drawer {
  max-width: 480px !important;
  width: 100% !important;
}

/* Cart drawer slides in from right */
.cart-drawer {
  right: 0;
  left: auto;
}

/* Mobile: full width */
@media screen and (max-width: 768px) {
  .cart-drawer,
  .drawer__inner {
    max-width: 100% !important;
  }
}

Replace .cart-drawer with whatever class your theme uses — the lookup table below has verified selectors for Dawn and Horizon; for anything else, inspect the open drawer in your browser.

Step 3: Style the Cart Drawer Background and Text

/* Cart drawer background */
.cart-drawer {
  background-color: #ffffff;
  color: #1a1a2e;
  padding: 24px;
}

/* Cart title */
.cart-drawer__title,
.drawer__heading {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  text-align: left;
}

/* Product names */
.cart-item__name {
  font-size: 15px;
  font-weight: 500;
}

/* Product prices */
.cart-item__price {
  color: #1a1a2e;
  font-weight: 600;
}

Step 4: Customize the Checkout Button

.cart__checkout-button,
button[name="checkout"] {
  background-color: #000098;
  color: #ffffff;
  border-radius: 8px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cart__checkout-button:hover {
  background-color: #0000cc;
}

Step 5: Add a Free Shipping Bar (Liquid + CSS)

In your cart-drawer.liquid file, find where the cart total is rendered and add this above it:

{% assign threshold = 5000 %}
{% assign remaining = threshold | minus: cart.total_price %}

<div class="free-shipping-bar">
  {% if cart.total_price >= threshold %}
    <p>🎉 You unlocked FREE shipping!</p>
  {% else %}
    <p>Add {{ remaining | money }} more for FREE shipping</p>
    <div class="progress-bar">
      <div class="progress-fill" style="width: {{ cart.total_price | times: 100 | divided_by: threshold }}%"></div>
    </div>
  {% endif %}
</div>

Then add the CSS:

.free-shipping-bar {
  text-align: center;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 16px;
}

.progress-bar {
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: #000098;
  transition: width 0.3s ease;
}

Threshold is in cents (5000 = $50.00). The same snippet works on the cart page — see the cart page section.

Step 6: Add Trust Badges Manually

Above the checkout button in cart-drawer.liquid:

<div class="cart-trust-badges">
  <img src="{{ 'badge-secure.png' | asset_url }}" alt="Secure checkout" width="40">
  <img src="{{ 'badge-refund.png' | asset_url }}" alt="Money back" width="40">
  <img src="{{ 'badge-shipping.png' | asset_url }}" alt="Fast shipping" width="40">
</div>

Upload your badge PNG files to Assets first.

Step 7: Test Thoroughly

After every change, test:

• Add to cart → drawer opens smoothly
• Remove items → totals update
• Adjust quantity → AJAX works
• Mobile view (resize browser to 375px width)
• Different products and variants
• Empty cart state

If anything breaks, revert your changes from the Older versions dropdown in the theme code editor.

Total time: 30+ minutes per feature. Skill needed: Liquid, CSS, and ideally JS.

Method 3: Pros and Cons

Pros:

• Total pixel-level control — every element exactly as you want
• No app subscription cost, no vendor lock-in — the cart is yours forever
• Lightweight and fast if coded clean
• Can build custom features no app supports, integrated with your theme's design system

Cons:

• Requires Liquid, CSS, and JS skills; 30+ minutes per feature plus testing
• Theme updates can overwrite your custom code (always duplicate first)
• One missing tag can break your storefront, and there's no support line
• No built-in analytics, A/B testing, or upsell logic — those require significant dev work
• Maintenance burden grows with every Shopify platform update

How to Edit the Cart Drawer in Specific Themes: Dawn, Horizon, Prestige, Impulse

Everything above works on almost any Online Store 2.0 theme, but file paths and CSS selectors are theme-specific. Here's the lookup table — the first of its kind we've seen published for this topic — followed by per-theme steps:

Theme	Enable the drawer	Drawer code files	Key CSS selectors	Native free shipping bar
Dawn (and Sense, Craft, Refresh, Studio, Origin, Ride)	Theme settings → Cart → Cart type: Drawer (or Page / Notification)	snippets/cart-drawer.liquid, assets/component-cart-drawer.css	cart-drawer, .drawer__inner, .cart-item__name	No — use an app or the Liquid snippet above
Horizon	Theme settings → Cart → Cart type: Drawer (or Page — the default)	snippets/cart-drawer.liquid, assets/cart-drawer.js	cart-drawer-component, .cart-drawer__inner, .cart-drawer__items, .cart-drawer__summary	No — nothing in its settings schema (checked Aug 2026)
Prestige	Theme settings → Cart → Drawer	Varies by major version — inspect before editing	Varies by major version — inspect before pasting	Yes — built-in shipping/cart goal bar
Impulse	Theme settings → Cart → Cart type: Drawer	Varies by version — inspect before editing	Varies by version — inspect before pasting	Yes — cart goal / free shipping message

Dawn and Horizon paths and selectors verified against Shopify's public GitHub repositories on August 12, 2026. Prestige and Impulse are closed-source and rename classes between major versions — which is why the only honest answer there is to inspect your own store's drawer.

Dawn (and Sense, Craft, Refresh)

Dawn ships with a built-in cart drawer:

1. Go to Online Store → Themes and click Customize on your active theme
2. Click the gear icon (Theme settings) at the bottom of the left sidebar
3. Open Cart and set Cart type to Drawer (the other options are Page and Notification — the small corner popup)
4. Adjust the color scheme the drawer uses under Theme settings → Colors
5. Click Save

For code edits, Dawn's drawer lives in snippets/cart-drawer.liquid with styles in assets/component-cart-drawer.css. The drawer is a <cart-drawer> custom element, so the CSS snippets in Method 3 targeting cart-drawer and .drawer__inner work on it as-is. The same structure applies to Shopify's other free OS 2.0 themes — Sense, Craft, Refresh, Studio, Origin, and Ride.

Horizon (Shopify's Default Theme Since Mid-2025)

Horizon replaced Dawn as Shopify's default free theme in mid-2025, and it's built on a newer block-based architecture — which is why older Dawn tutorials don't map onto it. Two things to know before you start:

• Horizon defaults to the cart page. Its cart_type setting offers exactly two options — Page and Drawer, with Page as the default — so a new Horizon store has no drawer until you switch it on.
• It has an auto-open toggle. Once Cart type is set to Drawer, an auto-open cart drawer setting appears that pops the drawer open on every add-to-cart.

To enable and style it:

1. Go to Online Store → Themes → Customize
2. Click the gear icon (Theme settings) and open the Cart group, then set Cart type to Drawer (if you don't see it immediately, use the theme editor's search field and type "cart")
3. Decide whether to switch on auto-open — good for impulse-driven stores, annoying for stores where shoppers add many items
4. The drawer inherits one of Horizon's color schemes — change it under Theme settings → Colors
5. Save, then preview on both desktop and mobile — Horizon animates the drawer differently on small screens

For code edits, Horizon's drawer is genuinely different from Dawn's. The markup lives in snippets/cart-drawer.liquid, which renders a <cart-drawer-component> web component wrapping a <dialog> element, with supporting snippets (cart-products.liquid, cart-summary.liquid, cart-bubble.liquid for the icon count) and behavior in assets/cart-drawer.js. The classes you'll actually target:

/* Horizon cart drawer — selectors verified against
   the Shopify/horizon repo, August 2026 */
cart-drawer-component .cart-drawer__inner {
  max-width: 480px; /* drawer width */
}

cart-drawer-component .cart-drawer__items {
  padding: 16px; /* scrollable items area */
}

cart-drawer-component .cart-drawer__summary {
  padding: 16px; /* sticky totals + checkout area */
}

A Dawn snippet pasted into Horizon does nothing — .drawer__inner simply doesn't exist there. Horizon also has no free shipping bar anywhere in its settings schema (checked August 2026), so that feature needs Method 1 or a Liquid edit. Horizon updates frequently; re-inspect after major theme updates, or use a cart drawer app (Method 1), which renders its own drawer identically on every theme.

Prestige

Prestige (a premium theme by Maestrooo) has one of the best native cart drawers of any paid theme, including a built-in free shipping progress bar:

1. Go to Online Store → Themes → Customize
2. Open Theme settings → Cart
3. Set the cart type to Drawer
4. In the same Cart settings, enable the free shipping / cart goal bar and set your threshold — Prestige is one of the few themes with this built in
5. Colors and typography follow your global settings under Theme settings → Colors and Typography

Heads-up for code edits: Prestige has been rewritten across major versions, so class names differ significantly between recent and older releases. Inspect your own drawer before pasting CSS from a tutorial written for a different version.

Impulse

Impulse (by Archetype Themes) also ships with a native drawer plus a couple of extras:

1. Go to Online Store → Themes → Customize
2. Open Theme settings → Cart
3. Set Cart type to Drawer
4. Switch on the extras Impulse includes natively — order notes and its cart goal / free shipping message
5. Save and test on mobile

One caveat that applies to all four themes: the native drawer and an app drawer will fight each other if both are enabled. If you install a cart drawer app (Method 1), set your theme's cart type back to Page and let the app render the drawer — see Issue 5 in the troubleshooting section below.

How Do You Add a Sticky or Floating Cart Icon?

A sticky (or floating) cart icon stays visible as shoppers scroll, so the cart is always one tap away — especially useful on long product pages and mobile. Two ways to add one:

Option 1 — app toggle (no code). Most cart drawer apps include it as a switch. In Oxify Cart Drawer, the slide cart, sticky cart, and floating cart options live in the same Design tab as the color templates from Method 1 — turn it on, pick a corner, done.

Option 2 — CSS. If your theme's cart icon only lives in the header, add a fixed-position button that opens the cart:

/* Floating cart button */
.floating-cart {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #000098;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-cart svg { fill: #ffffff; width: 24px; }

Attach that class to a link or button wired to your theme's cart-open trigger (or simply linking to /cart as a fallback). The catch: making it open the drawer rather than the cart page requires calling your theme's own JavaScript, which differs per theme — another case where the app toggle is the low-maintenance route.

What If Your Theme Has No Cart Drawer? (Older and Legacy Themes)

Some vintage and custom themes have no drawer at all — clicking the cart icon always redirects to /cart. Three ways out, in order of effort:

1. Install a cart drawer app (fastest). App drawers don't depend on theme support — the app injects and renders its own drawer on any theme, including vintage ones. This is the only no-code option on a legacy theme.
2. Switch to a free OS 2.0 theme. Dawn and Horizon both include a maintained drawer at no cost. If you're on an unsupported theme anyway, migrating gets you the drawer plus ongoing updates.
3. Build one from scratch (developers). The core pattern is smaller than it sounds: a Liquid snippet that renders cart.items, CSS to slide the panel in, and JavaScript that intercepts add-to-cart and refreshes the markup.

The minimal JavaScript skeleton for option 3:

// Intercept add-to-cart forms and open a custom drawer
document.querySelectorAll('form[action^="/cart/add"]').forEach(function (form) {
  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    await fetch('/cart/add.js', { method: 'POST', body: new FormData(form) });
    const cart = await fetch('/cart.js').then(function (r) { return r.json(); });
    // Re-render your drawer's item list from `cart.items` here
    document.querySelector('#my-cart-drawer').classList.add('is-open');
  });
});

Budget a real day of work for a production-quality version: quantity steppers hitting /cart/change.js, an empty state, loading states, and mobile behavior all need building by hand (the endpoint reference below covers the API side). For most stores, option 1 delivers the same result in 10 minutes.

How Do You Customize the Shopify Cart Page (Not the Drawer)?

In the theme editor, choose Cart from the page selector dropdown at the top, then edit the cart section's settings in the left sidebar and add sections above or below it. Even drawer-first stores keep the /cart page as a fallback — shoppers can still land on it directly — so it's worth 10 minutes:

1. Go to Online Store → Themes → Customize
2. In the page selector dropdown at the top of the editor, choose Cart
3. Click the cart section in the left sidebar to edit its settings — most themes let you toggle vendor names, order notes, and a "continue shopping" link here
4. Use Add section to place content above or below the cart: a trust banner, a featured collection, or recently viewed products
5. Click Save

For code edits in Dawn-family themes, the cart page lives in sections/main-cart-items.liquid and sections/main-cart-footer.liquid. Want a free shipping bar here too? The Liquid snippet from Method 3 Step 5 works unchanged — paste it into main-cart-footer.liquid above the subtotal. And if you're deciding which surface to invest in, the comparison table at the top of this guide plus our full cart drawer vs cart page breakdown cover it — short version: the drawer wins for most stores, the page suits large, carefully-reviewed orders.

Shopify Plus Cart Customizations

On Shopify Plus, the cart drawer itself is customized exactly the same way as on any other plan — Plus doesn't unlock extra drawer settings. Where Plus changes the picture is the logic around the cart:

• Shopify Functions — server-side cart logic like automatic discounts, cart transforms (merging or expanding items at cart level), and payment or delivery customizations. Functions shipped through public apps run on all plans, but deploying your own custom Functions requires Plus.
• Checkout extensibility — customize checkout, Thank you, and Order status pages with checkout UI extensions and branding APIs (the replacement for checkout.liquid).
• Scripts are gone — Shopify Scripts were deprecated on June 30, 2026, and any Scripts still published on a store were deactivated and no longer run. If you're maintaining an older Plus store, migrate any legacy cart-level script logic to Shopify Functions.
• B2B carts — Plus B2B features like price lists and quantity rules flow into the cart automatically once configured.

Practical takeaway: use the three methods above for the drawer's look and features, and reach for Functions or checkout extensibility only when you need logic the drawer can't express — rules-based discounts, per-customer pricing, and the like.

Cart AJAX API Quick Reference (for Developers)

Every cart drawer — theme-native, app-rendered, or hand-built — talks to the same five endpoints. Bookmark this:

Endpoint	Method	What it does	Gotcha
/cart.js	GET	Returns the cart as JSON — items, item_count, total_price (in cents)	Read-only; fetch it after any change to re-render
/cart/add.js	POST	Adds a variant: {"id": variantId, "quantity": 1}	Returns 422 if the variant is sold out or unavailable
/cart/change.js	POST	Sets one line's quantity: {"line": 1, "quantity": 0} removes it	line is 1-indexed — the classic off-by-one bug
/cart/update.js	POST	Bulk-updates quantities, the cart note, and attributes	Leaves items you don't mention untouched
/cart/clear.js	POST	Empties the cart	Doesn't clear cart attributes or the note

The two failure modes behind most "my cart drawer is broken" tickets:

• 422 responses — the variant is sold out, unpublished, or the requested quantity exceeds available stock. Read the JSON error body; don't fail silently or the shopper sees a dead button.
• Stale rendering — the cart updated server-side but your markup didn't. Either re-render from a fresh /cart.js fetch, or (in Dawn-family themes) use the Section Rendering API — append ?sections=cart-drawer to the request to get updated HTML back in the same round trip.

Troubleshooting Common Cart Drawer Issues

Even with the best setup, things go wrong. Here's how to fix the most common cart drawer problems across all three methods.

Issue 1: Cart Drawer Won't Open

Symptoms: Click the cart icon, nothing happens.

Likely causes:

• JavaScript conflict between two apps (e.g., a cart app + a slide-cart from your theme both trying to control the same icon)
• Cart drawer is disabled in theme settings
• Custom code has a syntax error blocking the JS

Fix:

1. Open your store in an Incognito window and check the browser console (F12 → Console tab) for red errors
2. Disable apps one by one to find the conflict
3. If you installed a cart drawer app, go to Online Store → Themes → Customize → App embeds and confirm only ONE cart drawer is enabled
4. If you used custom code, check for missing closing tags in cart-drawer.liquid

Issue 2: Cart Items Don't Update Quantity

Symptoms: Click + or -, nothing changes. Or the cart total doesn't reflect the new quantity.

Likely causes:

• AJAX request is failing
• Custom code is not using Shopify's cart endpoints correctly
• Caching issue

Fix:

1. Hard refresh the page (Cmd+Shift+R / Ctrl+Shift+F5)
2. Check the browser console for failed network requests to /cart/change.js or /cart/update.js
3. If using custom code, make sure your fetch calls hit /cart.js (read) or /cart/change.js (update) — see the endpoint reference above, including the 1-indexed line parameter
4. If using an app, contact support with the console error

Issue 3: Cart Drawer Looks Broken on Mobile

Symptoms: Drawer extends past the screen, items overlap, checkout button is cut off, or close icon disappears.

Likely causes:

• Missing or wrong mobile breakpoints in CSS
• Drawer width set in pixels instead of percentage
• Padding/margin overflow

Fix:

1. Open the page on a real phone (browser dev tools mobile view isn't always accurate)
2. Add this CSS as a safety net: @media screen and (max-width: 768px) { .cart-drawer { max-width: 100% !important; } .cart__checkout-button { position: sticky; bottom: 0; }}
3. Check that no parent container has overflow: hidden clipping the drawer
4. If using an app, look for a "mobile preview" toggle in the editor and verify there

Issue 4: Cart Drawer Slows Down My Store

Symptoms: Page Speed Insights score drops after enabling cart customizations. Cart icon takes 1+ second to respond.

Likely causes:

• App loading too many scripts
• Multiple cart apps installed
• Custom code with heavy JavaScript libraries

Fix:

1. Run a Lighthouse audit before and after to confirm the source
2. If you have multiple cart apps, uninstall all but one
3. Choose apps with the "Built for Shopify" badge — these are performance-tested by Shopify
4. If using custom code, defer JS until after page load: <script defer src="{{ 'cart-drawer.js' | asset_url }}"></script>
5. Compress and lazy-load any custom images inside the cart

Issue 5: Two Cart Drawers Showing at Once

Symptoms: Two drawers open on top of each other, or items appear in one but not the other.

Likely causes:

• Theme has a built-in drawer AND you installed an app
• Two cart apps installed
• Old code from a previous app wasn't fully removed

Fix:

1. Go to Online Store → Themes → Customize → App embeds and disable any extra cart drawer toggles — only keep the one you're using
2. Go to Theme Settings → Cart and switch cart type to Page if you're using an app drawer (the app handles the drawer, the theme just feeds the cart data)
3. If you previously uninstalled a cart app, check theme.liquid for leftover <script> or <div> references and remove them

Issue 6: Theme Updates Broke My Custom Code

Symptoms: Cart drawer customizations disappeared or broke after a theme update.

Likely causes:

• Theme update overwrote your edited cart-drawer.liquid and theme.css
• New theme version uses different class names

Fix:

• This is exactly why you should duplicate your theme before editing code
• Restore your previous version from Online Store → Themes → Older versions (Shopify keeps a backup automatically)
• Going forward: keep all custom CSS in a separate file (custom.css) and reference it in theme.liquid so updates don't overwrite it
• Better long-term solution: switch to Method 1 (app), which lives outside theme files and survives all theme updates

5 Customization Mistakes That Tank Conversion (All 3 Methods)

Things we see merchants get wrong every single week, regardless of method:

1. Using neon or trendy colors that fight your brand — your cart should feel like a continuation of your store, not a different planet
2. Cramming 6 upsells into one cart — 1 to 3 max, otherwise the cart looks like a flea market
3. Making the checkout button the same color as the cart background — happens more than you'd think (it's a conversion killer)
4. Forgetting the close icon color — if shoppers can't find the × on a dark theme, they bounce
5. Skipping the free shipping bar — the highest-ROI element in any cart drawer, and the one most often left off

Mobile-First Customizations Most Stores Forget

Mobile is where most carts get abandoned. Five settings to lock in regardless of method:

• Sticky checkout button — always visible at the bottom even when scrolling cart items
• Tap-friendly quantity selectors — +/- buttons should be at least 44×44px (Apple's HIG minimum)
• Compact upsell cards — single column, large product image, one-tap "ADD" button
• Minimal font weight — bold headers, regular body, no italics (italics kill mobile readability)
• One CTA color — only the checkout button should pop; everything else is secondary

Track Whether Your Cart Drawer Changes Actually Work

Don't customize blind. Before you change anything, note three numbers, then re-check them 2–4 weeks later:

• AOV — Shopify admin → Analytics. This is the number upsells and free shipping bars are supposed to move.
• Cart-to-checkout rate — in GA4, compare add_to_cart vs begin_checkout events to see how many shoppers your cart loses between adding an item and starting checkout.
• Cart abandonment — if it stays flat after a redesign, the drawer isn't your bottleneck; recovery tools may matter more.

If you're using a cart app, check its built-in analytics too — most report upsell revenue directly, which is the cleanest read on whether a specific booster earns its keep.

Which Customization Should You Do First?

If you only have 30 minutes today, do these in order:

1. Switch on the cart drawer (Method 2, Step 1) — if you're still on a cart page, this alone improves UX
2. Match your brand colors (Method 1 Step 2 OR Method 2 Step 2)
3. Add a free shipping bar — highest-ROI element, period
4. Turn on 1-2 upsells — start small, see what converts
5. Add trust badges near the checkout button

Skip everything else until those five are live and tested.

Cart Drawer App Pricing and Ratings (Checked August 12, 2026)

If you've picked Method 1, here's live data on three Built for Shopify cart drawer apps — every number below was pulled from the Shopify App Store on August 12, 2026, not copied from an older article:

App	Rating	Reviews	Price	Free trial
Oxify Cart Drawer & Upsell	5.0	36	$9.99–$49.99/mo (by order volume)	14 days
Amp: Slide Cart Upsell Drawer	5.0	692	Free plan; $14.99–$29.99/mo	7 days
UpCart — Cart Drawer Cart Upsell	4.7	848	$29.99–$54.99/mo (free on dev stores)	14 days

In one line each: Oxify Cart Drawer & Upsell (our app — disclosure below) holds a 5.0 rating across 36 reviews at $9.99–$49.99/mo, the lowest entry price of the three. Amp: Slide Cart Upsell Drawer rates 5.0 across 692 reviews and is the only one with a permanent free plan. UpCart rates 4.7 across 848 reviews at $29.99–$54.99/mo — the biggest review base at the highest entry price. The full feature-by-feature breakdown is in our best Shopify cart drawer apps comparison.

Warning — delisted apps: before you follow any tutorial's app recommendation, open the App Store listing and confirm it still exists. qikify Slide Cart Drawer, which several older cart-drawer guides are built around, shows "This app is not currently available on the Shopify App Store" as of August 19, 2026. A guide recommending a delisted app is a reliable sign nothing else in it was recently checked either. (An earlier version of this page named iCart here — that was our mistake: the iCart listing was live when we re-checked it on August 19, 2026.)

Why Oxify Cart Drawer & Upsells Is Built For This

Full disclosure: Oxify is our app, so weigh this section accordingly — the numbers above were verified the same way as everyone else's.

Oxify Cart Drawer & Upsells is "Built for Shopify" certified, has a 5.0 rating across 36 reviews, and runs $9.99–$49.99/mo across four order-volume tiers, each with a 14-day free trial.

What's in the box:

• 12 pre-built color templates (skip the design step entirely)
• Side and center title alignment, text or brand logo title
• Slide cart, sticky cart, and floating cart options
• Cart upsells, FBT (Frequently Bought Together), and AI recommendations
• Free shipping bar, free gifts, BOGO, volume discounts
• Countdown timer, trust badges, announcement bar
• Product page upsells and addons, post-purchase upsell funnel
• Shipping protection and subscriptions
• Custom HTML & CSS slot for advanced tweaks
• Drag-and-drop editor with live preview
• Works with all Shopify 2.0 themes (Dawn, Sense, Craft, Horizon, Studio, and 100+ more)

👉 Try Oxify Cart Drawer & Upsells free →

How We Verified This Guide

Every dated claim on this page was checked on August 12, 2026:

• App data — ratings, review counts, pricing, and trial lengths pulled from the live Shopify App Store listings for Oxify Cart Drawer & Upsell, Amp: Slide Cart Upsell Drawer, and UpCart. The qikify Slide Cart Drawer listing was confirmed unavailable on August 19, 2026; iCart, named here in error in an earlier version, was confirmed live and installable the same day.
• Theme internals — Dawn and Horizon file names, CSS selectors, and cart-type options verified against Shopify's public GitHub repositories (Shopify/dawn, Shopify/horizon), including Horizon's cart_type setting, its auto-open toggle, and the absence of a free shipping bar in its settings schema.
• Platform dates — the Shopify Scripts deprecation date (June 30, 2026) confirmed against Shopify's Help Center.
• Screenshots — taken in the Oxify Cart Drawer editor and Shopify's theme editor.
• Disclosure — Oxify builds one of the apps discussed. We say so wherever it appears, and closed-source themes (Prestige, Impulse) are marked "inspect your own store" rather than padded with unverifiable selectors.

FAQs

How do I edit the cart drawer in Shopify?

Go to Online Store → Themes → Customize, click the gear icon (Theme settings), open Cart, and set Cart type to Drawer. Colors and fonts are edited in the same Theme settings panel. For anything beyond basics — upsells, a free shipping bar, trust badges — you'll need a cart drawer app or custom code (Methods 1 and 3 above).

Can I customize my Shopify cart drawer without an app?

Yes — partially. Shopify's theme editor lets you switch on the drawer and change basic colors and fonts (Method 2 above), and custom Liquid + CSS can go further (Method 3). But for upsells, a free shipping bar, volume discounts, trust badges, and countdown timers without writing code, a cart drawer app is the only route.

Does the Dawn theme have a built-in cart drawer?

Yes. Enable it under Theme settings → Cart → Cart type → Drawer in the theme editor (the other Dawn options are Page and Notification). For code customization, Dawn's drawer lives in snippets/cart-drawer.liquid with styles in assets/component-cart-drawer.css, and the CSS snippets in this guide work on it as-is.

How do I customize the cart drawer in the Horizon theme?

In the theme editor, open Theme settings → Cart and set Cart type to Drawer — Horizon defaults to Page, and an auto-open toggle appears once Drawer is selected. For CSS, Horizon's drawer is a cart-drawer-component web component with classes like .cart-drawer__inner, .cart-drawer__items, and .cart-drawer__summary (verified August 2026) — Dawn selectors like .drawer__inner don't exist in Horizon.

How do I customize the cart drawer in the Prestige theme?

Open Theme settings → Cart in the theme editor to enable the drawer and switch on Prestige's built-in free shipping bar. Class names have changed significantly across Prestige versions, so inspect your own drawer before pasting CSS from a tutorial written for a different release.

How do I customize the Shopify cart page instead of the drawer?

In the theme editor, choose Cart from the page selector dropdown at the top, then edit the cart section's settings and add sections above or below it. In Dawn-family themes the code lives in sections/main-cart-items.liquid and sections/main-cart-footer.liquid. Full steps are in the cart page section of this guide.

What CSS selectors control the Shopify cart drawer?

They're theme-specific. In Dawn the drawer is a cart-drawer element with .drawer__inner; in Horizon it's cart-drawer-component with .cart-drawer__inner, .cart-drawer__items, and .cart-drawer__summary; Prestige and Impulse rename classes between versions. Use the theme lookup table in this guide, and always confirm by right-clicking the open drawer → Inspect.

How do I add a free shipping bar to the cart drawer without an app?

If your theme has one built in (Prestige and Impulse do), switch it on under Theme settings → Cart. Otherwise — Dawn and Horizon have none — paste the Liquid + CSS snippet from Method 3 Step 5 into your cart drawer file, setting the threshold in cents (5000 = $50). A cart drawer app does the same job without code.

Why are two cart drawers showing on my Shopify store?

Your theme's native drawer and a cart app's drawer are both enabled and fighting over the same cart icon. Fix it by disabling extra cart drawer toggles under Themes → Customize → App embeds and setting Theme settings → Cart → Cart type to Page so the app renders the only drawer. If you uninstalled a cart app previously, also check theme.liquid for leftover script tags.

Will a cart drawer app slow my store down?

Not if you pick one with the "Built for Shopify" badge — those are performance-tested by Shopify. Slowdowns usually come from running multiple cart apps at once or leftover code from uninstalled apps. Run a Lighthouse audit before and after installing to confirm the impact on your own store.

What replaced Shopify Scripts for cart discounts?

Shopify Functions. Shopify Scripts were deprecated on June 30, 2026 — any Scripts still published were deactivated and no longer run. Functions handle the same jobs server-side (automatic discounts, cart transforms, payment and delivery customizations); Functions shipped through public apps work on all plans, while deploying your own custom Functions requires Shopify Plus.

What's the difference between a cart drawer and a cart page?

A cart drawer slides in from the side without a page reload; a cart page is a separate URL the shopper navigates to. Drawers keep shoppers in their browsing flow and suit mobile-heavy, impulse-driven stores, while cart pages suit large orders that need careful review. Full comparison here.

Does my Shopify theme support a cart drawer?

Most Online Store 2.0 themes do — Dawn, Sense, Craft, Refresh, Studio, Origin, Ride, and Horizon all ship one (Horizon's is off by default). Older and some custom themes may not. Cart apps render their own drawer, so they work even on themes with no native drawer support.

What's the best cart drawer app for Shopify?

It depends on which features you need — as of August 2026, Oxify Cart Drawer & Upsell (5.0, 36 reviews, from $9.99/mo), Amp: Slide Cart (5.0, 692 reviews, free plan available), and UpCart (4.7, 848 reviews, from $29.99/mo) are all Built for Shopify certified. One caution: several older tutorials still recommend iCart, which shows as unavailable on the App Store as of August 2026 — always check that a listing is live. Our full comparison covers the trade-offs.

What to Do Next

You don't need to finish everything in one sitting. Pick one customization and ship it today.

If your cart doesn't have a free shipping bar yet, start there. It's the single highest-ROI change you can make in 5 minutes. Then come back next week and add upsells, then volume discounts — small compounding tweaks, zero ad spend, and the tracking section above tells you whether each one earned its place.

If you're going the app route, install Oxify Cart Drawer & Upsells free and customize your cart in under 10 minutes. If you're going the code route, duplicate your theme first, test every change on mobile, and use the snippets and selector table above as your starting point.

Either way, your cart drawer is the most underleveraged conversion surface in your store. Fix it now.