> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/layout/custom-html-and-custom-liquid.md).
# 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.
{% hint style="info" %}
**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 |
| {% endhint %} | |
***
### How to add
{% stepper %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
**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.
{% endhint %}
{% hint style="success" icon="lightbulb" %}
### 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.
{% endhint %}
### 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.
{% hint style="danger" %}
**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.
{% endhint %}
## Related
* [Empty Space & Line](/docs/volume-themes/sections/layout/empty-space-and-line.md)
* [Apps](/docs/volume-themes/sections/layout/apps.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/volume-themes/sections/layout/custom-html-and-custom-liquid.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.