Build your cart

Design and theme match

Set the drawer's colours, corner radius and typeface, and choose what the footer shows.

What the Design screen is for

The cart drawer is meant to look like the rest of your store, not like a separate app bolted on. The Design screen is where you set that: five colours, a corner radius and a typeface.

Everything on this screen is a starting value that the drawer falls back from safely. If you leave a field blank, the app uses its own default instead of storing an empty value. Nothing you change here reaches a shopper until you publish.

By default the drawer inherits your theme's typeface, so it already reads like your store before you change anything.

Open the Design screen

Go to Carts and open the cart you want to style.
Scroll to the See it and style it section.
Choose Design.
Change what you want, then choose Save at the bottom of the page.
When you are happy, go back to the cart and choose Review and publish.

After a save you see a green Saved banner that says: these changes go live the next time you publish. Until then your live drawer is unchanged.

The Colours section

These are the seven fields on the screen, in the order they appear.

Field	What it changes in the drawer	If you leave it blank
Accent colour	The checkout button, the empty-cart button, and the filled part of the rewards progress bar	The app's dark default is used
Text on accent	The words sitting on top of those filled buttons, and on the savings ribbon	White
Drawer background	The panel the cart sits on	White
Text colour	The drawer's text, and the faint track behind the progress bar	Inherited from your theme
Divider colour	The lines under the header and above the footer, the border around each cart line, and the borders on the discount field and variant picker	A light grey
Typeface	The font used throughout the drawer	The drawer inherits your theme's typeface — usually what you want
Corner radius	The roundness of buttons, product thumbnails, the discount field and the close button	`8px`

The screen shows the same hints next to the fields: "Buttons and highlights" under Accent colour, and "Usually white or near-black" under Text on accent.

Corner radius

Type a normal CSS length, such as 8px or 0px. The cart line cards use a slightly rounder corner than the number you set, so they still read as cards containing the buttons inside them.

Typeface

Leave this blank in almost every case. Blank means the drawer wears whatever font your theme already uses, which is the closest possible match at no extra cost.

If you do type a font name, the app only asks the browser to use a font your store already loads. The app does not download a font for you, so a name your theme does not already load will fall back to your theme's font.

The contrast warning

If the colours you type would make text hard to read, a yellow banner appears headed "Some text may be hard to read". It names the pair, the measured contrast ratio, the 4.5:1 minimum it fell short of, and a slightly darker version of your colour that would pass.

This is a warning, not a block. The app will not overrule a colour you typed on purpose — it is your brand. It tells you the number and offers the fix, and you decide.

The check covers two pairs only: your text colour against the drawer background, and your accent colour against the drawer background. It also only runs when both colours are six-digit hex values such as #1A1A1A. The suggested fix is always a darker version of your colour, so on a dark background it may have nothing useful to suggest.

What the footer shows

Below the colours are three switches. All three are on unless you turn them off, and the single Save button at the bottom saves them together with your colours.

Switch	What it controls
Savings row	The savings ribbon above the total. It only ever appears when there is an actual saving — a "You save $0.00" row reads as a broken discount, so it never shows on a cart with no discount.
Tax and shipping note	The small line above the checkout button saying tax and shipping are worked out at checkout.
Continue shopping link	The link under the checkout button. Where it goes is set under Settings; with no destination it simply closes the drawer.

Both sections are one form. Always use the Save button at the bottom — it submits your colours and your footer switches in the same go.

"Match my theme"

"Match my theme" is a template, not a button on the Design screen. You will find it on the Templates screen, marked Recommended, applied with the Use Match my theme button.

What it does today is important to understand: it does not copy your storefront colours yet. The part of the app that reads your live storefront and samples its colours is not switched on. When you apply the template you get a yellow banner that says so — "We haven't read your storefront colours yet, so we've used neutral ones" — with a button back to this Design screen to set them yourself.

What you do still get from it:

The drawer inherits your theme's typeface, so it already reads like your store.
A deliberately small set of modules is switched on, so nothing unexpected appears in your storefront right after install.
Neutral, readable default colours rather than a palette pretending to be yours.

So the reliable way to match your theme's colours right now is to type them into the five colour fields on this screen.

Applying a template over a cart you have already customised asks you first and lists exactly what it will replace, and it saves your current design as a restore point before it changes anything.

Details worth knowing

Editing marks the cart as customised

Saving anything on this screen flags the cart as customised. That means a newer version of a template is only ever offered to you, never applied on its own — the app will not restyle a live storefront behind your back.

Where the drawer opens from

The drawer slides in from the far side of the screen and takes up to 420 pixels of width, or the full screen on a narrow phone. On a right-to-left store it mirrors automatically: the panel, the slide direction and the progress bar all flip.

Things the drawer handles for you

Focus outlines are always visible for keyboard shoppers, and switch to white on your accent-coloured checkout button so the ring never disappears.
If a shopper has reduced motion turned on, the slide and the progress-bar animation stop.
In Windows high-contrast mode, elements that are only a background colour — the savings ribbon, the quantity pill, the progress bar — get real borders so they do not vanish.
Product images never overflow, however large the file.

Anything these fields do not cover

At the bottom of the screen, under "Beyond these settings", the Custom CSS button takes you to a screen where you can write CSS scoped to the drawer. That screen also lists the class names you can target, and checks your CSS when you save.

Limitations

Colour sampling is not running. "Match my theme" applies no colours today. You are told this in a banner when you apply it, and you set the colours yourself here.
You cannot choose which side the drawer opens from. The drawer itself can open from the left, but no screen in the app sets that choice, so every store gets the default side.
Drawer width is not a setting. It is fixed at up to 420 pixels, or full width on a narrow screen.
There is no live preview on this screen. To see your colours applied, save, then open Preview from the cart.
The app loads no fonts. The Typeface field can only name a font your store already loads.
The contrast check is partial. It looks at text and accent against the drawer background only, and only for six-digit hex colours.
Nothing here is live until you publish. Saving stores a draft; publishing is a separate, deliberate step.

Styled it the way you want? Check it in the preview, then go to Publish and version history to put it in front of shoppers. The progress bar you coloured with your accent is set up in Rewards bar.