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 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, a Scrolling text section is displayed on a store's home page. On the left, the section's Repeat text checkbox is set to on. With this setting enabled, the text scrolls across the section repeatedly.
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 page that contains a Scrolling text section. For example, select the Home page.
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 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. |
| 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, if available, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Text size | Select the Text size radio buttons to set a size for text inside the section. Set the section's text to use the same size as Feature heading, Standard heading, or Base font text. Refer to Typography. |
| Font | Select the 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 Color scheme options to select a color scheme for the section. Refer to Colors. |
| Color > Disable transition | Select the checkbox Disable transition to turn on/off overriding the color transitions set in the section's theme settings. Setup defaults for this setting in Theme Settings > Colors > Transitions. |
| Spacing > Remove top padding | Select the checkbox Remove top padding to add/remove the spacing (padding) that's displayed above the section. Refer to W3 Schools: CSS Padding. |
| Spacing > Remove bottom padding | Select the checkbox Remove bottom padding to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding. |
| 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. |