> ## 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 HTML

> Add custom HTML or JavaScript to your cart using the built-in HTML editor.

The **Custom HTML** section in Upcart allows you to insert custom code into various parts of the cart drawer.\
You can also write JavaScript using `<script>` tags, and interact with the cart using Upcart's [Public API](https://www.notion.so/rokt/UpCart-Public-API-306ee2db860881feb300f0e09d08048f) (e.g., `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

## **Where to Find It**

Go to: **Cart Editor > Settings > Custom HTML**

## **How It Works**

The **HTML Location** dropdown lets you choose where the code will appear inside the cart layout. Based on your selection, the code will be injected into the corresponding cart area.

You can use this to add:

* Custom messages
* Trust text
* App integrations
* Analytics snippets
* Styling hooks
* Promotional content, such as banners with personalized offers or discounts
* Product guarantees that build customer confidence

## **Dynamic Tokens**

You can use the following token inside any Custom HTML field to inject live cart data:

| Token                 | What it renders                                               |
| --------------------- | ------------------------------------------------------------- |
| `{{UPCART_SUBTOTAL}}` | The current cart subtotal, formatted in your store's currency |

**Example:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

This token works in all HTML location fields except **Scripts (Before Load)**, where you should use the JavaScript API instead. This is the only dynamic token available in Custom HTML fields.

## **Available HTML Locations**

|                                        |                                                                                                                        |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Location                               | Description                                                                                                            |
| **Above announcements/rewards**        | Top of the cart, below the cart header.                                                                                |
| **Below header/announcements/rewards** | Immediately under any announcements or reward bars.                                                                    |
| **Between each line item**             | Injected under every product in the cart.                                                                              |
| **Above footer/add-ons**               | Below cart items and upsells, above add-ons.                                                                           |
| **Above checkout button**              | Inside the footer, directly above the checkout button and subtotal.                                                    |
| **Below checkout button**              | Inside the footer, directly below the checkout button.                                                                 |
| **Bottom of cart**                     | At the very bottom of the drawer (outside footer).                                                                     |
| **On empty cart screen**               | Displayed beside the “Your cart is empty” text.                                                                        |
| **Scripts (Before Load)**              | Invisible area to run JavaScript **before** the cart loads. Ideal for tracking, conditional logic, or custom behavior. |

## **Custom CSS (Optional)**

You can style your HTML using the **Custom CSS** editor found under:\
**Upcart > Cart Editor > Settings > CSS**

For example, to adjust empty cart alignment:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```