> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> Add custom CSS to fine-tune your Aftersell Cart beyond the built-in design settings.

When the built-in [design settings](/aftersell/cart/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.

<Note>
  You'll see `cart-internal-*` classes in the markup, including in every block's default [custom template](/aftersell/cart/custom-templates). 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](/aftersell/cart/custom-templates#styling-a-custom-template) for which classnames to keep and which to drop.
</Note>

## 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`](/aftersell/cart/sdk-overview#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](/aftersell/cart/design-settings) are simpler and safer, so reach for custom CSS only for what they don't cover.

## Where to go next

* **[Design settings](/aftersell/cart/design-settings)**: the built-in styling controls, and the first thing to try.
* **[Custom templates](/aftersell/cart/custom-templates)**: replace a block's markup entirely when CSS alone can't get there.
* **[Cart SDK](/aftersell/cart/sdk-overview)**: for behavior rather than appearance.