Appearance
Scrolling text
This guide describes setting up the Scrolling text section.
Use the section on a page to display text with a scrolling animation.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Set up a Scrolling text section
To set up a Scrolling text section:
In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Scrolling text section.
Note
The section can be added to any page, except Checkout and Gift card pages. To add the section to the current page, select Add section > Scrolling text. Refer to Shopify help: Add a section.
From the side menu, select Scrolling text.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Text | In the Text field, enter a single line of text to display as scrolling text inside the section. |
| Link | In the Link field, enter an external URL or select a store page. The link is applied to the section's scrolling text. |
| Mobile font size scale | Adjust the Mobile font size scale slider to set a font size for the section's text on mobile display devices. The minimum value is -2 and the maximum is 4. |
| Desktop font size scale | Adjust the Desktop font size scale slider to set a font size for the section's text on desktop display devices. The minimum value is -2 and the maximum is 9. |
| Font | Use the Font options to apply the Heading or Body font to the section's text. |
| Scroll > Speed | Adjust the Speed slider between 20 and 400 to specify how quickly scrolling content moves inside the section. If a user has reduced motion enabled, the scrolling text does not animate and instead displays as a static banner. |
| Scroll > Direction | Use the Direction options to set the section's text to scroll from Right to left or Left to right. |
| Scroll > Repeat text | Set the Repeat text option to on or off. With this option enabled, the section's text repeats automatically, creating an endless scrolling effect. |
| Repeat text separator > Spacing | Use the Spacing options to select S (small), M (medium), L (large), or XL (extra large). This option specifies the size of the spacing between each occurrence of repeated text. |
| Repeat text separator > Type | Use the Type options to select Gap, Character, or Button. This option specifies how the spacing between each occurrence of repeated text is displayed. The Gap option displays empty space between each occurrence. The Character option displays a specific text character between each occurrence. The Button option displays a button between each occurrence. |
| Repeat text separator > Character | Use the Character options to select ·, •, ↑, →, ↓, and more. This option specifies the text character displayed between each occurrence of repeated text inside the section. To use this option, set the Type option to Character. |
| Repeat text separator > Repeat character | Adjust the Repeat character slider between 1x and 6x. This option specifies the number of text characters that are displayed between each occurrence of repeated text inside the section. To use this option, set the Type option to Character. |
| Repeat text separator > Spacing between repeated characters | Use the Spacing between repeated characters options to select None, Hair, Thin, Punctuation, 4-per-em, and more. This option changes the spacing between text characters that separate each occurrence of repeated text inside the section. To use this option, set the Type option to Character. |
| Repeat text separator > Button label | In the Button label field, enter text to use as a label for the button that separates each occurrence of repeated text inside the section. The button uses the URL or store page you provide in the Link field. To use this option, set the Type option to Button. |
| Repeat text separator > Button style | Use the Button style options to apply a Primary or Secondary button style to the button that separates each occurrence of repeated text inside the section. To use this option, set the Type option to Button. |
| HTML tag > HTML tag | Use the HTML tag options to select None, H1, H2, or H3. This option allows you to set the appropriate HTML heading tag when you use scrolling text for a page heading. |
| Color > Color scheme | Use the Color scheme picker to select a color scheme for the section. Refer to Colors. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |
Note
To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.
To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.