How to Style and Brand the Cart Drawer
Styling the Cart Drawer to Match Your Brand
Almost every part of the cart drawer can be recoloured and restyled to match your store. The key thing to know: **styling lives on the Design sub-tab of each section, not in one global place.** So to change the colour of a product title, you open the Product line item section; to change the checkout button colour, you open the Checkout button section, and so on.
This article shows where each control lives, plus how to use custom CSS for anything that doesn't have a setting yet.
How styling is organised
Every section in the editor (Settings, Spend tiers, Upsell, Checkout button, etc.) has two sub-tabs:
- Settings — the content and behaviour of that section.
- Design — the colours, fonts, spacing, and sizing for that section.
If you can't find a colour control, you're almost always on the Settings sub-tab — switch to Design.
Drawer-wide colours and fonts
Open the Settings section → Design sub-tab. These apply to the whole drawer:
- Font family — Inherit (use your theme's font), Helvetica, Arial, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, or Courier New.
- Cart background colour — the drawer's main background.
- Border colour — dividers and outlines inside the drawer.
- Text colours — separate controls for Primary text, Secondary text, and Price text.
- Corner radius — rounding for buttons and badges.
Where to change each element's colour
| You want to change… | Open this section → Design |
|---|---|
| Product title / variant / price text on cart items | Product line item |
| Checkout button colour and text colour | Checkout button |
| Announcement bar background and text colour | Announcement bar |
| Spend tier / progress bar colours | Spend tiers |
| Upsell section colours | Upsell |
| Subtotal row styling | Subtotal |
| Discount row styling | Discounts |
| Order note styling | Order note |
| Overall background, border, base text, font | Settings |
Each section's Design sub-tab only affects that section, so you can give the checkout button a brand colour without touching anything else.
Custom CSS — for anything without a setting
Some fine-grained tweaks don't have a dedicated control yet — for example, making the drawer narrower on mobile, changing image aspect ratio, or adjusting spacing between rows. For these, use custom CSS.
- Open the Settings section → Design sub-tab.
- Scroll to the Custom CSS editor.
- Add your rules and save.
Tip: Custom CSS targets the live drawer on your storefront. It may not always render in the in-app preview — check your live store after saving.
If you're not comfortable writing selectors, send us the change you want and a screenshot, and we'll give you the exact snippet to paste in.
Things that need custom CSS today
These come up often and currently have no dedicated admin setting — they're done with custom CSS (we're happy to supply the snippet):
- Mobile drawer width (e.g. leaving a sliver of the page visible behind the drawer).
- Product image aspect ratio (e.g. portrait instead of square) and removing white backgrounds from transparent images.
- Larger cart title font or uppercase product titles.
- Separate header background colour.
Changes not showing on the storefront?
- Make sure you clicked Save (and Publish where prompted).
- Confirm you edited the Design sub-tab of the right section.
- Hard-refresh your storefront (or check in an incognito window) to clear cached styles.
- If a colour you set is being overridden, your theme's CSS may be winning — custom CSS with a more specific selector will fix it. Contact our 247 support if you're stuck.