Modules

Custom HTML

Put your own wording, links and images into the cart drawer, using a small, safe set of HTML tags.

What it is

Custom HTML is a block you fill with your own markup. It renders inside the cart drawer, in the position you put it in.

It is the escape hatch for the things no other module covers. For example:

A shipping cut-off notice — “Order by 2pm for same-day dispatch.”
A line about returns, sizing or a delivery delay.
A link to a page on your store, such as your returns policy.
A small image, such as a payment or delivery graphic you already host.

Use a purpose-built module instead where one exists — an announcement bar for rotating messages, trust badges for reassurance icons, a countdown timer for a clock. They do more than markup can, and they are styled to match your drawer already.

What you paste is cleaned before a shopper sees it. Anything that can run — scripts, onclick-style handlers, javascript: links, embedded frames — is removed. This block cannot be used to add tracking, a chat widget or a third-party embed to the cart.

Set it up

In the app, open Carts and click into your cart to open the cart builder.
Scroll to Add a module, choose Custom HTML from the list, and press Add. It is added at the bottom of the cart body.
Use the up and down arrows next to the module to move it where you want it in the drawer.
Press Settings on the module and type or paste your markup into Your HTML.
Press Save. If anything in your markup will be removed, you get a red banner listing exactly what and why, and nothing is saved until you fix it.
Press Open preview at the bottom of the settings screen to see the block in a real drawer.
Go back to the cart builder and press Review and publish. Nothing reaches a shopper until you do. See Publishing and rollback.

Settings

Setting	What it does
`Your HTML`	The markup that renders in the drawer. An eight-row text box. The help text under it reads: “Scripts, event handlers and javascript: links are removed before a shopper sees this. Anything else is yours.” Leave it empty and the block renders nothing.

That is the whole module. There is no separate heading, colour or spacing setting — the markup you write is the block.

What survives, and what does not

Tags you can use

These render as you wrote them:

p, br, hr, span, div, strong, b, em, i, u, small, ul, ol, li, h2, h3, h4, a, img.

Tags that are not on the list

Any other tag is unwrapped rather than deleted: the tag disappears and the text inside it stays. So a paragraph wrapped in a <section> still shows its words. A <table> loses its grid and leaves the cell text running together, so build lists with <ul> instead.

Nine tags are removed completely, with everything inside them, because keeping the contents would paste code into the page as text: script, style, iframe, object, embed, template, noscript, link, meta, base and title.

Attributes

Only these are kept:

class, title, dir and lang on any tag.
href, target and rel on a link.
src, alt, width, height and loading on an image.

Everything else is dropped, including style, id and any data- attribute. Style your block with classes and the Custom CSS screen instead.

Links and images

Addresses may start with https:, http:, mailto: or tel:, or be a path on your own store such as /pages/returns. Anything else in a href or src is dropped and the rest of the tag still renders.
data: addresses are not allowed, so you cannot paste an image inline as a long string. Upload it to your store or Shopify’s CDN and link to it.
A link with target="_blank" automatically gets rel="noopener noreferrer" added. You do not need to type it.

What the save screen tells you

Save is where you hear about a problem, because a shopper’s page is the wrong place to explain one. You get a named message for a <script> tag, an <iframe>, <object> or <embed>, a <style> block, an event handler such as onclick, a javascript: link, a <form>, and for markup longer than 20,000 characters.

Styling the block

The drawer renders in a shadow root. In plain terms: your theme’s stylesheet cannot reach inside it, so markup that looked right when you tested it on a product page will arrive here unstyled.

Put your own class names on your markup — class is one of the attributes that survives — then style them on the Custom CSS screen, reached from See it and style it in the cart builder.

The CSS screen warns you when a rule targets a class name we do not promise to keep stable. If the class is one you invented in your own Custom HTML block, that warning does not apply to you — the message says so.

Where it appears

The block lives in the body of the drawer, alongside the cart items and the other body modules, and you move it with the up and down arrows. It cannot be placed in the header or below the checkout button — those positions are fixed.

By default the block shows to every shopper whenever it is switched on. A display rule can narrow that, for example to carts over a certain value or to one country. Display rules are part of the Launch plan and above. Press Add a display rule on the module’s settings screen.

Limitations

Inline styles are removed with no warning. A style="..." attribute is stripped and the save screen does not mention it, so your block can save cleanly and still render plain. Use classes and Custom CSS.
id and data- attributes are removed too, also silently.
No forms or form controls. A <form> is refused at save, and input, button, select and textarea are not on the allowed list, so they vanish. There is no way to collect anything from a shopper through this block.
No tables, videos or embeds. They are not on the allowed list.
No scripts of any kind, which means no tracking pixels, no chat widgets and no third-party snippets in the cart.
No variables. Your markup is shown exactly as typed. You cannot insert the cart total, the shopper’s name, a product or a countdown.
Not translated. Every shopper sees the same text you typed, in every market and language.
20,000 characters. Save warns you above that. On the storefront, anything past that point is cut off.
One block per cart. You can add a second Custom HTML module, but both blocks will render the contents of the first one. If you need two separate pieces of markup in one drawer, combine them into a single block and place it once.
No preview inside the settings screen. To see what your markup actually looks like after cleaning, open Preview.

Saved but not showing? Changes only reach shoppers when you publish — see Publishing and rollback. If the block is published and still missing, check it against the allowed tags above, then Troubleshooting.