Why the cart should look like your store
The cart is one of the last things shoppers see before paying. If it looks like it belongs to a different website, with other fonts, colours or button shapes, it can feel less trustworthy at the exact moment you want shoppers to feel confident.
A well-styled drawer doesn't need to be fancy. It needs readable text, a clear checkout button, enough spacing on phones and colours that match the rest of your store.
- Match the theme's buttons: same colour, radius and font as your add-to-cart buttons.
- Keep text readable: titles and prices at a size people can read on a phone.
- Use spacing: Block spacing in Body and Footer keeps blocks from feeling crowded.
- One clear primary action: the checkout button should stand out more than anything else.
Your options on Shopify
A theme's built-in cart drawer usually follows your theme's colour scheme and typography, with a few cart settings in the theme editor. That's often enough. Deeper changes, like a different layout for cart items or new button arrangements, usually mean editing theme code. See Theme customizations for Dawn for an example of what a theme offers.
| What you want to change | Theme drawer | Nexora drawer |
|---|---|---|
| Colours and fonts | Theme colour schemes | Global styles plus per-block colours |
| Drawer width | Usually fixed | Cart width from 300 to 800 px |
| Item card layout | Usually fixed | Four Style options, six Quantity style options |
| Button layout | Usually fixed | Buttons direction and View cart style |
| Starting point | Your theme | Five templates |
Step by step: style the drawer
- Apply a template
In the Cart editor, set Preview to Main cart, click Design and choose a template under Templates. Confirm with Apply. A template replaces design settings (colours, typography, borders, shadows, padding) but keeps block content such as product lists, labels and conditions.
- Set the width and header
Adjust Cart width. Under Header, set colours, the Heading text and size, Close icon style (Background or Only icon) and Quantity/close border radius.
- Set global styles
Under Global styles, set the shared colours (background, text, solid button, outline button, shadow) and the font, border and shadow of buttons, inputs, images and popups.
- Style the toolbar
Under Extra, choose Show icon and text and a Style such as Button (rounded) for the toolbar buttons.
- Style cart items
Click Cart items and pick a Style (Classic, Compact list, Showcase or Price corner) and a Quantity style.
- Style the checkout buttons
In Cart buttons, choose Buttons direction and, if you show it, View cart style.
- Check both previews and save
Switch Preview to Empty cart and style that screen too, then click Save.
Templates and design settings
| Template | A good fit for |
|---|---|
| Minimal Light | Clean, neutral stores where the products do the talking. |
| Bold Pop | Playful brands with strong colours. |
| Premium Dark | Dark themes and luxury or evening-style brands. |
| Eco Natural | Earthy, natural or handmade product stores. |
| Tech Modern | Electronics, gadgets and crisp modern looks. |
| Design section | Options |
|---|---|
| Cart width | 300 to 800 px. |
| Header | Colours, Heading, sizes, Close icon style, radius. |
| Body / Footer | Background color and Block spacing. |
| Extra | Toolbar background, Show icon and text, Style, Item color, Item background. |
| Global styles | Shared colours, and fonts, borders and shadows for buttons, inputs, media and popups. |
In the Heading, use [quantity] to show the item count, for example Cart ([quantity]), or __[quantity]__ to show it as a small badge.
Example: matching an earthy homeware brand
- Template: Eco Natural as the starting point.
- Cart width: 440 px.
- Heading:
Your basket __[quantity]__. - Global styles: solid button colour set to the brand's olive green, matching the theme's buttons.
- Cart items: Style Showcase to show larger product photos; Quantity style Rounded pill.
- Cart buttons: Buttons direction Stacked — Checkout on top, View cart style Text link.
- Empty cart: a best-sellers Collection in a Slider and the Continue shopping button.
Finish by matching the floating button, so the whole cart experience feels consistent.
Tips and common mistakes
- Applying a template after styling: it replaces your design settings. Pick a template first, then fine-tune.
- Preview vs live store: the preview uses sample products, and your theme's fonts or custom CSS can change how the drawer looks live. Always check the store after saving.
- Too wide on desktop: a very wide drawer covers most of the page; somewhere around 380–480 px suits many stores.
- Low contrast checkout button: make it the most visible thing in the footer.
- Translations: the drawer's text can be translated for each published language on the Translations page.
- Advanced styling: if you need something the settings don't cover, use Advanced > Custom CSS.
New to the app? Start with adding a cart drawer to Shopify, or see every setting in the docs.
Frequently asked questions
Will a template delete my blocks or products?
No. A template replaces design settings such as colours, fonts, borders, shadows and padding. Block content like product lists, labels and conditions stays the same.
How many templates are there?
Five: Minimal Light, Bold Pop, Premium Dark, Eco Natural and Tech Modern.
Can I change the drawer width?
Yes. Cart width goes from 300 to 800 px.
Can I see changes before they go live?
Yes. The live preview updates as you edit. Nothing changes on your store until you click Save.
Can I add my own CSS?
Yes, in Advanced > Custom CSS/JS.
