> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/rich-text.md).

# Rich text

The **Rich text** section displays promotional text with custom layout and size, as well as optional images, video player, buttons, and other content and style blocks to design this section to your liking.

This section is great to welcome customers to your store, promotional content of all kinds, announcements, and more. It looks great between two image-focused sections.

<div data-with-frame="true"><img src="/files/pKCvmTmvU7YCo3akaiX1" alt="" width="563"></div>

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Rich text**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add content blocks</h2>

***

Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.

<div><figure><img src="/files/CySklwWxaSRn3gHtNic2" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="/files/ePWVCmf4HT8QaKrfmkhI" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Accent</strong></mark></td><td>Add small label heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#accent">/pages/5U2s1qKTve492neoD35D#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#heading">/pages/5U2s1qKTve492neoD35D#heading</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Add multiple lines of rich text.</td><td><a href="/pages/5U2s1qKTve492neoD35D#text">/pages/5U2s1qKTve492neoD35D#text</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="/pages/5U2s1qKTve492neoD35D#button">/pages/5U2s1qKTve492neoD35D#button</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="/pages/5U2s1qKTve492neoD35D#image">/pages/5U2s1qKTve492neoD35D#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Video player</strong></mark></td><td>Add video that plays in a popup viewer.</td><td><a href="/pages/5U2s1qKTve492neoD35D#video-player">/pages/5U2s1qKTve492neoD35D#video-player</a></td></tr><tr><td><mark style="color:blue;"><strong>Border</strong></mark></td><td>Add divider between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#divider">/pages/5U2s1qKTve492neoD35D#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#spacer">/pages/5U2s1qKTve492neoD35D#spacer</a></td></tr></tbody></table>

### <mark style="color:$primary;">Change content layout</mark>

In the section settings, change the **width** and **alignment** of the content blocks area.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="153">Setting</th><th width="346">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at full width of the page or set a custom width.</td><td><strong>Full width</strong><br><strong>Custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom content width</mark></td><td>Use the sliders to set the maximum width (in pixels) of the section content.</td><td><strong>400 - 1000 px</strong></td></tr><tr><td><mark style="color:blue;">Content alignment</mark></td><td>The position of the headings, buttons, and content within the section.</td><td><strong>Content center</strong><br><strong>Content left</strong><br><strong>Heading center, content left</strong></td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Collapsible row list](/stiletto/sections/theme-sections/collapsible-row-list.md)\
> [Image with text](/stiletto/sections/theme-sections/image-with-text.md)\
> [Testimonials](/stiletto/sections/theme-sections/testimonials.md)


---

# 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:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/rich-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.