Hype Cart

Custom text and custom HTML

Updated Sep 10, 20263 min read

Two modules let you put your own content in the drawer. Custom text takes a line or paragraph of plain text; Custom HTML takes markup. They are the only modules you can add more than once — the module list numbers them (Custom text 1, Custom text 2) so you can tell them apart — and both can go in any region.

Neither is included in a new cart. Add one with the + button on a region header.

Custom text

Type into the module's Text field. It renders centred, in the drawer's muted small type, with your line breaks preserved.

The field understands two pieces of markup and nothing else:

  • **bold** renders bold.
  • *italic* renders italic.

Everything else is printed as written. HTML tags typed here appear as text, which is the point — this module can't break your drawer's layout.

Good uses: a dispatch cut-off ("Order before 2pm for same-day dispatch"), a returns line, a note about a holiday shipping delay.

Custom HTML

Type into the module's HTML field. The markup is rendered as-is, including inline <style> and <script>.

Limit: 16,000 characters per block. Saving a longer block is rejected with "Custom HTML is too long". If you need more, split it across two blocks — but see the publishing limit below first.

Three things that will surprise you

Scripts do not run in the editor preview. The preview deliberately strips <script>, framed embeds, on* handlers and javascript: links before rendering. To test anything script-driven you have to activate the cart and look at your storefront.

Third-party embeds that search the page for their own container will not find it. The drawer renders inside a shadow root, so document.querySelector, document.getElementById and document.currentScript cannot see anything inside the block. A widget whose snippet reads "paste this div, then this script finds it" will paste, run, find nothing, and silently do nothing. There is no setting that changes this.

Scripts run once per page load. They are executed the first time the block's markup appears and not again when the cart changes or the drawer reopens, so they cannot double-fire — but a script that expects to re-run on every cart change will not.

What does work

Code that calls out globally rather than looking around the page: analytics pixels, fbq(...), dataLayer.push(...), a fetch to your own endpoint. Plain markup, images, links and inline styles all work normally.

Please treat it as code

The drawer runs whatever you paste on your own storefront, with the same access as any script in your theme. Only paste code you understand or trust, and test on your storefront before activating for everyone.

The publishing limit

Everything in a cart — every module, all its text and every translation — is published together. If the total gets too big, saving fails with "Too much content to publish (xKB of 100KB). Shorten or remove some blocks." Custom HTML is almost always the cause. Shorten the markup, move bulk into an external file, or drop a block.

Translation and A/B testing

Both modules' content is treated as text, so both can be translated per language and both can be changed per A/B variant. Auto-translate empty is deliberately not offered on the HTML field — machine translation mangles markup. Translate HTML by hand.

Related articles

Still need help?

Start a chat and we'll pick it up right here.