# Add custom HTML to the cart drawer

> Add your own HTML and CSS in the cart body, the footer or the empty cart, with no theme edits.

Add a **Custom HTML** block to put your own HTML and CSS in the cart body, the footer or the empty cart. You don't edit your theme. Scripts run on your storefront but not in the editor preview.

## Add a Custom HTML block

1. In Shopify admin, open **Apps** → **Section Store** → **Cart Drawer**.
2. Click **Edit** on your cart.
3. For the empty cart, open the **Preview** card and click **Empty cart**. For the body or footer, stay on **Filled cart**.
4. Click **Add block** under **Body** or **Footer**. With **Empty cart** on, there is one **Add block**, under **Body**.
5. In **Add cart block**, pick **Custom HTML**. The card starts with its switch on.
6. Click the card to open it.
7. Fill in **HTML** and **CSS**.
8. For the empty cart, set **Placement**: **Top of cart**, **After title**, **Bottom of cart**, **Above button** or **Below button**.
9. Click **Save**.

## Limits

- **HTML:** up to 50,000 characters.
- **CSS:** up to 20,000 characters.
- One block per area, so three in all.

## Good to know

- Scripts run on your storefront. They stay inactive in the editor preview.
- The CSS box here styles this block. **Custom styles** is the CSS box for the whole drawer.
- The block shows only in its own state. Body and footer blocks show with items in the cart. The empty cart block shows with no items.
- HTML doesn't change a reward or a price at checkout.
- Your text isn't on the **Translations** page. To show other languages, use your own code.

## Remove a block

Click **Delete section**, the trash icon on the block's card, then click **Save**.

## If it doesn't work

- **The block doesn't show:** check that you added it to the state you are viewing, and that its switch is on.
- **A script doesn't run in the preview:** that is expected. Test on your storefront.
- **Your CSS doesn't apply to other parts of the cart:** use **Custom styles** under **General** → **Styles**.

## Related

- [Change the cart drawer colors and style](https://section-store.orka.help/a/change-the-cart-drawer-colors-and-style)
- [Change the empty cart drawer](https://section-store.orka.help/a/change-the-empty-cart-drawer)
- [Cart drawer public API (SectionStoreCart)](https://section-store.orka.help/a/127-cart-drawer-public-api-sectionstorecart)

*Also searched as:* custom html, add html to cart drawer, cart drawer html, custom code cart drawer, add code to cart, insert html, html block, custom block cart drawer, cart footer html, cart body html, empty cart html, add script cart drawer, script not running, script not working in preview, cart drawer placement, above button, below button, after title, top of cart, bottom of cart, html not showing cart drawer, remove custom html