You can add custom HTML or JavaScript in specific parts of your cart to fine-tune your design or functionality. This article explains what each location does and shows where inserted content will appear in the cart.
📍 HTML Location Options
Above Announcements/Rewards
Renders directly under the cart header, before anything else.
Appears above both the Announcements and Rewards modules.
Below Header/Announcements/Rewards
Displays right below the Announcements and Rewards modules, but before the cart items.
Between Each Line Item
Inserts your HTML at the bottom of each cart item.
For example, if there are 4 items, the content will appear 4 times — once under each item.
Useful for things like notes, disclaimers, or repeated messages.
Above Footer/Add-ons
Renders below the cart items and just above the Add-ons module.
Above Checkout Button
Displays in the footer, just above the checkout button and below any discounts.
Below Checkout Button
Also in the footer, but below the checkout button and just above the Add-ons module.
Bottom of Cart
Displays outside the footer at the very bottom of the cart.
Note: This will not use the footer’s background color, so styling may appear different.
On Empty Cart Screen
Only shows when the cart is empty.
Displays just above the "Your cart is empty" message.
Scripts (Before Load)
This option is not visually rendered.
Use it to insert custom JavaScript. Scripts must be wrapped in a
<script>tag and will run before the cart finishes loading.
🖼️ Visual Reference
Here’s an overview of where each location maps to in the cart layout:
