Multipurpose theme documentation
Multipurpose Fashion Theme
Scrolling Text
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Hero & Banner Sections > Scrolling Text
Overview
The Scrolling text section displays a marquee-style banner with repeating text. Use it for announcements: free shipping, promotions, or brand slogans. The text scrolls horizontally (left or right) at a configurable speed. Optionally, the entire banner can link to a URL. No blocks; all content is in section settings.
CSS provides marquee animation by default. JavaScript enhances the section with drag-to-scrub, pause on hover, and dynamic direction switching.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or desired template.
- Click Add section.
- Choose Scrolling text.
- Position near the top (below header) or between sections.
- Save.
📷 Image placeholder: Add a screenshot of Scrolling text banner on storefront.
Interactive behavior (JS enabled)
When JavaScript is enabled, the section behaves as follows:
- Hover pause: Hovering over the marquee pauses the animation.
- Drag to scrub: Drag horizontally to scrub the marquee position.
- Drag direction flips flow: Drag right sets reverse; drag left sets forward.
- Link protection: If a Link is set, dragging prevents accidental navigation. The click is blocked only when a drag occurred.
- Focus pause: When the link receives keyboard focus, the animation pauses; it resumes on blur.
Quick Setup (2 Steps)
- Enter text: Add your message in Text (e.g. "Free shipping on orders over $50").
- Set style: Choose Color scheme, Direction, and Speed.
Section Settings
| Setting | Description | Default |
|---|---|---|
| Text | Scrolling message. If empty, the section does not render. | "Free shipping and returns" |
| Link | Optional URL. If set, entire banner becomes clickable | - |
| Text size | Font size (px) | 70 |
| Add spacing | Checkbox toggle to add spacing between repeated text | - |
| Direction | Forward or Reverse | Forward |
| Speed | Scroll speed (1=slow, 10=fast) | 5 |
| Color scheme | Background and text (theme schemes) | None |
Step-by-Step Setup
Step 1: Add the section
Add Scrolling text to your template. Position below the header for maximum visibility, or between sections for mid-page announcements.
Step 2: Enter your message
- In Text, enter your announcement (e.g. "Free shipping on orders over $50 • Shop now").
- Use bullet (•) or pipe (|) to separate multiple short messages if desired.
- Add Link if the entire banner should link somewhere (e.g. /collections/sale).
Step 3: Style and behavior
- Set Text size (70px is large; reduce for subtler look).
- Choose Direction: Forward or Reverse.
- Set Speed (5 is moderate; lower = slower, higher = faster).
- Enable Add spacing if repeated text feels cramped.
- Select Color scheme from theme (or None for default).
- Save.
Use cases
- Free shipping: "Free shipping on orders over $50"
- Promo banner: "Sale: Up to 40% off • Shop now"
- Brand slogan: "Handcrafted for you"
- Event: "New collection dropping Friday"
- Trust signal: "Free returns • 24/7 support"
Mobile behavior
- Text scales responsively based on selected Text size.
- Animation speed remains consistent across devices.
- No horizontal scroll bar appears.
Accessibility – Reduced motion
If a visitor has enabled reduced motion in their system preferences, the scrolling animation is automatically disabled for accessibility compliance. CSS removes the keyframe animation. When JavaScript is enabled, the rAF loop is also disabled. The section listens for prefers-reduced-motion changes and updates behavior dynamically.
Performance
- Uses GPU-accelerated transform animation.
- CSS provides marquee animation by default.
- JavaScript enhances with drag-to-scrub, pause on hover, and dynamic direction switching.
- Minimal DOM structure to prevent rendering overhead.
For merchants
- Keep messages concise (5–12 words). Long sentences reduce readability.
- Use separators such as • or | for multiple short highlights.
- Set moderate Speed (3–5) for best readability.
- Use high-contrast Color scheme for accessibility.
- Avoid using all caps for long messages.
- Link to high-conversion pages such as Sale, New Arrivals, or Collections.
- Test on mobile to ensure readability at selected text size.
Common mistakes
| Mistake | Fix |
|---|---|
| Message too long | Keep under 15 words; it repeats continuously |
| Speed too fast | Lower Speed (e.g. 3–4) for readability |
| No link when needed | Add Link if banner should be clickable |
| Wrong color scheme | Choose Color scheme that contrasts with page |
FAQs
There are three possible reasons:
- The visitor has Reduced motion enabled in their system settings.
- The Speed is set very low.
- JavaScript is disabled, and the CSS animation is paused due to hover state.
If reduced motion is enabled, animation is automatically disabled for accessibility compliance.
Yes. When JavaScript is enabled:
- Customers can drag horizontally to scrub the text.
- Dragging left or right changes the scrolling direction.
- Accidental link clicks are prevented if dragging occurs.
If no text is entered, the section will not render on the storefront. This prevents empty visual space.
No. The text remains in the DOM and is crawlable by search engines. The animation uses CSS transforms and does not hide or replace content.
No. The scrolling animation works with CSS only. JavaScript enhances the experience by enabling:
- Drag-to-scrub interaction
- Dynamic direction switching
- Hover pause behavior
If JavaScript is disabled, the marquee still functions using CSS animation.
Hover pause improves readability and usability. When hovering or dragging, the animation temporarily pauses.
For best readability:
- Speed 3 to 5 for announcements
- Speed 6 to 8 for short slogans
Avoid very high speeds for long messages.
Yes, but it is recommended to use only one per page for usability and visual clarity.
Yes. You can select one of the predefined theme color schemes. If "None" is selected, the section uses a white background and black text.
Yes. The section:
- Respects prefers-reduced-motion.
- Maintains visible text when animation is disabled.
- Prevents repetitive screen reader announcements.