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

# Scrolling text

**Scrolling text** runs a line of words and icons continuously across the page, the way a ticker does. It carries a short message that should be noticed without taking up much height: free shipping over an amount, a sale ending, the values behind the brand, or simply a repeated brand phrase used as a graphic band. Because it moves, shoppers notice it even when they are scrolling quickly past.

Keep the wording short. A moving line is read in a glance, not studied.

<figure><img src="/files/fOI3bUuVCVHZ1X2PSgrd" 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 ticker on.
3. Click **Add section** and choose **Scrolling text** from the **Storytelling** group.
4. Add **Text** blocks for the wording and **Image** blocks for the symbols between them.
   {% endhint %}

*Result:* the blocks join into one line that travels across the screen, repeating as it goes.

### 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 moving line is allowed to take.</p><ul><li><strong>Stretch width</strong>: the line spreads to the browser width.</li><li><strong>Fixed width</strong>: the line stays within your page content width, set in <strong>Theme settings > Layout</strong>, so it reads as part of the page rather than a band across it.</li><li><strong>Full width</strong>: the line runs edge to edge, which is what makes a ticker feel endless.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors of the band. Schemes are defined in <strong>Theme settings > Colors</strong>. A contrasting scheme is what turns this from a quiet line into a stripe shoppers cannot miss.</td></tr></tbody></table>

#### Marquee settings <a href="#marquee-settings" id="marquee-settings"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Direction</strong></td><td>Which way the line travels. Moving against the reading direction draws more attention, moving with it is easier to follow.</td></tr><tr><td><strong>Speed</strong></td><td>How fast the line travels. Slow enough that a shopper can finish reading a phrase before it leaves the screen.</td></tr><tr><td><strong>Space between items</strong></td><td>The gap between one block and the next as they pass. Widen it when the phrases start running into each other.</td></tr></tbody></table>

#### Content settings <a href="#content-settings" id="content-settings"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Size</strong></td><td><p>How large the moving text is set, which decides whether the band reads as a note or as a graphic statement.</p><ul><li><strong>Base size</strong> and <strong>Large</strong>: for a practical message such as a shipping threshold.</li><li><strong>Heading 4</strong> and <strong>Heading 3</strong>: the middle ground, still readable at speed.</li><li><strong>Heading 2</strong> and <strong>X-Large</strong>: turns the phrase into a design element that fills the band.</li></ul></td></tr><tr><td><strong>Uppercase</strong></td><td>Sets the wording in capitals, which reads as louder and more uniform. Easier to take in at speed, harder for a long phrase.</td></tr><tr><td><strong>Image corner radius</strong></td><td>How rounded the pictures in the line look. Higher values soften them against the text, 0 leaves them square.</td></tr></tbody></table>

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

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

### Block settings <a href="#block-settings" id="block-settings"></a>

#### Text <a href="#text" id="text"></a>

| Settings    | Description                                                                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Content** | The phrase that travels across the screen. A few words is the limit for something a shopper reads in passing.                              |
| **Link**    | Where a click on this phrase leads, for example the sale collection it announces. Leave it blank for a message that is only informational. |

#### Image <a href="#image" id="image"></a>

| Settings           | Description                                                                                                                                 |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**          | Your own artwork placed between the phrases, such as a logo or a small graphic mark.                                                        |
| **Width**          | How large that artwork is drawn on desktop. Keep it close to the height of the text so the line stays even.                                 |
| **Svg icon**       | One of the symbols that ship with the theme, used instead of uploading artwork. A star or a dot is the usual choice for separating phrases. |
| **Link**           | Where a click on this symbol leads. Leave it blank when the symbol is only a separator.                                                     |
| **Mobile - Width** | The same size on phones, set separately so a symbol scaled for desktop does not dominate a narrow screen.                                   |

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

* The blocks repeat as the line travels, so a short list of phrases fills an endless band.
* The line moves on its own and cannot be paused by shoppers, which is why the message has to be short.
* Text and image blocks can be mixed in any order, so symbols can be used as separators between phrases.

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

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Gallery image](/velare/customize-your-pages/storytelling/gallery-image.md): the picture version of the same marquee behaviour
* [Marquee](/velare/customize-your-pages/decorative/marquee.md): the block version for use inside other sections
* [Announcement bar](/velare/set-up-your-store/header-group/announcement-bar.md): the header strip for messages that should follow shoppers around the store
* [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): where the color schemes and the fixed page width 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/scrolling-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.