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

# Page

The **Page** section displays the page title with an optional subheading or description, so visitors immediately understand what a page is about before they start reading. It is the header block that sits above your page content on pages such as About us, Contact, Shipping, or a policy page. Because the title and description come from block settings, you can present the same content with a different framing without editing the page body.

It is a global section, so the width, color scheme, and alignment you set here apply wherever the section is used.

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

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

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

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click **Page**.
3. Set the section width, color scheme, alignment, and padding.
4. Open the block settings to write the **Title** and **Content**.
   {% endhint %}

*Result:* the page title area in the preview updates to your text, alignment, and colors.

### Section settings <a href="#section-settings" id="section-settings"></a>

<figure><img src="/files/5Zclm0G1om1C7WIoRygp" alt=""><figcaption></figcaption></figure>

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

| Setting               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**     | <p>How far the title area stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the title runs close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the title lines up with the page body beneath it, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the area fills the whole screen and rescales itself to fit it.</li></ul> |
| **Color scheme**      | The background and text colors of the title area, taken from **Theme settings > Colors**. Choosing a different scheme from the page body marks the title off as a header.                                                                                                                                                                                                                                                                    |
| **Content alignment** | <p>Where the title and its description sit across the section.</p><ul><li><strong>Left</strong>: flows naturally into body text below.</li><li><strong>Center</strong>: gives a short title more presence, which suits About and Contact pages.</li><li><strong>Right</strong>: for layouts that already run right aligned.</li></ul>                                                                                                        |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                                   |
| ---------- | ------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the title. Increase it to lift the title away from the header or breadcrumb sitting over it. |
| **Bottom** | Adds space between the title area and the page content below, so the two do not read as one block.            |

### Block settings <a href="#block-settings" id="block-settings"></a>

| Settings    | Description                                                                                                              |
| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Title**   | The large line at the top telling visitors what they are about to read. Keep it short so it stays on one line on phones. |
| **Content** | A sentence under that line giving context before the page body starts, such as who the page is for or what it covers.    |

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

* Visitors see a titled introduction above the page body instead of starting straight into the text.
* The alignment and color scheme set here decide how strongly the title stands out from the content below it.

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

* [Breadcrumb](/velare/customize-your-pages/breadcrumb.md): the navigation trail often shown just above this section
* [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): the schemes and fonts used by the title and description
* [Layout](/velare/set-up-your-store/layout.md): the page content width used by **Fixed width**


---

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