How to Style and Brand the Cart Drawer
Almost every part of the cart drawer can be recoloured and restyled. The key thing to know: styling lives on the Design tab of each section, not in one global place. To change a product title colour, open Product line item. To change the checkout button colour, open Checkout button.
How styling is organised
Every section in the editor has a settings tab and a Design tab:
- Settings (Offers and Widget for upsells): the content and behaviour of that section.
- Design: colours, fonts, spacing and sizes for that section.
Can't find a colour control? You're almost always on the settings tab. Switch to Design.
Drawer-wide colours and fonts
Open Settings, then the Design tab. These apply to the whole drawer:
- Font: Use your theme fonts, or Helvetica, Arial, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond or Courier New. Theme fonts don't show in the editor preview. Check your store after saving.
- Button and badge corner radius: rounding for buttons and badges. 0 gives square corners.
- Cart background and Border color.
- Text colors: Primary text, Secondary text and Price color.
Add your logo to the cart header
- Open Settings, the settings tab.
- In the Header card, tick Show image.
- Click the thumbnail to choose your logo, and set its size with the slider.
The logo shows to the left of the cart title.
Drawer size, position and rounded corners
Width, side, corner radius and the floating look are set in the Position card. See Cart Drawer Position and Size.
Where to change each element
| You want to change | Where |
|---|---|
| Product title colour on cart lines | Settings > Design > Primary text |
| Variant, discount labels and other small text | Settings > Design > Secondary text |
| Prices on cart lines | Settings > Design > Price color |
| Drawer background, dividers | Settings > Design > Cart background, Border color |
| Font for the whole drawer | Settings > Design > Font |
| Roundness of buttons and badges | Settings > Design > Button and badge corner radius |
| Product image size and corners | Product line item > Design > Product image size (default 80px), Product image border size |
| Quantity selector colours | Product line item > Design > Quantity select background, Text & icon, Border color & size |
| Subscribe and cancel buttons | Product line item > Design > Subscribe & save button, Cancel subscription button |
| Checkout button colour, border, corners | Checkout button > Design > Background color, Text color, Border size and color, Corner radius |
| Spend tier bar colours | Spend tiers > Design. With a layout picked: the Bar card (Background, Track, Fill, Gradient) and the Text card (Goal names). Without one: the Colors card (Background, Bar background, Bar foreground, Reward description text). See Spend Tier Layouts |
| Spend tier message colour | Spend tiers > Offers: select the text in the message editor and pick a colour |
| Upsell colours, borders, fonts | Upsell > Design: Offer, Product card, Button and Savings badge cards |
| Upsell button shape | Upsell > Widget: the 8 button styles |
| Subtotal text size and weight | Subtotal > Settings: Subtotal text, Subtotal amount text |
| Discount field and apply button | Discounts > Design |
| Order note field | Order note > Design |
| Timer and announcement bar background | Timer or Announcement bar > Design > Background color |
| Timer and announcement text colour | The section's Settings: select the text in the message editor |
| Empty cart icon colour | Settings > Empty cart > Icon size and color |
Text is white or invisible on your store
If a text colour looks right in the editor but is white or missing on your store, your theme's CSS is winning. Send us your store URL, or add a rule in Custom CSS with !important, for example:
[data-essential-cart-element="line-item-title"] { color: #111111 !important; }
See Custom CSS and HTML Reference for every selector.
Custom CSS: for anything without a setting
- Open the Design section of the editor.
- Open the Custom CSS card.
- Add your rules and save.
Tip: check your live store after saving to confirm the rule applies.
Not comfortable writing CSS? Send us the change you want and a screenshot, and we'll send you the snippet.
Things that need custom CSS today
These have no setting yet. We're happy to supply the snippet:
- Product image aspect ratio (for example portrait instead of square), and removing white backgrounds from transparent images.
- A larger cart title, or uppercase product titles.
- Checkout button text size and weight.
- A separate header background colour.
Changes not showing on your store?
- Make sure you clicked Save.
- Check that you edited the Design tab of the right section.
- Hard-refresh your store, or check in an incognito window.
- If your theme's CSS overrides a colour, custom CSS with a more specific selector fixes it. Contact our support team if you're stuck.