Custom HTML & Custom Liquid

Embed your own HTML or Liquid code anywhere on the storefront, wrapped in the theme's grid, colors and spacing.

Every store eventually needs something the theme doesn't ship: an embed from a booking service, a snippet an app handed you, a size table, a widget from a marketing tool. These two sections are the escape hatch. They drop your own code into the page while keeping the theme's grid, color scheme and spacing around it, so the result reads as part of the design instead of something pasted in.

The difference between them is one thing: Custom Liquid also runs Liquid, so it can print store data — a metafield, a collection count, the customer's name. Custom HTML renders markup as-is.

At a glance

Where to find it	Add section → Layout
Two sections	Custom HTML (markup) · Custom Liquid (markup and Liquid)
Allowed on	Any page template, plus the header and footer section groups
Settings	Identical for both — only the code field differs

---

How to add

1

Pick the right one

If your snippet needs store data — a metafield, a product property, the customer's name — you need Custom Liquid. For a plain embed or a block of markup, Custom HTML is enough.

2

Add the section

Click Add section and choose it from the Layout category. Both are also available inside the header and footer section groups, not only on page templates.

3

Paste the code

Drop your markup into the HTML or Liquid field. Nothing else in the panel produces visible content — everything on the page comes from this field.

4

Fit it to the page

Set Text style so the embedded content inherits the right typography, and reach for Grid → Custom with a larger Max width if the embed needs more room than the text column gives it.

Liquid runs only in Custom Liquid. If you pasted {{ ... }} into Custom HTML and it printed as literal text on the page, that's the reason — swap the section, not the code.

Good to know

• Neither section has heading, text or button settings. Everything visible on the page comes from the code you paste.
• Text style sets the typography your embedded content inherits — Body, Subheading, Secondary, Section or Caption. Inline styles in your own code still take precedence.
• Max width, Column gap and Row gap appear only once Grid is set to Custom. Until then they're hidden, which is why the panel looks shorter than the reference below.
• Paddings appears only when Section framing is set to something other than Disable.
• Section framing has no effect when the section uses the primary color scheme — the editor repeats this in its own hint under the setting.
• Liquid is evaluated on every page view. A loop over a large collection inside Custom Liquid will show up in your page speed score.

Customization ideas

Print a metafield the theme doesn't expose

Care instructions, a delivery estimate, an ingredient list — a short Custom Liquid snippet on the product template puts it on the page without waiting for a theme update.

Give a wide embed room to breathe

Embedding a map or a booking calendar? Set Grid to Custom and raise Max width so the iframe isn't squeezed into the text column.

Make a third-party widget look intentional

Turn Section framing on and give the section its own Color scheme. The embedded widget then reads as a deliberate card rather than a foreign object.

A footer strip you don't want to maintain

Add a Custom HTML section inside the footer group for a payment-badge strip or partner logo row you'd rather not build as a real section.

---

Settings reference

Both sections share the same settings; only the code field differs.

Settings

Setting	What it does
HTML / Liquid	The code field. Custom HTML takes markup; Custom Liquid takes markup and Liquid.
Text style	Typography the content inherits: Body, Subheading, Secondary, Section, Caption.
Grid	Which of the theme's grids the section sits in: Page, Alternative, Secondary or Custom.
Max width	1040–2560 px. Visible only with Grid set to Custom.
Column gap / Row gap	1–80 px each. Visible only with Grid set to Custom.
Disable grid max-width	Lets the content stretch past the grid's maximum width.
Show bottom line	Draws a divider under the section.
Section framing	Disable, Enable, or Grid width — frames the section's background.
Color scheme	Background and text colors for the section.
Top / Bottom	Section spacing, 0–2× the theme's base spacing.
Paddings	Inner padding, 0–3×. Visible only when Section framing isn't Disable.

Best practices

• Prefer Custom HTML when plain markup is enough — it's one less thing evaluated on every request.
• Keep one embed per section. It's far easier to reorder, hide or delete later than a single section holding four unrelated widgets.
• Comment your snippets. In six months, an unlabelled block of code in a theme section is indistinguishable from something safe to delete.

Paste only code you understand, or that came from a source you trust. Anything in these fields runs on your live storefront, and an unclosed tag can affect the rest of the page, not just this section.

Related

• Empty Space & Line
• Apps