Addy 
Addly 
Goalify 
Monet 
Reviso 
Key takeaways
- A cart drawer that does not match the theme reads as an app, and shoppers discount apps. Match background, type, radius and button colour first.
- Pull tokens from the theme, do not invent a second palette. If the store is warm and rounded, the drawer cannot be cold and sharp.
- The checkout button should be the loudest element in the drawer. Everything else is supporting cast.
- Custom CSS is a last resort. If you need more than a dozen lines, the design tokens are wrong.
The fastest way to make a cart drawer convert less is to let it look like software. Shoppers have a well-trained eye for third-party widgets: the slightly wrong radius, the font that is almost Inter but not the one the rest of the site uses, the checkout button in a blue the brand never uses.
A drawer is supposed to feel like a continuation of the page. If it does not, the shopper treats it as a detour.
Four tokens, in order
Match these before you touch anything else:
- Background. Same as the page, or one step sunken. Not a new colour.
- Typeface and size. The heading in the drawer should be the same family and roughly the same scale as a section heading on the product page.
- Radius. If your buttons are pills, the drawer corners and the checkout button are pills. If your theme is 4px, do not ship 16px.
- Primary button colour. The checkout button is the brand's primary CTA, not the app's default.
Get those four right and the drawer disappears into the store. Get them wrong and no amount of upsell logic will make it feel native.
The checkout button is the design
Everything in the drawer exists to support one action. Progress bars, upsells and trust badges are useful; they are not the hero. If the checkout button does not win the visual hierarchy, you have decorated a form.
A useful check: screenshot the open drawer and blur it. You should still be able to point to the checkout button. If you cannot, increase contrast, size or isolation — not the number of badges around it.
What not to customise
Do not add a second logo in the drawer header. Do not add a decorative illustration. Do not change the overlay into a branded colour wash. These are the tells that someone "designed the app" instead of continuing the store.
Custom CSS is for the last 5%: a one-pixel border, a font-feature setting, a focus ring. If you are writing a stylesheet, the settings model failed.
Markets and multiple carts
If you run Shopify Markets, the drawer has to survive more than one theme accent. The durable approach is to inherit tokens per market rather than hard-coding a single brand colour. A US storefront on a warm palette and a JP storefront on a cooler one should not share a hex code just because they share an app.
Frequently asked questions
Do I need to edit theme.liquid to brand the cart?
Not with a theme app extension. Colours, fonts and radii should be settings in the app, mapped to your theme's existing tokens. If an app requires a Liquid edit to change a button colour, it is the wrong app.
Should the drawer be light or dark?
Match the storefront. A dark drawer on a light store looks like a takeover, not a continuation. The one exception is a store that already uses a dark header or a dark product page.
How close does the match need to be?
Close enough that a screenshot of the open drawer could be mistaken for a native theme section. If a designer on your team can spot the app in under two seconds, shoppers can too.
What about the overlay behind the drawer?
Keep it quiet. A heavy dim or a blur that kills the product page behind it undoes the continuity that made you choose a drawer in the first place.
