Every colour control in the Colors section of the cart drawer editor. Each module also has its own colours, listed at the end. The drawer should look like part of your theme, so the fastest approach is to copy the hex values your theme already uses rather than choosing new ones.

In this article:

Cart body

Control	What it colours
`Cart Background`	The drawer's background
`Cart Text`	Body text
`Variant Text`	Variant names under each item

Prices and savings

Control	What it colours
`Compare at Price`	The crossed-out original price
`Saving Text`	The savings message
`Saving Background Color`	The background behind the savings message

Quantity controls

Control	What it colours
`Quantity Button Background`	The plus and minus buttons
`Quantity Text Background`	The number between them

Discount tags

Control	What it colours
`Discount Tag Background`	The tag background
`Discount Tag Text`	The tag text
`Discount Tag Icon`	The icon inside the tag

The footer and checkout button

Control	What it colours
`Cart Footer`	The footer area
`Close Button Color`	The drawer's close control
`Checkout Button Background`	The main button
`Checkout Button Text`	Its label
`Checkout Button Corner Radius`	Its corner rounding, not a colour but grouped here

⚠️ Check the contrast between Checkout Button Background and Checkout Button Text. A low-contrast checkout button is the most expensive accessibility mistake available in this editor, and it fails WCAG contrast requirements as well as losing sales.

Gradients

The savings background supports a gradient:

Control	What it does
`Use gradient for saving background`	Switches from a solid colour to a gradient
`Saving Gradient Start`	The first colour
`Saving Gradient End`	The second colour
`Saving Gradient Direction`	The direction

Directions available: Left to Right, Right to Left, Top to Bottom, Bottom to Top, Top Left to Bottom Right, Top Right to Bottom Left.

Module colours

Each module carries its own colour set, configured on that module rather than here.

Module	Colours it has
Announcement bar	Background, border, text, plus gradient support
Reward progress bar	`Bar Background Color`, `Bar Progress Color`
Shipping protection	`Heading`, `Switch`
Product upsells	`Section Background`, `Slide Background`, `Button Background`
Discount codes	Input background and text, button background and text, success message and background, error message

Getting a good result quickly

💡 Open your live storefront, use your browser's inspector or a colour picker to read the hex values your theme uses for its background, body text and primary button, and paste those three into Cart Background, Cart Text and Checkout Button Background. That alone makes the drawer look native.

Then adjust in this order:

The three basics above. Most of the visual match comes from these.
The checkout button text, so it contrasts properly against its background.
Accent colours for savings and discount tags. These should stand out, so pick something deliberately different rather than a shade of your background.
Module colours last, and only where a default clashes.

Check the result on a phone. Colours that read well on a large screen can be too subtle on a small one, particularly for the progress bar.

ℹ️ The preview shows unsaved changes, so you can try a palette, look at it against your real products, and undo it without saving.

Customizing cart drawer colours