Shopify Cart Drawer Custom CSS: Fixes & Code (2026)

Cart drawer looks off and you just want it fixed? You’re in the right place. Below are working CSS snippets for the exact problems people get stuck on — ugly borders, that underline under “Remove,” too much spacing, a checkout button nobody can see.

Copy, paste, save. Each fix tells you where it goes and why it works.

One thing to read first, because it saves you an hour of frustration: 👇

Why Your Cart Drawer CSS Isn’t Working

If you’ve already tried adding CSS and nothing changed — this section is your fix.

Shopify themes and cart apps load their own CSS after yours. So your rule gets overridden. The browser sees both, and the last one wins.

Two fixes:

• Add !important to force your rule to win:

css

  cart-drawer .cart-item { border: none !important; }

• Use a more specific selector. cart-drawer .cart-item beats a plain .cart-item.

The other big mistake: using a selector that’s too broad. If you write .cart { background: black; }, you might recolor your checkout page too. Always start your selector with cart-drawer so it only touches the drawer.

Pro tip: Right-click the drawer → Inspect. The highlighted tag shows you the exact class name to target. This one habit fixes 90% of “my CSS does nothing” problems.

A quick note on themes: the selectors below are written for Dawn and the many themes built on it. Newer themes like Horizon, or premium themes like Impulse and Prestige, may use slightly different class names. The fix is always the same — Inspect the element and swap in the class you see.

Where to Paste Your CSS (Pick One)

Method	Best for	Risk
App CSS editor (e.g. Oxify)	Most stores — safe, survives theme updates	None
Theme → Custom CSS box	Tiny one-off tweaks	Applies store-wide
Edit Code → stylesheet	Devs only	Can break storefront

If you use a cart drawer app like Oxify Cart Drawer Cart Upsell, it has a built-in Custom HTML & CSS panel — a CSS editor box right in the dashboard. Paste, save, done. No theme files touched, and it doesn’t get wiped when Shopify updates your theme. More on that at the end.

Now the fixes.

Fix 1: Remove Borders and Lines

Default cart drawers have hard lines between items and around the header/footer. They make the cart look dated.

Remove the line between cart items:

css

cart-drawer .cart-item {
  border-bottom: none !important;
}

Remove the header and footer border:

css

cart-drawer .drawer__header,
cart-drawer .cart-drawer__footer {
  border: none !important;
}

Want a soft divider instead of a harsh one? Don’t remove it — soften it:

css

cart-drawer .cart-item {
  border-bottom: 1px solid #f0f0f0 !important;
}

Fix 2: Kill the Underline Under “Remove”

This is one of the most-asked questions in the Shopify Community. The “Remove” link is underlined by default and looks messy.

css

cart-drawer .cart-item__remove-text {
  text-decoration: none !important;
}

Want it subtle and grey instead of loud?

css

cart-drawer .cart-item__remove-text {
  text-decoration: none !important;
  color: #888 !important;
  font-size: 13px;
}

Fix 3: Tighten or Loosen the Spacing

Cart items too far apart? Too cramped? This is pure spacing control.

Reduce the gap between items:

css

cart-drawer .cart-items .cart-item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

Add breathing room inside the drawer:

css

cart-drawer .drawer__inner {
  padding: 20px !important;
}

Small spacing changes do more for “premium feel” than any color change. Cramped carts feel cheap.

Fix 4: Make the Checkout Button Impossible to Miss

The #1 silent conversion killer: a checkout button that blends into the drawer background. If a shopper has to hunt for it, some of them leave.

css

cart-drawer .cart__checkout-button {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 30px;
  font-weight: 600;
  padding: 16px !important;
}

Rule: the checkout button should be the boldest, highest-contrast thing in the drawer. Always.

Fix 5: Resize Product Images

Tiny thumbnails make products hard to recognize. Bigger images = clearer cart.

css

cart-drawer .cart-item__image {
  width: 90px !important;
  height: 90px !important;
  border-radius: 8px;
}

Fix 6: Make the Drawer Wider (Without Breaking Mobile)

css

cart-drawer .drawer__inner {
  width: 420px !important;
  max-width: 90vw !important;
}

The 90vw is non-negotiable. Without it, a wide drawer overflows on phones — and most of your shoppers are on phones.

Fix 7: Hide an Element You Don’t Want

Sometimes the fastest fix is to just remove something — a label, an icon, a note field.

css

cart-drawer .cart-item__price-wrapper .unit-price {
  display: none !important;
}

Swap the selector for whatever element you want gone (find it with Inspect). Use this carefully — hide clutter, not anything shoppers need.

Fix 8: Add a Smooth Slide-In Animation

A jumpy drawer reads as “broken.” A smooth one reads as “premium.” One line:

css

cart-drawer .drawer__inner {
  transition: transform 0.3s ease-in-out !important;
}

Quick Troubleshooting Table

Problem	Cause	Fix
CSS does nothing	Theme CSS overrides yours	Add !important
Whole store restyled	Selector too broad	Prefix with cart-drawer
Drawer overflows phone	Fixed width, no cap	Add max-width: 90vw
Styles vanished after update	CSS lived in theme files	Move to an app’s CSS editor
Can’t find the class name	Guessing	Right-click → Inspect

The 5-Step Order to Style Your Drawer

Don’t paste everything at once. Work in this order so you can see what each change does:

1. Fix the broken stuff first — borders, underlines, spacing.
2. Match your brand colors — pull exact hex codes from your logo.
3. Resize images for clarity.
4. Style the checkout button last — make it the loudest element.
5. Test on a real phone, then save a backup of your final CSS.

The Honest Limit of Custom CSS

CSS can make your cart drawer look great. It cannot make it do more.

CSS can’t add a free shipping bar, upsells, BOGO offers, volume discounts, or a countdown timer. Those need real functionality — either custom JavaScript and Liquid (developer territory) or an app.

And theme-based CSS has a real weakness: it breaks. Every theme update can overwrite it. Switch themes and all your work is gone.

This is where a cart drawer app earns its place. Oxify Cart Drawer & Upsells keeps your Custom HTML & CSS in a dashboard panel — outside your theme files, so it survives every update. You get a CSS editor and a Custom HTML box with a location picker, so you can both style the drawer and drop in your own elements.

You also get everything CSS can’t do:

• Free shipping progress bar and tiered reward bar
• In-cart upsells, cross-sells and “frequently bought together”
• Volume discounts, BOGO, and free gifts with purchase
• Countdown timers, trust badges and a sticky cart

It holds a 5.0★ rating and carries the Built for Shopify badge — Shopify’s mark for apps that meet its highest standards for performance, design, and integration. Pricing starts at $19.99/month with a 14-day free trial.

Bottom Line

Most cart drawer CSS problems come down to two things: the wrong selector, and forgetting !important. Fix those, work through the snippets above one at a time, and test on your phone.

Want to skip the code and theme-file risk entirely? Install Oxify Cart Drawer & Upsells — use the built-in CSS editor to design your cart in minutes, and unlock upsells and free shipping bars while you’re at it.

FAQ