Section reference
Scrolling text
Add a moving strip of short phrases, separated by a symbol, with Vellmar's scrolling text section.
Scrolling text runs a strip of short phrases across the screen in a continuous loop, like a news ticker. Each Text block adds one phrase, and you can show any of them as an outline instead of solid text. A separator symbol, ✦ by default, sits between the phrases.
The strip always has a pause button. For visitors who prefer reduced motion, it doesn't move at all.
Best practices
- Two to five words per phrase. Shoppers read it in passing, so keep each phrase short: "Natural materials", "Made in small batches".
- Set a calm speed. Time to scroll across is how long one full loop takes, from 10 to 80 seconds. Slower is easier to read; 40 seconds is a good start.
- Mix solid and outline text to add rhythm without adding color.
- Use it as a divider. It works well between a hero and the first product section, or above the footer. With Show borders on, it gets a thin line above and below.
- Don't put essential information in it. Moving text is easy to miss.
Preset tips
- None of the preset home pages includes it by default.
- Graphite's heavy uppercase type at the Large size gives a bold streetwear look.
- In Vellmar and Sorrel, the Small size in the serif heading font feels quieter.
- Handle
scrolling-text- Group
- Heroes and banners
- Where
- Add it to any template with Add section in the theme editor. Up to 6 blocks.
Settings
| Setting | Type | Default | Options |
|---|---|---|---|
| Motion | Drop-down | Moves with page scroll | Moves with page scroll, Scrolls continuously, Static |
| LookThe ticker sets each item in its own cell. With motion off it becomes one row that scrolls sideways. The single line moves its full length with page scroll and wraps into a centered block when motion is off. | Drop-down | Band | Band, Ticker with dividers, Single line between hairlines |
| Ticker labelDescribes the ticker to screen reader users. | Text | None | — |
| Text size | Drop-down | Large | Small, Medium, Large |
| Separator | Text | · | — |
| Separator color | Drop-down | Accent | Accent, Text |
| Time to scroll across | Slider | 40s | 10s to 80s, in steps of 2s |
| Show inside page width with rounded corners | Checkbox | Off | — |
| Color scheme | Color scheme | Scheme 1 | — |
Movement stops for customers who prefer reduced motion.
Padding
| Setting | Type | Default | Options |
|---|---|---|---|
| Top padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Bottom padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Top padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
| Bottom padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
Blocks
Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 6 blocks.
This has no settings.