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).
Where to Find It
Go to:
Upcart > 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
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; }