> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/layout/spacer.md).

# Spacer

The **Spacer** block adds empty room between two blocks. It is added inside a section like any other block, and it exists because the top and bottom padding on a block is not always enough: the space can be set in pixels or as a percentage, and it can carry a completely different value on phones. Use it when a gap that looks right on a desktop turns into an awkward hole on a narrow screen, or the other way round.

<figure><img src="/files/Z1wZva8ApgsNnQHzRPxY" alt=""><figcaption></figcaption></figure>

### How to add it <a href="#how-to-add-it" id="how-to-add-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to space out.
3. Click **Add block** and choose **Spacer**.
4. Drag it between the two blocks that need separating, then pick a **Unit** and a **Size**.
5. Turn on **Custom Mobile Size** if phones need a different gap.
   {% endhint %}

*Result:* the gap opens up at that point in the section, and the preview reflows the blocks around it.

### General settings <a href="#general-settings" id="general-settings"></a>

| Setting                | Description                                                                                                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Unit**               | **Whether the gap is measured in a fixed number of pixels (`px`) or as a share of the space around it (`%`). Pixels stay the same on every screen, percentages grow and shrink with the layout.** |
| **Size**               | <p><em>Only visible when Unit is Pixel</em>.</p><p>The exact gap, from 0px to 400px. Large values are how a section is broken into distinct parts without a divider line.</p>                     |
| **Size**               | <p><em>Only visible when Unit is Percent</em>.</p><p>The gap as a share of the space around it, from 1% to 100%, so it scales with the layout instead of staying fixed.</p>                       |
| **Custom Mobile Size** | Lets phones use their own gap and their own unit, which is the point of this block. Leave it off and phones inherit the desktop value, which is often far too large.                              |

### Mobile Settings <a href="#mobile-settings" id="mobile-settings"></a>

| Setting  | Description                                                                                                                                                                                                          |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Unit** | <p><em>Only visible when Custom Mobile Size is checked</em>.</p><p>How the phone gap is measured, in pixels (<code>px</code>) or as a percentage (<code>%</code>). It does not have to match the desktop choice.</p> |
| **Size** | <p><em>Only visible when Unit is Pixel</em>.</p><p>The exact gap on a phone, from 16px to 160px. The ceiling is lower than on desktop because a phone screen has far less height to give away.</p>                   |
| **Size** | <p><em>Only visible when Unit is Percent</em>.</p><p>The phone gap as a share of the space around it, from 1% to 100%.</p>                                                                                           |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Content on either side of the block is pushed apart by the amount you set, which groups what belongs together and separates what does not.
* With a custom mobile size, phones keep a sensible gap while desktop keeps a generous one, instead of both sharing a single compromise.
* Nothing is drawn on screen, so shoppers read the space as breathing room rather than as a break, which is what makes it different from a divider.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Divider](/velare/customize-your-pages/layout/divider.md): when the break should be visible rather than felt
* [Group](/velare/customize-your-pages/layout/group.md): whose **Gap** setting handles the spacing between blocks inside one container
* [Layout](/velare/customize-your-pages/layout.md): the other blocks in this group


---

# 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://uxsmart.gitbook.io/velare/customize-your-pages/layout/spacer.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.