Add custom HTML to the cart drawer

Add a Custom HTML block to put your own HTML and CSS in the cart body, the footer or the empty cart. You don't edit your theme. Scripts run on your storefront but not in the editor preview.

Add a Custom HTML block

1. In Shopify admin, open Apps → Section Store → Cart Drawer.
2. Click Edit on your cart.
3. For the empty cart, open the Preview card and click Empty cart. For the body or footer, stay on Filled cart.
4. Click Add block under Body or Footer. With Empty cart on, there is one Add block, under Body.
5. In Add cart block, pick Custom HTML. The card starts with its switch on.
6. Click the card to open it.
7. Fill in HTML and CSS.
8. For the empty cart, set Placement: Top of cart, After title, Bottom of cart, Above button or Below button.
9. Click Save.

Limits

• HTML: up to 50,000 characters.
• CSS: up to 20,000 characters.
• One block per area, so three in all.

Good to know

• Scripts run on your storefront. They stay inactive in the editor preview.
• The CSS box here styles this block. Custom styles is the CSS box for the whole drawer.
• The block shows only in its own state. Body and footer blocks show with items in the cart. The empty cart block shows with no items.
• HTML doesn't change a reward or a price at checkout.
• Your text isn't on the Translations page. To show other languages, use your own code.

Remove a block

Click Delete section, the trash icon on the block's card, then click Save.

If it doesn't work

• The block doesn't show: check that you added it to the state you are viewing, and that its switch is on.
• A script doesn't run in the preview: that is expected. Test on your storefront.
• Your CSS doesn't apply to other parts of the cart: use Custom styles under General → Styles.

Related

• Change the cart drawer colors and style
• Change the empty cart drawer
• Cart drawer public API (SectionStoreCart)

Also searched as: custom html, add html to cart drawer, cart drawer html, custom code cart drawer, add code to cart, insert html, html block, custom block cart drawer, cart footer html, cart body html, empty cart html, add script cart drawer, script not running, script not working in preview, cart drawer placement, above button, below button, after title, top of cart, bottom of cart, html not showing cart drawer, remove custom html