Skip to main content
When the built-in design settings don’t go far enough, add your own custom CSS to style the cart.

​
Where to add it

In the cart editor, open Cart settings → Custom CSS. Your CSS applies to the whole cart and is loaded after the cart’s base styles, so your rules take precedence.

​
Target public classes only

Style the cart using its public cart-external-* classes. The editor autocompletes these and warns you off the rest:
  • cart-external-*: the public, supported target. Use these. They carry no styling of their own, so they exist purely for your CSS to hook onto.
  • cart-internal-*: the cart’s own plumbing, where all of its built-in styling lives. The editor flags selectors against them as errors. They aren’t churned casually, since every existing cart depends on them, but they’re the cart’s to change rather than a contract with you. Restyle through the cart-external-* twin instead.
  • Other cart-* classes the editor doesn’t recognize are flagged as warnings.
You’ll see cart-internal-* classes in the markup, including in every block’s default custom template. That’s expected: they’re what gives a block its built-in look. The rule here is about selectors you write in this panel, not classnames the cart renders.If you’re writing a custom template that changes a block’s DOM structure, see Styling a custom template for which classnames to keep and which to drop.

​
Shadow DOM: the cart is self-contained

On the storefront, the entire cart renders inside its own shadow DOM. This means:
  • Your theme’s CSS can’t leak into the cart, and the cart’s CSS can’t leak out, so your custom CSS is automatically scoped to the cart and won’t clash with the rest of your site.
  • Your selectors should reference elements and classes inside the cart. Selectors aimed at page elements outside the cart won’t reach in.
The same boundary applies to JavaScript: document.querySelector can’t see into the drawer either. A script reaching for a cart element has to go through shadowRoot, and it targets these same cart-external-* classes.

​
When to use design settings instead

For colors, radii, spacing, and width, the built-in design settings are simpler and safer, so reach for custom CSS only for what they don’t cover.

​
Where to go next

  • Design settings: the built-in styling controls, and the first thing to try.
  • Custom templates: replace a block’s markup entirely when CSS alone can’t get there.
  • Cart SDK: for behavior rather than appearance.