Custom HTML & rich text blocks
Inject your own content into the Llama Cart with Custom HTML and Custom Text blocks — placement, limits, the built-in taxes note, styling, and recipes.
Beyond products, rewards, and announcements, the Llama Cart lets you drop your own content into the drawer using two block kinds: Custom Text (formatted rich text) and Custom HTML (raw markup). Use them for trust badges, urgency banners, legal notes, promo images on the empty cart, and anything else your store needs. This guide covers both block kinds in depth — where they can live, the limits, the taxes note that ships with every cart, how to style them, and the edge cases to watch for.
The two block kinds
When you add a block to the cart, you choose between two kinds. They behave the same way in the cart (placement, ordering, visibility) — the difference is purely how you author the content.
| Block kind | Add-list label | How you edit it | Best for |
|---|---|---|---|
| Custom Text | Custom Text | A formatting editor (bold, alignment, links, color) | Headlines, short paragraphs, simple promos — no code |
| Custom HTML | Custom HTML | A raw HTML code editor | Badges, images, banners, anything needing custom markup or inline styles |
Choose Custom Text when you just want formatted words and you don't want to touch code. Choose Custom HTML when you need an image, a custom layout, inline CSS, or markup the rich-text editor can't produce. They're separate block kinds with separate limits, so using one doesn't reduce how many of the other you can add.
Where blocks can appear (origin)
Every Custom HTML and Custom Text block has an origin — the area of the cart it belongs to. You pick the origin implicitly by which Add Block button you use, since each cart area has its own. There are three origins:
| Origin | Where it shows | Visible when |
|---|---|---|
| Body | In the main scrolling area of the cart, mixed in with line items, upsells, rewards, and announcements | The cart has items |
| Footer | At the bottom of the cart, alongside the footer buttons, express payments, and order note | The cart has items |
| Empty cart | In the empty-cart state | The cart is empty |
Body blocks interleave by order
Body blocks don't sit in a fixed spot — they take their place in the cart based on a shared order value, interleaving with every other body element (line items, upsell campaigns, announcements, rewards). A body block with a low order renders near the top; a higher order pushes it down. Drag the block in the customizer to change where it lands relative to the other body content.
Footer blocks stack with the footer controls
Footer blocks share the footer with the cart's built-in footer pieces, and everything in the footer is ordered by the same order value. The default footer stack is:
| Order | Footer element |
|---|---|
1 | Order note |
2 | Footer buttons (View Cart / Checkout) |
3 | Express payments |
4 | Taxes note (the built-in Custom HTML block) |
A footer Custom HTML or Custom Text block you add takes a place in this same sequence by its order value. Give it an order below 2 to sit above the buttons, or leave it after 3 to sit below the payments.
Empty-cart blocks only show on the empty cart
Empty-cart blocks render only when the cart has no items, as part of the empty-cart state. They never appear once the shopper adds something, so they're the right place for "your cart is empty" promos, a featured-collection teaser, or a shop-now image — content that should encourage a shopper to start a cart, not interrupt one in progress.
A block's origin is fixed when you create it from a given cart area's Add Block button. A block added to the body won't appear in the footer or on the empty cart, and vice versa. If you put content in the wrong place, delete the block and re-add it from the correct area.
Add a block
Open the Customizer
Go to Customizer in the sidebar and open the Llama Cart version you want to edit.
Find the right cart area
Decide whether the content belongs in the body, the footer, or the empty cart, and locate the Add Block control for that area. (In the body, the control reads Add Upsell/Block since the same menu also adds upsell campaigns.)
Pick the block kind
Open the add menu. Under the blocks list, choose Custom Text for formatted text or Custom HTML for raw markup.
Add your content
Type your text into the formatting editor (Custom Text) or paste your markup into the HTML editor (Custom HTML).
Turn the block on
New blocks are hidden by default. Switch the block's visible toggle on so it shows in the cart, then preview it.
Reorder and save
Drag the block to position it relative to the other cart content, then save the version.
Every new Custom HTML and Custom Text block starts hidden. If you add a block and it doesn't appear in the preview, turn on its visible toggle — an empty/hidden block renders nothing.
Limits
Each cart configuration allows:
- Up to 10 Custom HTML blocks
- Up to 10 Custom Text blocks
The two limits are independent (10 each, counted per origin within the add menu), so you can have both kinds in the cart at once. When you reach the limit for a kind, that option in the Add Block menu becomes disabled — you'll need to delete an existing block of that kind before you can add another.
Ten of each kind is far more than most carts need. If you're bumping into the limit, consider consolidating several blocks into one Custom HTML block, since a single block can contain as much markup as you like.
The built-in taxes note
Every brand-new Llama Cart ships with one footer Custom HTML block already in place — the taxes note. Its content is:
<p style="text-align: center; font-size: 13px;">Taxes and shipping will be calculated at checkout</p>It's a footer block, it's visible by default, and it sits at order 4 — so it renders last in the footer, after the order note (1), footer buttons (2), and express payments (3).
Edit or remove it
Because it's an ordinary Custom HTML block, you manage it like any other:
- Reword it — open the block and edit the HTML (for example, change the wording for your region or remove "shipping" if you offer free shipping).
- Restyle it — adjust the inline
style(font size, color, alignment) or wrap it in your own markup. - Hide it — switch its visible toggle off to keep it but stop showing it.
- Remove it — delete the block entirely if you don't want a taxes note.
Many regions require a "taxes calculated at checkout" style disclaimer. Before you delete or hide the taxes note, confirm you're not removing a notice your market needs. Editing the wording is usually safer than removing the block.
Ordering and visibility
Three properties control how every block behaves, and they apply identically to Custom HTML and Custom Text blocks:
| Property | What it does | Default |
|---|---|---|
| order | The block's position in its area, shared with all other elements there. Lower renders earlier. | 0 for new blocks |
| visible | Whether the block renders at all. | Off (hidden) for new blocks |
| origin | Which area the block belongs to (Body, Footer, or Empty cart). Set when you add the block. | body |
To reorder, drag the block within its area in the customizer — this updates its order relative to its neighbors. Because order is shared across all elements in an area, dragging a body block changes where it falls among line items, upsells, rewards, and announcements; dragging a footer block changes where it falls among the order note, buttons, and payments.
Styling hooks
Your content is injected into the cart inside wrapper elements you can target with CSS — either inline in a Custom HTML block, or in the cart's Custom CSS field under Design > Styles.
Wrapper classes
- The whole cart drawer is wrapped in
.lcu__drawer. Scope your selectors under it to be sure you're styling the cart and nothing else on the page. - Empty-cart Custom HTML is wrapped in an element with the class
.lcu__empty-state__custom. To move it within the empty-cart layout, set the CSS order property on that wrapper (the empty-cart area is laid out so position is controlled byorder).
Example: position empty-cart HTML and style a body badge
/* Move the empty-cart custom HTML above the rest of the empty state */
.lcu__drawer .lcu__empty-state__custom {
order: -1;
}
/* Style a trust badge you placed in the cart body */
.lcu__drawer .free-returns-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
font-size: 13px;
}Inside a Custom HTML block you can also use inline style attributes (as the built-in taxes note does) for one-off styling without touching the cart's Custom CSS.
Recipes
A trust badge in the cart body. Add a Custom HTML body block and paste:
<div class="free-returns-badge" style="text-align: center; font-size: 13px; padding: 8px;">
✅ Free 30-day returns on every order
</div>Turn the block on, then drag it near the top of the body so shoppers see it as they review their cart.
A promo image with a shop-now link, shown only when the cart is empty. Add a Custom HTML block to the empty cart area:
<a href="/collections/new-arrivals" style="display: block; text-align: center;">
<img src="https://yourcdn.com/empty-cart-promo.jpg" alt="Shop new arrivals" style="max-width: 100%; border-radius: 8px;" />
<span style="display: block; margin-top: 8px; font-size: 14px;">Shop new arrivals →</span>
</a>It appears only on the empty cart and disappears the moment a shopper adds an item.
Edge cases and safety
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Block doesn't appear | It's still hidden | Turn on the block's visible toggle |
| Block renders nothing | Empty HTML/text content | Add content to the block |
| The Custom HTML or Custom Text option is greyed out | You've hit the limit of 10 for that kind | Delete an existing block of that kind first |
| Block shows on the wrong screen | Wrong origin (added from the wrong cart area) | Delete it and re-add it from the correct area |
| Looks right in preview, broken live | Unclosed tags or unsupported script/iframe | Validate the markup and test on the real storefront |
| Content overflows on mobile | Fixed pixel widths | Use max-width: 100% and responsive units |
| Block missing in another version | Blocks are per version/market, not global | Recreate it, or use Sync to copy the configuration |
Related guides
Rewards & progress bars
Build a spend-threshold reward tracker in the Llama Cart — free-shipping bars, milestone tiers, icons, tooltips, and visibility rules.
Llama Cart versions & customization
Set up the Llama Cart, run A/B/C version tests, style it per market, and customize it from the Customizer page.