Appearance
Scrolling text
This guide describes setting up the Scrolling text section.
Use the section to provide messages for visitors by using text that moves or "scrolls" across your store's pages. In the section's text, share information about your brand, describe products and collections, share announcements, or welcome customers to your store.
In the previous video, below the Header area, a Scrolling text section displays the text Scrolling text example moving across a store's Homepage.
Note
If a store visitor's computer has reduced motion set to on, the section's scrolling text animation is not displayed. Instead, as a fallback, the section's text is displayed as a static banner.
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 template that contains a Scrolling text section. For example, select the Homepage template.
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 (scrolling) text to display inside the section. |
| Repeat text | Select the checkbox Repeat text to turn on/off repeating text inside the section. With this setting enabled, the text repeatedly scrolls across the section to create an "infinity scrolling" effect. |
| Link | In the Link box, enter a URL or select a store page to link to. With this setting enabled, the section's text is hyperlinked. To remove a link, select the X icon inside the Link box. |
| 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. |
| Desktop font size scale | Adjust the slider Desktop font size scale to set a font size for the section's text on desktop display devices. The minimum value is -2 and the maximum is 7. |
| Mobile font size scale | Adjust the slider Mobile font size scale to set a font size for the section's text on mobile display devices. The minimum value is -2 and the maximum is 4. |
| Text font | Select the Text font radio buttons to set the section's text to use the same font as Heading or Body text. |
| Speed | Adjust the Speed slider to set a scroll speed between 10sec and 400sec (seconds) for scrolling text. |
| Direction | Select the Direction radio buttons to set the section's text to move from Right to left or Left to right. |
| Color > Color scheme | Use the Change dropdown to set the section's color scheme to Scheme 1 or Scheme 2. Select Edit to configure the current color scheme. Refer to Colors. |
| Color > Theme settings (link) | Follow the Theme settings link to access the Theme settings > Colors menu in Theme editor. Use the Colors menu to set how colors are displayed throughout your store. |
| Spacing > Space above | Move the Space above slider to adjust the amount of empty (white) space displayed above the section. The slider ranges from 0x (times) to 2x. |
| Spacing > Space below | Move the Space below slider to adjust the amount of empty (white) space displayed below the section. The slider ranges from 0x (times) to 2x. |
| 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. |