> 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/avante-themes/sections/layout/custom-html-custom-liquid-empty-space-and-line.md).

# Custom HTML, Custom Liquid, Empty Space & Line

Insert custom HTML or Liquid code, control spacing with Empty Space, and add visual dividers with Line in the Avante Shopify theme.

Four sections that add no content of their own. Two of them let you drop in code the theme doesn't cover; two of them shape the space between everything else. These are what you reach for when a page is almost right and needs one adjustment that no other section offers.

Pick the one that fits your goal:

* **Custom HTML** — a block of raw HTML: an embed, a widget, a third-party form.
* **Custom Liquid** — the same box, with Liquid switched on: app snippets, store data, conditional content.
* **Empty Space** — a measured gap between two sections, with separate desktop and mobile heights.
* **Line** — a single horizontal rule across the content width.

Custom HTML, Custom Liquid and Line can be added to page templates **and** to the header and footer areas. Empty Space is a template section only. For settings shared across most sections (width, color scheme, paddings), see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings). For the invisible scroll-target section in this same category, see [Anchor Link](/docs/avante-themes/global-sections/header-and-navigation/anchor-link.md).

***

## Custom HTML

Shopify's section list covers a lot, but never everything — a booking widget, a map, a form from a service the theme has never heard of. Custom HTML is the escape hatch: an empty box, and whatever you paste into it renders in the flow of the page with the theme's spacing and colors around it.

In the Theme Editor this section is listed as **Custom HTML**. It has one field and no blocks.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FgziGOhD0BuqXXonAoYK5%2FGroup%2018%20(6).png?alt=media&amp;token=a9f4926c-8696-491c-aba3-083ff5cfd857" alt=""><figcaption></figcaption></figure>

{% hint style="success" icon="sparkles" %}

### Good to know

* **An empty section is not an invisible one.** Leave the **HTML** field blank and the theme draws a placeholder graphic in its place — a `< >` mark roughly 240 px tall — and it appears on the live storefront, not only in the editor. If you aren't using the section, remove it rather than emptying it.
* **Shopify strips three tags and closes the rest for you.** `<html>`, `<head>` and `<body>` are removed automatically, and any unclosed tag is closed when you save — which can quietly rearrange your markup. Paste a fragment, not a whole document, and check the storefront afterwards.
* **50 KB is the ceiling.** Content above that won't save at all. Anything heavier belongs on a host of its own, linked or embedded from here.
* **This field is translatable.** HTML settings appear in Shopify's Translate & Adapt, so a store selling in several languages can give this section different content per language. Custom Liquid cannot — see below.
* **Narrow is the default width.** **Section width** has two values, Wide and Narrow, and a new section starts Narrow. Third-party embeds built to fill a viewport usually need Wide.
* **The paddings go negative.** Desktop **Top** and **Bottom** run from −160 to 160 px and mobile from −80 to 80, both at 0 by default. Negative values pull the neighbouring section over this one — handy for tucking an embed tight against the section above, and an easy way to overlap something by accident.
* **Corner radius rounds the whole block.** **Default** follows the theme's global image and section radius; the other values — Disabled through to Arc — override it for this section only.
  {% endhint %}

### Best practices

* Open the page on a phone before you publish. An embed sized in fixed pixels is the most common cause of a horizontal scrollbar on mobile, and the theme can't correct it for you.
* Keep one embed per section. Two widgets in a single field are far harder to reorder or remove later than two separate sections.
* Don't put site-wide tracking or analytics snippets here. A section only loads on the pages it sits on, so the data will be incomplete — those belong in Shopify's Customer events settings.
* If the embed brings its own background color, set **Color scheme** to match it, or the seam between the widget and the page will show.
* Paste from a plain-text editor. Copying markup out of a word processor drags along invisible characters that break tags.

***

## Custom Liquid

Custom Liquid is Custom HTML with the template language switched on. Same box, same width, radius, color and padding controls — but the contents are rendered by Shopify before the page reaches the browser, so they can read the product, the collection, the cart, the customer.

In the Theme Editor this section is listed as **Custom Liquid** and its field is labelled **Liquid**. The hint beneath it — *"Add app snippets or other Liquid code to create advanced customizations"* — describes the intended use exactly.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2F0i98bgnDL6qCXgmnxutX%2FGroup%2018%20(7).png?alt=media&amp;token=b04c6a13-0f8a-4e60-9584-7463d26d0e7b" alt=""><figcaption></figcaption></figure>

{% hint style="success" icon="sparkles" %}

### Good to know

* **This is where app snippets belong.** When an app asks you to paste a snippet into the theme, a Custom Liquid section is almost always the better place than a theme file — the snippet then survives a theme update instead of being overwritten by it.
* **Invalid Liquid blocks the save,** and the same 50 KB limit applies as for Custom HTML.
* **Several tags are off-limits.** `{% layout %}`, `{% section %}`, `{% javascript %}`, `{% stylesheet %}` and `{% schema %}` don't work inside a Liquid setting, and neither do `content_for_header`, `content_for_layout` or `content_for_index`. Use ordinary `<script>` and `<style>` tags instead when a snippet needs its own behaviour or styling.
* **A tag that doesn't exist renders as an empty string.** No error, no warning — which is why a snippet can save cleanly and still show nothing at all. If the section comes out blank, a mistyped tag is the first thing to check.
* **`settings` is not available.** You can't read the theme's own settings from here, so `{{ settings.something }}` won't resolve. Global objects like `shop`, `cart`, `customer` and `routes` do work, and so does the template's own object — `product` on a product page, `collection` on a collection page.
* **This field is not translatable.** Unlike Custom HTML, Liquid settings don't appear in Translate & Adapt. That's deliberate: the value is meant to be language-neutral code. To vary the wording by language, output it through a translation filter inside the Liquid.
* **An empty field shows the same `< >` placeholder** as Custom HTML, on the storefront as well as in the editor.
  {% endhint %}

