> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/storytelling/marquee.md).

# Marquee

Add continuously moving text, images, icons, or buttons for announcements, brand statements, and promotional content.

The **Marquee** block creates a moving row of content that repeats across the storefront. Use it for short announcements, brand messages, product highlights, partner logos, trust badges, or campaign copy that should feel active without taking over the whole page.

### 1. What you can do

* Add moving text, icons, images, buttons, and dividers
* Mix several Marquee child blocks in one scrolling row
* Control the Marquee width, height, gap, color treatment, speed, and direction
* Make the motion respond to page scroll
* Let customers pause the motion on hover or drag the Marquee manually
* Set separate layout, spacing, typography, icon size, and image size values for mobile

### 2. Understanding the Marquee structure

The Marquee contains five child block types that are designed for this block:

```
Marquee
├── Heading
├── Text
├── Icon
├── Image
├── Button
└── Divider
```

Add one child block for each piece of content that should appear in the moving row. The Marquee controls the shared frame, spacing, color scheme, and animation; each child block controls its own text, media, icon, link, divider dimensions, or visual style. Divider width is configured as a direct pixel value on desktop and mobile.

### 3. How to add a Marquee

You can add a Marquee inside compatible containers.

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a marquee block**

Click **Add block**, then select **Marquee**.
{% endstep %}

{% step %}
**Manage marquee child blocks**

Add, duplicate, remove, or reorder the **Marquee** child blocks you need.
{% endstep %}

{% step %}
**Edit each child block**

Edit each child block's content, such as text, icon, image, or button label.
{% endstep %}

{% step %}
**Configure the marquee settings**

Set the layout, color treatment, and automation settings.
{% endstep %}

{% step %}
**Preview the motion**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Marquee settings

<details>

<summary>Layout</summary>

Use these settings to size the Marquee frame and control the spacing between repeated child blocks.

<table data-search="false"><thead><tr><th width="101.2734375">Setting</th><th width="135.22265625">Options</th><th width="443.40234375">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> stretches the Marquee to fill the available width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Height</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> keeps the Marquee only as tall as its content needs.</li><li><strong>Fill</strong> stretches the Marquee to fill the available height.</li><li><strong>Custom</strong> lets you set an exact height in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td>Sets the spacing between items inside the Marquee. Increase the gap for large typography or image-led marquees, and reduce it for compact announcement strips.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate width, height, and gap controls specifically for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

Control how the Marquee blends with the surrounding section and whether the moving row fades at the edges.

| Setting                                     | Options                                                                                                                                                             | What it does                                                                      |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| **Inherit color scheme** / **Color scheme** | <ul><li>On</li><li>Off</li></ul>                                                                                                                                    | Inherits the parent color scheme or applies a custom color scheme to the marquee. |
| **Custom background**                       | <ul><li>On / Off</li><li>Background: None, Color (Solid, Gradient), Media (Image, Video, Show different media on mobile, Overlay, Enable parallax effect)</li></ul> | Adds a custom color, gradient, image, or video background behind the marquee row. |

</details>

<details>

<summary>Automation</summary>

These settings control how the Marquee moves and how customers can interact with it.

<table><thead><tr><th width="111.9921875">Setting</th><th width="130.2578125">Options</th><th width="440.48046875">What it does</th></tr></thead><tbody><tr><td><strong>Scroll trigger</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Makes the Marquee respond to page scrolling. The Marquee moves as customers scroll and changes direction when they scroll back up.</td></tr><tr><td><strong>Direction</strong></td><td><ul><li>From right</li><li>From left</li></ul></td><td>Chooses which side the Marquee content moves from <em>when <strong>Scroll trigger</strong> is off</em>.</td></tr><tr><td><strong>Speed</strong></td><td><ul><li>Slow</li><li>Normal</li><li>Fast</li></ul></td><td>Controls how quickly the Marquee moves. Use slower speeds for longer text or readable promotional messages, and faster speeds for decorative brand energy.</td></tr><tr><td><strong>Enable pause on hover</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Lets desktop customers pause the Marquee by hovering over it, which is useful when the row includes text, product names, or buttons.</td></tr><tr><td><strong>Enable drag interaction</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Lets customers drag the Marquee manually. Use it when the Marquee contains clickable or exploratory content such as images, logos, or buttons.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

Use padding for space inside the Marquee and margin for separation from neighboring blocks.

For both **Padding** and **Margin**, you can:

* turn custom spacing on or off;
* set top, bottom, left, and right values from 0-200px;
* turn on **Custom on mobile** and set separate mobile values from 0-100px.

</details>