> 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/reading-text.md).
# Reading text
**Reading text** holds a picture still behind the page while a passage of text reveals itself line by line as the shopper scrolls. It slows a visitor down at the point where you want them to actually read something: the story behind the brand, what a material is and why you chose it, or what a campaign is for. Because the background stays fixed, the section feels like a pause in the page rather than another band of content to scroll past.
It works best once per template, placed where a shopper has already seen the products and is looking for a reason to care.
### Where to find it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. Open the template you want the story on.
3. Click **Add section** and choose **Reading text** from the **Storytelling** group.
4. Upload the background image, write the passage, then set the reading speed.
{% endhint %}
*Result:* the background locks in place and the text fades in as the shopper scrolls through the section.
### General
| Setting | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Color scheme** | The text colors used over the background image. Schemes are defined in **Theme settings > Colors**, so pick one whose text color reads against your picture. |
### Background image
| Setting | Description |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image** | The picture that stays fixed behind the passage on desktop. Choose something atmospheric with room for text, not a busy product shot. |
| **Mobile image** | A second version for phones. Crop it tighter, because the wide desktop picture loses its subject on a narrow screen. |
| **Image overlay opacity** | How strongly the picture is darkened behind the words. Raise it until the passage is comfortable to read, then stop, since every step also hides more of the picture. |
### Content settings
| Setting | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading** | A short label above the passage, useful for naming the chapter, for example *Our story*. |
| **Content** | The passage itself. Keep it to a few sentences, since every line has to be revealed before the shopper can move on. |
| **Content size** |
How large the passage is set. Larger sizes turn it into a statement, smaller ones let it read as prose.
H1 and H2: for a short, bold line meant to be read as a headline.
H3 and H4: the middle ground for two or three sentences.
H5 and H6: for a longer passage that has to stay readable.
|
| **Content max width** | How wide a line of text is allowed to run. Narrower lines are easier to read, and they leave more of the picture visible. |
| **Button label** | The words shoppers click at the end of the passage. Leave it empty and no button is shown. |
| **Button link** | Where that click leads, usually the collection or page the story is about. |
| **Type** | How much the button stands out over the picture. **Primary** is a solid block of color and stays visible on a busy photo, **Outline** is quieter and can disappear against a light background. |
| **Open link in new tab** | Loads the destination in a second browser tab, so the story stays open behind it. |
### Layout
| Setting | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Reading speed** | How much scrolling it takes to reveal the whole passage. **Slow** holds the shopper longest, **Fast** gets them through with the least effort, **Medium** sits between the two. |
| **Text opacity** | How visible a line is before it has been revealed. Low values make the reveal dramatic, higher values keep the whole passage legible from the start. |
### Section padding
| Setting | Description |
| ---------- | ------------------------------------------------------------------------------------------------ |
| **Top** | Adds space above the passage. Increase it when the story starts too close to the section before. |
| **Bottom** | Adds space below the passage. Increase it when the next section starts too abruptly. |
### Section divider
| Setting | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------ |
| **Show divider** | Draws a thin line between this section and the one above it, which helps when both share a background color. |
### What changes on the storefront
* The reveal is tied to scrolling, so a long passage on a slow speed keeps shoppers in this section for longer before they reach the next one.
* Everything is read over the picture, which makes the overlay opacity and the color scheme the two settings that decide whether the section works at all.
* There is only one passage per section. Add a second section if the story needs a second chapter.
### Related pages
* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Rich text](/velare/customize-your-pages/storytelling/rich-text.md): the plain alternative when the words do not need a background or an animation
* [Animation](/velare/customize-your-pages/animation.md): the theme wide motion settings
* [Colors](/velare/set-up-your-store/colors.md): where the color 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/reading-text.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.