Scrolling text section
The Scrolling text section of Combine scrolls lines of text and small images across the page, like a marquee.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Scrolling text section moves lines of text, and small images between them, across the page in a continuous band, like a marquee. Use it for flash sales, news, promotions or product updates.
Where to find it: in the theme editor, select Add section and choose Scrolling text. Add one Text block per line, and Image blocks between them.
Section options
- Scroll direction sets which way the band moves: Left (the default, the text moves toward the left) or Right (toward the right).
- Scroll speed sets how fast it moves, 20 to 300 (default 100). Phones run at two thirds of that speed. Adjust it to the amount of text: long bands need more speed to stay readable.
- Pause on mouseover (on by default) stops the band while the mouse is over it, so customers can read it and select a link.
- Horizontal space sets the gap between the lines: Regular, Large or Extra large.
- Text size sets the size of the text: Small, Regular or Large (the default).
Design
- Background sets the band color (default light gray).
- Text sets the text color.
- Remove top margin and Remove bottom margin under Gutter remove the space around the band, for example to place it right under the header. See General section styling.
Blocks
The band repeats your blocks in order, as many times as it takes to fill the screen.
Text
Scrolling text is one line of the band. It takes bold, italic and links.
Please note that any paragraph will be shown on a single line, we've left the rich text editor just so you can add links and style the text with bold/italic.
Image
- Image shows a small square image between the lines of text, such as a logo or an icon: 80 x 80 px on desktop with the Large text size, smaller with smaller text and on mobile.
- Border radius rounds its corners, 0 to 100 px. Set it high for a round image.
How do I make the scrolling text slower?
Lower Scroll speed. The default is 100; 50 is half as fast. On phones the band always runs a third slower than on desktop.
Can I use the scrolling text as an announcement bar?
Yes. Add the Scrolling text section as the first section of the page and turn on Remove top margin. For rotating messages above the header on every page, use the Announcement bar section instead.
All Scrolling text settings
Every setting of this section, with its type and default.
Accepts these blocks: Text and Image.
Scroll direction (dropdown, default: Left): Sets the way the band moves: Left moves the text toward the left, Right toward the right. Options: Right, Left.
Scroll speed (slider 20 to 300, step 10, default: 100): Sets how fast the band moves. Phones run at two thirds of this speed.
Pause on mouseover (checkbox, default: on): Stops the band while the mouse is over it.
Horizontal space (dropdown, default: Regular): Sets the gap between the lines. Options: Regular, Large, Extra large.
Text size (dropdown, default: Large). Options: Small, Regular, Large.
Scrolling text section: Design
Where to find it: Scrolling text → Design
Background (color, default: #e9e9e9).
Text (color, default: transparent).
Scrolling text section: Gutter
Where to find it: Scrolling text → Gutter
The Scrolling text section uses the standard Gutter settings, listed in General section styling. Not available in this section: Decrease top margin.
Remove top margin (checkbox, default: off): Removes the space above the band.
Remove bottom margin (checkbox, default: off): Removes the space below the band, so the next section touches it.
Text block
Where to find it: Scrolling text → Add block → Text
Scrolling text (formatted text, default: "Introduce product promotions . Write about your brand. Flash deals!"): Sets one line of the band. Paragraphs show on one line; bold, italic and links work.
Image block
Where to find it: Scrolling text → Add block → Image
Image (image): Shows a small square image between the lines, such as a logo or an icon.
Border radius (slider 0 to 100 px, default: 0 px): Rounds the corners of the image. Set it high for a round image.
Related pages
- Announcement bar section: rotating messages above the header.
- Scrolling images section: a scrolling row of images with captions.
- General section styling: the margin settings.