Skip to main content
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: 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

​
Available HTML Locations

LocationDescription
Above announcements/rewardsTop of the cart, below the cart header.
Below header/announcements/rewardsImmediately under any announcements or reward bars.
Between each line itemInjected under every product in the cart.
Above footer/add-onsBelow cart items and upsells, above add-ons.
Above checkout buttonInside the footer, directly above the checkout button and subtotal.
Below checkout buttonInside the footer, directly below the checkout button.
Bottom of cartAt the very bottom of the drawer (outside footer).
On empty cart screenDisplayed 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; }