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.
The previous video shows a Scrolling text section on a store's home page. In the upper left, part of Theme editor's section menu is displayed. The menu's Text box contains the text "Designed and made in Melbourne, Australia". The section scrolls the text across the page.
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. |
| Text > Connect dynamic source | To display a text from a dynamic source, if available, select the Connect dynamic source icon beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| 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. |
| Mobile font size scale | Adjust the Mobile font size scale slider to set a font size for the section's (feature) text on mobile display devices. The minimum value is -2 and the maximum is 7. |
| Desktop font size scale | Adjust the Desktop font size scale slider to set a font size for the section's (feature) text on desktop display devices. The minimum value is -2 and the maximum is 10 |
| 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 20 and 400 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. |
| 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. |