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

# Text

The **Text** block holds the paragraph that explains whatever the section is about. It is added inside a section, normally under a heading and above a button, and it is the only basic block with a full editor, so it is where formatting such as bold, italics, bullet lists, and inline links belongs. Use it for the sentence or two that turns a title into a reason to keep reading.

<figure><img src="/files/ktOni6Zzq8C0Awu7JbUx" 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 add the wording to.
3. Click **Add block** and choose **Text**.
4. Write the paragraph in the editor, then set the width and alignment.
   {% endhint %}

*Result:* the paragraph appears in the section, wrapped to the width you set and aligned as you chose.

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

| Setting        | Description                                                                                                                                                                                                                                             |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text**       | The wording itself. The editor keeps bold, italics, lists, and links, so a short benefit list can live here without a separate block.                                                                                                                   |
| **Text Color** | <p>Which of the two store text colors the paragraph uses:</p><ul><li>Body Color (the standard reading color, default)</li><li>Heading Color (the darker color normally kept for titles, which lifts a short line so it reads as a statement).</li></ul> |
| **Font Size**  | How large the wording is, in pixels, from 10px to 100px. Keep body copy near the store default and only push it up for a single line meant to be read from a distance.                                                                                  |

### Size & Alignment <a href="#size-and-alignment" id="size-and-alignment"></a>

These settings control the width and alignment of the text block within the section.

| Setting                 | Applies To | Description                                                                                                                                                                                                                                                                                                                               |
| ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width**               | Desktop    | <p>How wide the lines of text are allowed to run on a computer screen.</p><ul><li>Fit: the block stays as wide as the wording,</li><li>Fill (Default, the wording spans the space it is given)</li><li>Custom (you set the share of the width yourself, which is the way to keep long paragraphs to a comfortable line length).</li></ul> |
| **Custom Width**        | Desktop    | <p><em>Only visible when Width is Custom</em>.</p><p>The exact share of the available width the wording takes, from 0% to 100%.</p>                                                                                                                                                                                                       |
| **Alignment**           | Desktop    | <p><em>Only visible when Width is not Fit</em>.</p><p>Where the wording sits across the space it was given:</p><ul><li>Left</li><li>Center (Default)</li><li>Right.</li></ul><p>Left is easiest to read for anything longer than a line, centre suits a single short statement.</p>                                                       |
| **Mobile Width**        | Mobile     | <p>The same width choice on phones, where Fill avoids leaving a narrow column of text.</p><ul><li>Fit</li><li>Fill (Default)</li><li>Custom.</li></ul>                                                                                                                                                                                    |
| **Custom Mobile Width** | Mobile     | <p><em>Only visible when Mobile Width is Custom</em>.</p><p>The exact share of the phone screen the wording takes, from 0% to 100%.</p>                                                                                                                                                                                                   |
| **Mobile alignment**    | Mobile     | <p><em>Only visible when Mobile Width is not Fit</em>.</p><p>Where the wording sits on a phone, which can differ from the desktop choice:</p><ul><li>Left</li><li>Center (Default)</li><li>Right.</li></ul>                                                                                                                               |

### Spacing <a href="#spacing" id="spacing"></a>

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                                  |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Sets the gap between the heading and this paragraph. A small gap keeps the two reading as one thought. Accepts 0px to 100px. |
| **Bottom** | Leaves space under the paragraph so the button or picture below it is clearly separate. Accepts 0px to 100px.                |

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

* Shoppers get the explanation that a heading on its own cannot carry.
* Width and alignment decide how long each line runs, which is what makes a paragraph comfortable or tiring to read.
* Links written inside the editor work like any other link on the page, so a sentence can carry its own destination without a separate button.

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

* [Heading](/velare/customize-your-pages/basic/heading.md): the title this paragraph sits under
* [Button](/velare/customize-your-pages/basic/button.md): the action that usually follows the wording
* [Accordion](/velare/customize-your-pages/layout/accordion.md): where text blocks live when the wording should stay hidden until asked for


---

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