# Marquee Section

### **What You’ll Learn**

* How to create a scrolling text marquee
* How to add image, slideshow, or video backgrounds
* How to adjust text speed, size, and layout
* How to customize desktop and mobile appearance

<figure><img src="/files/qZybwSxCEvmBya3EKHO0" alt=""><figcaption></figcaption></figure>

***

### 🧩 Section Overview

The Marquee section displays large, horizontally scrolling text with optional backgrounds. It's perfect for bold messaging—like promotional statements, slogans, or headlines.

This section supports background customization with:

* Static images
* Slideshows (up to 3 slides)
* Videos (autoplayed and muted)
* Solid color fills

***

### How to Add the Section

1. In the **Shopify Theme Editor**, click **Add section**
2. Select **Marquee**
3. Drag it to your desired spot in the layout

***

### Marquee Text Settings

* **Marquee Text Content**: Add your scrolling text here
* **Show Marquee Text**: Toggle on or off (helpful if using as a background-only section)
* **Marquee Text Size (Desktop)**: Adjust text size in pixels
* **Marquee Text Size (Mobile)**: Set a different size for small screens
* **Marquee Text Color**: Set the text color using a hex code
* **Marquee Speed**: Controls how fast the text moves (higher = faster)

> 💡 Tip: Speeds between 5 and 15 usually offer the best balance of visibility and motion.

***

### Background Style Options

Choose your background style under **Marquee Background Style**:

* **Solid Color**: Set different colors for desktop and mobile
* **Image Background**: Upload separate images for desktop and mobile
* **Slideshow Background**: Upload up to 3 rotating images
* **Video Background**: Upload a muted `.mp4` file that loops

> ⚠️ On iPhones in Low Power Mode, videos may not autoplay due to system restrictions.

***

### Layout & Display

* **Section Height**: Choose from:
  * Full Height (fills the entire screen)
  * Auto Height (based on content)

#### Overlay Settings

Customize overlays for both **Desktop** and **Mobile**:

* **Overlay Color (Top/Bottom)**: Adds shading above or below
* **Overlay Opacity (Top/Bottom)**: Adjust to control transparency

Use overlays to improve text contrast on bright backgrounds.

***

### Spacing

You can set different top and bottom spacing for desktop and mobile:

**Desktop Spacing**

* Top: Adjustable (default is 0px)
* Bottom: Adjustable (default is 0px)

**Mobile Spacing**

* Top: Adjustable (default is 0px)
* Bottom: Adjustable (default is 0px)

> 💡 Use extra spacing if the marquee is stacked near other full-height sections.

***

### Mobile Fallback Option

If your main background is a **video** or **slideshow**, you can force the mobile version to show an image instead.

* Toggle **Override Mobile Background with Image** to enable this

This is helpful for performance and reliability on older devices or low-bandwidth conditions.

***

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# Agent Instructions: 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://docs.openspaces.design/readme-1/sections-and-features/marquee-section.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.