Scrolling text runs a line of short phrases across the screen in a continuous loop, like a news ticker. It works as a divider between two sections and as a place for a few words of attitude. The Broadsheet preset uses it under its cover.
The text stops scrolling when a customer hovers over it or moves keyboard focus to it, and a pause button lets customers stop it. For customers who have asked their device to reduce motion, it does not scroll at all.
Where to find it
In the theme editor, click Add section and choose Scrolling text. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Text size sets the phrases Large, as display text, or Small, as a quiet strip of small capitals. Speed sets how fast the line moves. The phrases repeat as often as needed to fill the width.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Speed | Slow, Medium or Fast. Default: Medium. | How fast the text moves across the screen. |
| Text size | Small or Large. Default: Large. | Large display text, or a small strip of capitals. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: None. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: None. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 8 blocks.
Text
One phrase. Phrases follow each other in block order.
| Setting | Options | What it does |
|---|---|---|
| Text | Text. | A short phrase. Select a word and make it italic for emphasis. |
Tips
- Keep each phrase to a few words. Nobody reads a sentence that is moving.
- Don't put anything essential here, such as a discount code. Customers who prefer reduced motion see only the start of the line.
- Set Top spacing and Bottom spacing to Small or None to use it as a divider.