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

# Rich text

**Rich text** is the plain block of words a page needs between the pictures: a short paragraph about the brand, a note about shipping over the holidays, a line explaining what a collection is, with a button under it if there is somewhere to go next. It has no image and no layout of its own, which is exactly the point. Shoppers meet it as a calm break between two heavier sections.

Reach for it whenever the message is the words themselves and a picture would only get in the way.

<figure><img src="/files/WGSuDiPwM7YHnV11enaf" 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. Open the template you want the text on.
3. Click **Add section** and choose **Rich text** from the **Storytelling** group.
4. Write the heading and description, then add a button if the words should lead somewhere.
   {% endhint %}

*Result:* the wording renders in a single column, aligned and sized according to the settings below.

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

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How much of the screen the section is allowed to take.</p><ul><li><strong>Stretch width</strong>: the block spreads to the browser width, useful when the background color should span the screen.</li><li><strong>Fixed width</strong>: the block lines up with the rest of your pages, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: section and content run edge to edge, the boldest option for a colored statement band.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors this section uses. Schemes are defined in <strong>Theme settings > Colors</strong>. A different scheme here is the simplest way to make a short message stand out from the sections around it.</td></tr><tr><td><strong>Content alignment</strong></td><td><p>Which edge the wording lines up with.</p><ul><li><strong>Left</strong>: easiest to read for a full paragraph.</li><li><strong>Center</strong>: the usual choice for a short statement with one button.</li><li><strong>Right</strong>: use it to mirror a neighbouring section.</li></ul></td></tr><tr><td><strong>Max width</strong></td><td>How wide a line of text is allowed to run on large screens. Narrower lines are easier to read, so lower this before you shorten the copy.</td></tr></tbody></table>

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

| Setting    | Description                                                                                   |
| ---------- | --------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the wording. Increase it when the text sits too close to the section before. |
| **Bottom** | Adds space below the wording. Increase it when the next section starts too abruptly.          |

### Block settings <a href="#heading-subheading-description" id="heading-subheading-description"></a>

#### Heading, Subheading, Description <a href="#heading-subheading-description-block" id="heading-subheading-description-block"></a>

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading, Subheading, Description</strong></td><td>The three lines of wording: the big line shoppers read first, a short label above it for context, and the paragraph below carrying the detail. Leave a field empty to drop that line.</td></tr><tr><td><strong>Width</strong></td><td><p>How much horizontal room the wording is allowed inside the section.</p><ul><li><strong>Fit</strong>: the text stays only as wide as the words themselves.</li><li><strong>Fill</strong>: the text spans the full width available.</li></ul></td></tr><tr><td><strong>Typography - Preset</strong></td><td>The font, size, and weight of the wording, taken from the presets in <strong>Theme settings > Typography</strong>. Editing a preset there restyles every block using it.</td></tr><tr><td><strong>Background</strong></td><td>Puts a solid panel behind the wording, which separates the text from the section background.</td></tr><tr><td><strong>Background color</strong></td><td>The color of that panel. Pick one with enough contrast against the wording, or the text becomes harder to read than it was without it.<br><em>* Note: Only appears when <strong>Background</strong> is enabled</em></td></tr><tr><td><strong>Corner radius</strong></td><td>How rounded the corners of that panel look. Higher values give a softer shape, 0 leaves the corners square.<br><em>* Note: Only appears when <strong>Background</strong> is enabled</em></td></tr><tr><td><strong>Padding top/bottom</strong></td><td>Breathing room above and below the wording, so the text does not press against the edge of the section.</td></tr></tbody></table>

#### Button <a href="#button" id="button"></a>

| Settings                 | Description                                                                                                                                                                                                                                                                                                                     |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label**         | The words shoppers click. Leave it empty and no button is shown at all.                                                                                                                                                                                                                                                         |
| **Button link**          | Where that click takes shoppers, usually the page or collection the wording is about.                                                                                                                                                                                                                                           |
| **Type**                 | <p>How much the button stands out from the wording around it.</p><ul><li><strong>Primary</strong>: a solid block of color, for the action you most want taken.</li><li><strong>Outline</strong>: a bordered style, for a secondary action.</li><li><strong>Link</strong>: plain underlined text, the quietest option.</li></ul> |
| **Open link in new tab** | Loads the destination in a second browser tab, so the store stays open behind it.                                                                                                                                                                                                                                               |
| **Spacing bottom**       | Space left under the button. Increase it when the button sits too close to whatever follows the section.                                                                                                                                                                                                                        |

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

* The section renders nothing but wording, so it is the cheapest section on the page in terms of loading time.
* With **Max width** set low, long paragraphs stay readable even when the section itself spans the screen.
* Without a button label, the section is purely informational, which is often what you want between two selling sections.

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

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Reading text](/velare/customize-your-pages/storytelling/reading-text.md): the version with a fixed background image and a scroll reveal
* [Text](/velare/customize-your-pages/basic/text.md): the block version for use inside other sections
* [Typography](/velare/set-up-your-store/typography.md) and [Colors](/velare/set-up-your-store/colors.md): where the presets and schemes come from


---

# 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/storytelling/rich-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.