> 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/set-up-your-store/layout.md).

# Layout

Layout settings control the two things that shape every page of your store: how wide the content area is, and how rounded the edges of images, buttons and input fields look. Because these values are set once at theme level, they apply everywhere instead of section by section, so you get a consistent look without repeating the same choice on each page. Use them early when you set up the theme, then leave them alone.

### Where to find these settings <a href="#where-to-find-these-settings" id="where-to-find-these-settings"></a>

Go to **Online Store > Themes > Customize > Theme settings > Layout**.

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

### Settings <a href="#settings" id="settings"></a>

| Setting                   | Description                                                                                                                                     |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page width**            | Sets how wide the content area of your store is. A narrower width keeps text and products closer together; a wider one uses more of the screen. |
| **Image (Corner radius)** | Controls how rounded the corners of images are across your store. A higher value makes the corners more curved.                                 |
| **Button corner radius**  | Controls how rounded all buttons are. Larger values give softer, more rounded button edges.                                                     |
| **Input corner radius**   | Controls how rounded input fields look, such as search boxes and form fields.                                                                   |

### What customers see <a href="#what-customers-see" id="what-customers-see"></a>

Page width decides how much white space sits on the left and right of your content on large screens, so it changes how spacious or how dense every page feels. The three corner radius settings change the shape language of your store: at `0` everything looks square and structured, and as you raise the values images, buttons and form fields become progressively softer. Because the settings are global, a change here is visible on the home page, collection pages, product pages, the cart and every form in one go.

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

* [Colors](/velare/set-up-your-store/colors.md): the color schemes applied to the elements you are shaping here
* [Typography](/velare/set-up-your-store/typography.md): fonts and text sizes that sit inside this layout
* [Product cards](/velare/customize-your-pages/product-cards.md): card level settings that inherit the image corner radius
* [Vélare Intro](/velare/readme.md): overview of the theme and where to start


---

# 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/set-up-your-store/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.