### Best practices

* Paste app snippets exactly as the app supplies them, then test. Reformatting Liquid by hand is how working snippets stop working.
* Keep the logic short. A Custom Liquid section is a good place for a few lines of conditional output and a poor place for a template rewrite — nothing in it is version-controlled or reviewable.
* Write down which pages carry Custom Liquid sections before a theme update. They travel with the template, so a template that gets replaced takes the snippet with it.
* Prefer Custom HTML when the content is static. Liquid that doesn't read anything from the store is just HTML with a slower path to the page and no translations.

***

## Empty Space

Sometimes two sections simply sit too close, and no combination of their own paddings fixes it without upsetting something else. Empty Space is a section whose entire job is to be a measured gap — one height on desktop, another on mobile, and a color if you want the gap to read as a band.

In the Theme Editor this section is listed as **Empty space**. It has no blocks and no content of its own.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FtHonXQhjU5FblfmDRMFb%2FGroup%2018%20(8).png?alt=media&amp;token=6d9aa09c-ae70-49a7-9d51-72383128c7f0" alt=""><figcaption></figcaption></figure>

{% hint style="success" icon="sparkles" %}

### Good to know

* **Desktop and mobile are independent, and their ranges differ sharply.** **Desktop height** runs from 0 to 320 px in 8 px steps and starts at 64; **Mobile height** runs from 0 to 80 px and starts at 24. A 200 px gap on a phone isn't available — 80 px is the ceiling by design.
* **Give it a color and it stops being a gap.** On **Base** the section is invisible. **Swap** or **Set** paints the full width of the strip, which turns the same section into a deliberate band between two others; **Set** also unlocks a solid or gradient background of your choosing.
* **There are no padding controls,** unlike the other three sections here. The height *is* the section, so what you set is exactly what you get.
* **Template only.** Empty Space can't be placed in the header or footer areas.
  {% endhint %}

### Best practices

* Reach for the neighbouring sections' own **Top** and **Bottom** paddings first. Empty Space earns its place when both neighbours need to keep their existing spacing and the gap between them still isn't right.
* Set the mobile height every time you set a desktop one. A 64 px desktop gap left at the 24 px mobile default is usually fine; a 320 px one left there is not.
* Don't build rhythm out of Empty Space sections. If a page needs the same gap in six places, change **White space** in [Theme settings → Appearance](/docs/avante-themes/theme-settings/appearance.md) instead — one setting beats six sections you'll have to maintain.
* Use a colored Empty Space sparingly. A band of color with nothing in it works once on a page as a breath; twice, it reads as a mistake.

***

## Line

A single rule across the content width. It does what a border would do if sections had borders — marks the end of one idea and the start of the next without spending a heading on it.

In the Theme Editor this section is listed as **Line**. There are no blocks, and its only controls are color and padding.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FZ4oAl7gluSWyPEZ7y5u6%2FGroup%2018%20(9).png?alt=media&amp;token=75f5afe2-f08f-4064-9975-ee1c6477dd0d" alt=""><figcaption></figcaption></figure>

{% hint style="success" icon="sparkles" %}

### Good to know

* **The thickness and the opacity aren't in this section.** The line takes its weight from **Line width** (1–4 px) and its transparency from **Line opacity** (0–100%), both in [Theme settings → Appearance](/docs/avante-themes/theme-settings/appearance.md), and both apply to every line in the theme. You can't make one divider heavier than the rest from here.
* **The color is the text color.** The rule is drawn in the current color scheme's text color at the global opacity — so setting **Color scheme** to **Swap** flips both the strip behind it and the line itself.
* **Left and right controls the side padding, not the length of the line.** **Default** follows the store-wide setting in Theme settings → Appearance; **Disable** runs the line edge to edge; **Enable** forces the standard side padding even where the theme has it switched off globally.
* **Top and bottom are the air around it.** Desktop runs 0–320 px (64 by default) and mobile 0–80 px (24 by default) — positive values only, unlike Custom HTML and Custom Liquid.
  {% endhint %}

### Best practices

* Decide the weight once, globally. If your dividers look too heavy, change **Line width** in Theme settings rather than replacing the section with a styled `<hr>` in Custom HTML.
* Keep the top and bottom paddings equal unless you intend the line to belong to the section below it. Uneven spacing around a divider reads as a layout bug even when it's deliberate.
* Use a line where the two sections share a color. Where the background already changes, the color change is the divider and a rule on top of it is noise.
* One divider per transition, and not after every section. A page ruled into equal boxes has no hierarchy left to read.

***

### Related

* [Layout overview](/docs/avante-themes/sections/layout.md)
* [Anchor Link](/docs/avante-themes/global-sections/header-and-navigation/anchor-link.md)
* [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings)
* [Appearance](/docs/avante-themes/theme-settings/appearance.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/avante-themes/sections/layout/custom-html-custom-liquid-empty-space-and-line.md?ask=<question>&goal=<user_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.