> 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.md).

# Layout

Utility and layout sections — anchor links for in-page navigation, custom code blocks, spacing controls, and visual dividers.

Five utility sections for structural control — spacing, dividers, anchor links, and custom code injection. These sections don't display products or media; they shape the page layout and enable advanced customizations.

***

### Section overview

| Section                                                                                                              | What it does                                                                                                                                                                                                                |
| -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Empty Space](/docs/avante-themes/sections/layout/custom-html-custom-liquid-empty-space-and-line.md#empty-space)     | Adds vertical spacing between sections, with separate desktop and mobile heights                                                                                                                                            |
| [Line](/docs/avante-themes/sections/layout/custom-html-custom-liquid-empty-space-and-line.md#line)                   | A horizontal divider across the content width. Its thickness and opacity come from Theme settings → Appearance and apply to every line in the theme; the section itself controls the color scheme and the padding around it |
| [Anchor Link](/docs/avante-themes/global-sections/header-and-navigation/anchor-link.md)                              | Invisible anchor point for in-page navigation — lets you link directly to any spot on the page                                                                                                                              |
| [Custom HTML](/docs/avante-themes/sections/layout/custom-html-custom-liquid-empty-space-and-line.md#custom-html)     | Raw HTML block for embedding third-party widgets, forms, or external content                                                                                                                                                |
| [Custom Liquid](/docs/avante-themes/sections/layout/custom-html-custom-liquid-empty-space-and-line.md#custom-liquid) | Liquid code block with access to Shopify objects — for app snippets and dynamic content that needs store data                                                                                                               |

***

### Quick decision guide

**Need spacing between sections?** → Empty Space — set independent heights for desktop and mobile.

**Want a visual separator?** → Line — a horizontal rule that follows the section's color scheme, with the weight set once globally.

**Building a long page with jump links?** → Anchor Link — place invisible anchors at key points, then link to them from buttons or navigation.

**Embedding third-party code?** → Custom HTML for static embeds (maps, forms, widgets). Custom Liquid when you need access to Shopify's Liquid objects (product data, cart, customer info).

***

### When to use Layout sections

These sections are supporting elements, not standalone features. Use them to fine-tune the spacing and structure of pages built with other section types. Custom HTML and Custom Liquid are intended for developers or apps that need direct code access.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/sections/layout.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.