Openspaces Labs
  • 🏠 Getting Started
    • Installing the Plain Jane Theme
    • Theme Versions + Features Table
  • 🧰 Theme Settings
    • Announcement Bar
    • Animations
    • Cart Drawer
    • Clock Settings
    • Collection Layout Settings
    • Cursor Settings
    • Footer Settings
    • Global Menu Settings
    • Music Player Settings
    • Logo Settings
    • Skip Home Screen
    • SEO Settings
    • Main Theme Color
    • Typography Settings
  • 🗂 Pages & Menus
    • Homepage + Menu
      • Center Menu
      • Side-Aligned Menu
      • Compact Menu Layout (Global Menu)
    • Collection Page
      • Classic Collection
      • Sidebar Collection
    • Collection List Page
    • Product Page
      • Product Section (Showcase)
      • Product Section (Thumbnail)
    • About Page
    • Contact Page
    • Lookbook Page
      • 🛠 How to Create a Lookbook Page
      • 🗂 Creating a Lookbook Archive
      • ⚙️ Lookbook Settings & Features
    • Password Page
      • How To Password Lock Store
      • How To Add and Set Timer
      • How To Collect Emails + SMS
      • Using The Store Unlock Animation
  • 🧩Sections and Features
    • Blog Feed Section
    • Collection Display Section
    • Collection List Section
    • Email Signup (Popup)
    • Email Signup (Embed)
    • FAQ Section
    • Hero Section
    • Image Selector Section
    • Image Stream Section
    • Marquee Section
    • Preloader Section
    • Product Carousel Section
    • Text Block Section
    • Video Spotlight Section
  • 🏷️Advanced
    • How to Add Size Charts to Each Product
    • Setting Up Color Swatches
    • Setting Up Model Info
    • Setting Up Pre-Orders
  • 👥Customer Accounts
    • How To Setup Customer Accounts
    • Login Page
    • Register Page
    • Account Dashboard Page
    • Address Management Page
  • 🌎Languages & SEO
    • Language Files (Locales)
    • Update Favicon
    • Meta Descriptions
  • ⭐️Plain Jane Interactive
    • How to Create an Interactive Space
    • Setting The Background
    • Adding Interactive Points
    • Using Transition Arrows
    • Best Practices for Mobile + Spacing
  • 💬 FAQ & Troubleshooting
Powered by GitBook
On this page
  • What You’ll Learn
  • 🧩 Section Overview
  • How to Add the Section
  • Marquee Text Settings
  • Background Style Options
  • Layout & Display
  • Spacing
  • Mobile Fallback Option
  • Need Help?
  1. 🧩Sections and Features

Marquee Section

PreviousImage Stream SectionNextPreloader Section

Last updated 4 days ago

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

🧩 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?

  • 📧 Email us at: support@openspaces.design

  • 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website

💬 Join our community on Discord:

https://discord.gg/hcc2GvgZc6