Appearance
Scrolling text
This guide describes setting up the Scrolling text section.
Use the section to display text on a page with a moving/scrolling animation.
The previous video shows a Scrolling text section near the bottom of store's home page. The section contains the scrolling text "Design and made in Melbourne, Australia." In the upper left, part of Theme editor's section menu is displayed. The menu's Separator option is set to "—" (the Em dash character symbol). This setting specifies the symbol that's displayed between lines of repeatedly scrolling text inside the section.
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:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a Scrolling text section.
Note
The section can be added into any page, except Checkout and Giftcard pages. To add the section into 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 box, enter text to display as (scrolling) text inside the section. If a store visitor's browser has reduced motion enabled, the scrolling text will not animate. Instead, the text displays as static banner text. |
| Link | In the Link box, enter a URL for the section to use, or select a link to a store page. |
| Link > Connect dynamic source | To display a link from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Mobile font size scale | Adjust the Mobile font size scale slider to set a font size for the section's (collection links list) item 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 (collection links list) item text on desktop display devices. The minimum value is -2 and the maximum is 9. |
| Font | Use the Font setting to specify a font for the section's text. Set the section's text to use the same font as Heading or Body text. |
| Speed | Adjust the Speed slider to specify a scroll speed between 20 and 400 (seconds) for the section's scrolling text. |
| Direction | Use the Direction setting to set the section's scrolling text to move from Right to left or Left to right. |
| Repeat text | Select the Repeat text checkbox to turn on/off "repeating text" mode. With repeating text mode enabled, text is scrolled across the section repeatedly. |
| Separator | Use the Separator setting to select a symbol to use between lines of repeatedly scrolling text. |
| Repeat separator | Adjust the Repeat separator slider to set how many scrolling text separator symbols are displayed between lines of repeatedly scrolling text. The slider ranges from 1 to 6. |
| Spacing between repeated separators | Use the Spacing between repeated separators setting to specify a style for the spacing that's applied between each scrolling text separator symbol. |
| Color > Color scheme | Use the Color scheme options to select a color scheme for the section. Refer to Colors. |
| Color > Theme settings (link) | Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store. |
| 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 box, 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. |