# Where do I put custom CSS for a bundle or the cart drawer?

> Where to paste your own CSS for bundles and the cart drawer, the limits, and why theme CSS doesn't reach the drawer.

Add your own CSS in the editor of a bundle or cart. Bundles use **Custom Styles** at the bottom of the **Fine-tune styling** card on the **Style** tab, with a choice of **All deals** or **This deal**. The cart drawer uses **Custom styles** under **General** → **Styles**. Changes show in the preview right away.

## Bundles

1. In Shopify admin, open **Apps** → **Section Store** → **Bundles**.
2. Open the bundle you want to style.
3. Open the **Style** tab, then expand the **Fine-tune styling** card.
4. Scroll to the bottom to **Custom Styles** and turn it on.
5. Choose **All deals** (every bundle in your store) or **This deal** (only this bundle).
6. Paste your CSS in the editor. Watch the preview.
7. Click **Save**.

## Cart drawer

1. In Shopify admin, open **Apps** → **Section Store** → **Cart Drawer**.
2. Open your cart.
3. Switch to **Settings**, not **AI assistant**.
4. Under **General**, open the **Styles** card.
5. Scroll to **Custom styles** and turn it on.
6. Paste your CSS, check the preview, then click **Save**.

Cart drawer CSS is one box for the whole drawer. There is no **All deals** or **This deal** choice.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/6ae11b71ea5444c078d85419/import/1793138059747-file-FljRZcfC8W.gif)

## Limits

- Each CSS box holds up to 20,000 characters.
- `@import` lines are removed. Use plain rules.
- You can save CSS on a draft without Plus. Shoppers see it once the bundle or cart is live, and that needs Plus.
- In an A/B test, custom CSS is shared by every version.

## Tips

- Add one rule at a time so you can see what changed.
- Target Section Store classes, not your whole theme. The boxes show an example, such as `.bundle-header` or `.cart-title`.
- Custom CSS is for tweaks. If a widget changes later, a selector may stop working. We can't promise that yours will keep working.
- Try settings first. Colors, sizes and spacing are on the **Style** tab on bundles, and in **Styles** on the cart.
- For visual changes without code, use **Customize with AI** on bundles or the **AI assistant** tab on the cart.

## If it doesn't work

- **CSS in your theme files doesn't change the drawer.** The drawer sits in its own isolated layer, so theme CSS can't reach it. Paste your rules into **Custom styles**.
- **Nothing changes after Save.** Check that the switch is on. Then reload your store.
- **The editor says your settings are too large to save.** Shorten your CSS.

## Related

- [Bundles support guide](https://section-store.orka.help/a/support-guide-bundles)
- [Cart drawer support guide](https://section-store.orka.help/a/support-guide-cart-drawer)
- [Does Section Store work with other apps?](https://section-store.orka.help/a/does-section-store-work-with-other-apps)

*Also searched as:* custom css, css, add css, own css, custom code, edit code, bundle css, cart drawer css, custom styles, css editor, where to put css, css not working, css not applying, all deals, this deal, global css, css per bundle, target class, class name, css selector, section store class, preview css, save css, css disappeared, css stopped working, override style, cannot edit code, developer css, theme css not reaching cart drawer, css character limit, @import removed, where do i put css for bundle, custom css bundle block, css for bundle, bundle block css, css for the bundle widget