# Change the cart drawer colors and style

> Match the drawer to your store with a color preset, button corners and image style. Fonts follow your theme.

Open **General** → **Styles** in the cart editor. Pick a color preset, then fine-tune. New carts start on **Your store**, which uses your theme's colors and button corners. Fonts always follow your theme.

## Change the look

1. In Shopify admin, open **Apps** → **Section Store** → **Cart Drawer**.
2. Click **Edit** on your cart.
3. Under **General**, open **Styles**.
4. Pick a **Color presets** tile: **Your store**, **Classic**, **Slate**, **Pearl**, **Sand**, **Rose** or **Bloom**. The preview updates.
5. Pick a **Size presets** tile: **Compact**, **Balanced** or **Spacious**.
6. Set **Background** and **Button radius**.
7. Set **Image ratio**, **Image radius** and **Image style**.
8. Click **Save**.

## Your store preset

**Your store** reads your theme's colors. Turn on **Use gradients** next to it to add soft gradients.

If we can't read your theme, new carts start on **Classic**.

## Colors of one block

Each block has its own color fields on its card. A preset sets them all at once. Change a block's card afterwards to fine-tune it.

## Fonts

The drawer uses your theme's font. There is no font picker in the editor.

## Your own CSS

Turn on **Custom styles** at the bottom of **Styles**. It is one CSS box for the whole drawer, up to 20,000 characters.

The drawer sits in its own isolated layer. CSS in your theme's files can't reach it. Use **Custom styles** instead.

## If it doesn't work

- **Your theme's CSS has no effect:** that is expected. Use **Custom styles**.
- **Custom styles do nothing:** check that the switch next to **Custom styles** is on.
- **The change doesn't show on the storefront:** click **Save**, then reload in a private window.

## Related

- [Change the cart drawer width and position](https://section-store.orka.help/a/change-the-cart-drawer-width-and-position)
- [Change your cart with the AI assistant](https://section-store.orka.help/a/change-your-cart-with-the-ai-assistant)
- [Add custom HTML to the cart drawer](https://section-store.orka.help/a/123-add-custom-html-to-the-cart-drawer)

*Also searched as:* cart colors, cart colours, cart drawer design, cart drawer styling, cart font, change cart font, button radius, rounded buttons in cart, color presets, match theme colors, dark cart, theme css not affecting cart, gradient background, product image ratio