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

# Marquee

The **Marquee** block slides a row of content steadily across the screen so it keeps catching the eye without occupying much height. It is added inside a section and then filled with its own nested blocks, which is what lets one strip carry offers, brand names, stockist logos, or a repeated promise. It suits short items that gain from repetition, and works poorly for anything shoppers need time to read, since the content never stops moving.

<figure><img src="/files/PxsMxvytbKqWNkniLPsx" 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 the strip to sit in.
3. Click **Add block** and choose **Marquee**.
4. Inside the marquee, add the nested blocks that should scroll, such as icon, heading, or text.
5. Set **Direction**, **Speed**, and **Space between items**.
   {% endhint %}

*Result:* the nested content starts sliding across the preview at the speed you set, repeating as it goes.

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

| Setting                  | Description                                                                                                                                                                                 |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Inherit Color Scheme** | Leaves the strip in the colors of the section around it, which is the default and keeps it from standing out as a separate band.                                                            |
| **Colors**               | <p><em>Only visible when Inherit Color Scheme is disabled</em>.</p><p>Gives the strip its own scheme instead of the section's, which is how a contrasting band across the page is made.</p> |
| **Direction**            | Which way the content travels, Left (Default) or Right. Match it to the reading direction of your store so the wording is not always arriving backwards.                                    |
| **Speed**                | How long one full pass takes, from 5s to 50s. A lower number moves faster, so raise it when the items are words shoppers should be able to read as they go by.                              |
| **Space between items**  | The gap left between one repeated item and the next, from 10px to 200px. Wider gaps make each item read on its own, tighter ones make the strip feel continuous.                            |

### 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**    | Adds space above the strip so it separates from the block over it. Accepts 0px to 100px. |
| **Bottom** | Leaves space under the strip before the next block starts. Accepts 0px to 100px.         |

### Marquee Supported Nested Blocks <a href="#nested-blocks" id="nested-blocks"></a>

The content that scrolls within the marquee is built using the following supported inner blocks:

| Block Type  | Usage in Marquee                                                                                         |
| ----------- | -------------------------------------------------------------------------------------------------------- |
| **Icon**    | Small graphics such as stars, logos, or separators travelling along with the rest of the row.            |
| **Heading** | Short prominent phrases, for when the strip itself is the message rather than a decoration.              |
| **Text**    | Announcements, quotes, or plain strings that scroll as ordinary wording.                                 |
| **Group**   | Holds several elements together, so an icon and its words travel as one piece instead of drifting apart. |

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

* A band of moving content runs across the page, repeating as long as shoppers stay on it.
* Content comes entirely from the nested blocks, so an empty marquee shows nothing at all.
* Movement pulls attention away from static content nearby, which is why one marquee per page usually works better than several.

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

* [Icon](/velare/customize-your-pages/basic/icon.md), [Heading](/velare/customize-your-pages/basic/heading.md), [Text](/velare/customize-your-pages/basic/text.md): the blocks that fill the strip
* [Group](/velare/customize-your-pages/layout/group.md): for keeping an icon and its wording together as one scrolling item
* [Decorative](/velare/customize-your-pages/decorative.md): the other blocks in this group


---

# 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/decorative/marquee.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.
