Custom HTML

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 (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:

<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:

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Where to Find It

How It Works

Dynamic Tokens

Available HTML Locations

Custom CSS (Optional)

​Where to Find It

​How It Works

​Dynamic Tokens

​Available HTML Locations

​Custom CSS (Optional)

Where to Find It

How It Works

Dynamic Tokens

Available HTML Locations

Custom CSS (Optional)