How to Add Custom HTML Blocks to Cart Drawer
A Custom HTML block puts your own content into the cart drawer: trust badges, a "View cart" link, a delivery note, a payment message. Use it for anything the built-in sections don't cover.
Check for a built-in setting first
Several things merchants used to build with HTML are now settings:
| You want | Built-in setting |
|---|---|
| Your logo in the cart header | Settings > Header > Show image |
| A terms checkbox before checkout | Checkout button > Require agreement before checkout |
| A gift message or delivery note field | Order note |
| A free shipping or reward message | Spend tiers |
| A message bar at the top | Announcement bar or Timer |
Add a block
- In the editor's left menu, below the cart sections, click Add custom HTML.
- Enter a Name. Only you see it.
- Paste your code in HTML content.
- Switch the block on with its toggle and click Save.
Drag the block in the left menu to place it anywhere in the cart, for example right under the subtotal. You can add as many blocks as you need. Set spacing around a block on its Design tab.
Tip: custom blocks may not render in the editor preview. Check your live store after saving.
What works inside a block
| Works | Doesn't work |
|---|---|
| HTML with inline styles | Shopify Liquid, like {{ cart.total_price }} |
| Images and links | A separate mobile version. Use CSS media queries instead |
<script> tags. They run when the block shows |
|
| Translations per language, in the block's Translations card |
Scripts can use the drawer's events and API. For example, listen for the essential-cart:before-checkout event on document and call event.preventDefault() to stop checkout. The event is synchronous, so a check that waits for a response cannot pause it. See JavaScript API, Events and URL Parameters.
Popular uses
- Trust badges: free shipping, secure payment, money-back guarantee
- A "View cart" link to your full
/cartpage under the checkout button - A line under the subtotal, like Taxes and shipping calculated at checkout
- A link to a collection, like Continue shopping
- A short note linking to your policies
Example: trust badge row
Example trust badge row. Paste this into HTML content:
<div style="display:flex;gap:12px;justify-content:center;padding:8px 0;font-size:13px;color:#555;">
<span>🚚 Free shipping over $50</span>
<span>🔒 Secure checkout</span>
</div>Save and check your live store.