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

# Layout

The **Layout** blocks do not add content of their own. They decide where the content blocks sit: side by side or stacked, in a slider, behind a collapsible row, or simply further apart. They are added inside a section like every other block, and several of them take nested blocks, so a section is usually built by placing a layout block first and filling it afterwards.

Reach for these when a section has the right content but the wrong shape.

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

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

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to rearrange.
3. Click **Add block**.
4. Choose a block from the **Layout** list, then add the content blocks inside it.
   {% endhint %}

*Result:* the layout block appears in the section, and any block you add inside it follows the arrangement it defines.

### Blocks in this group <a href="#blocks-in-this-group" id="blocks-in-this-group"></a>

| Block                                                         | What it does to the layout                                                                           | Reach for it when                                                                                  |
| ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [Accordion](/velare/customize-your-pages/layout/accordion.md) | Turns content into rows shoppers open one at a time                                                  | The page has more information than it has room, as with FAQs, shipping terms, or care instructions |
| [Divider](/velare/customize-your-pages/layout/divider.md)     | Draws a line of set thickness and length                                                             | Two parts of a section belong together but need a visible break between them                       |
| [Group](/velare/customize-your-pages/layout/group.md)         | Holds other blocks and arranges them in a row or a column, with its own background, border, and link | Blocks should sit side by side, share a background, or act as one clickable card                   |
| [Spacer](/velare/customize-your-pages/layout/spacer.md)       | Adds empty room, sized separately for desktop and mobile                                             | The gap between two blocks is wrong on phones but right on desktop, or the reverse                 |
| [Carousel](/velare/customize-your-pages/layout/carousel.md)   | Turns the items into a horizontal slider with navigation and pagination                              | There are more items than fit in a row and you would rather slide than wrap them                   |

### Suggested order <a href="#suggested-order" id="suggested-order"></a>

1. Place the [Group](/velare/customize-your-pages/layout/group.md) blocks first, since they define the columns and rows everything else falls into.
2. Add the content blocks inside those groups, and only then adjust the gaps.
3. Use [Spacer](/velare/customize-your-pages/layout/spacer.md) for gaps that need different values on phones, and the top and bottom padding on each block for ordinary spacing.
4. Add [Divider](/velare/customize-your-pages/layout/divider.md) last, once you can see where the section genuinely needs a break.

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

* [Basic](/velare/customize-your-pages/basic.md): the content blocks these containers arrange
* [Decorative](/velare/customize-your-pages/decorative.md): the marquee, which is also a container for nested blocks
* [Layout](/velare/set-up-your-store/layout.md): the store wide page width these blocks work inside


---

# 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.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.