> 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/basic/heading.md).
# Heading
The **Heading** block is the title line that opens a section. It is added inside a section, normally as the first block, so shoppers know what they are looking at before they read the supporting wording or reach the button. Because the tag and the text style are separate settings, you can make a line look large without claiming a place in the page outline it should not have.
### How to add it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to add the title to.
3. Click **Add block** and choose **Heading**.
4. Type the title, choose a **Preset** for its look, then set the **Heading tag**.
{% endhint %}
*Result:* the title appears at the top of the section in the preview, in the size defined by the preset you picked.
### General settings
| Setting | Description |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading** | The line shoppers read first in this section. Keep it to a few words so it stays on one line on a phone. |
| **Preset** | The text style the line is drawn in, for example Heading 2, which decides its size and appearance. The presets live in theme settings, so editing one there restyles every heading built on it. |
| **Heading tag** | The HTML level the line is published at, from H1 to H6. Search engines read this order as the structure of the page, so keep one H1 per page and step down for the titles beneath it. |
### Size
These settings control the width the heading block occupies within the section.
| Setting | Applies To | Description |
| ---------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width** | Desktop |
How much horizontal room the title takes on a computer screen.
Fit: the line stays as wide as the words themselves
Fill: the line spans the space it is given, which keeps long titles from breaking early
Custom: you set the width yourself as a percentage
|
| **Mobile width** | Mobile |
The same choice for phone screens, where a narrower title wraps onto more lines.
Fit
Fill
Custom.
|
### Spacing
These settings control the external spacing (padding) applied directly above and below this specific block.
| Setting | Description |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Top** | Adds space above the title so it does not sit tight against the top edge of the section. Accepts 0px to 100px. |
| **Bottom** | Sets the gap between the title and the wording under it. A larger gap reads as a pause, a small one binds the two lines together. Accepts 0px to 100px. |
### What changes on the storefront
* The section gains a title shoppers can scan, instead of opening with body text.
* The **Heading tag** feeds the page outline that search engines and screen readers follow, even though it does not change how large the line looks.
* Changing the chosen preset in theme settings restyles this title along with every other heading using the same preset.
### Related pages
* [Text](/velare/customize-your-pages/basic/text.md): the supporting paragraph that usually follows the title
* [Highlight text](/velare/customize-your-pages/basic/highlight-text.md): a short emphasised phrase for labels rather than titles
* [Typography](/velare/set-up-your-store/typography.md): where the presets are defined
---
# 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/basic/heading.md?ask=&goal=
```
`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.