Appearance
Scrolling text ​
This guide describes the Scrolling text section.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Configure the Scrolling text section ​
To configure your 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 Giftcard and Customer 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 text box, enter (scrolling) text to display inside the section. Format the text and add links using the Text editor pane. Note that, if a user's device is set to reduce motion, the scrolling text will display as a static banner as a fallback. |
Repeat text | Set the Repeat text checkbox to on or off . With this option enabled, the section's scrolling text repeats automatically - to create an infinity effect. |
Shape between repeated text | Use the Shape between repeated text options to select None, Circle, Diamond, Triangle, Star, 10 point star or Flower. |
Animate shape between text | Set the Animate shape between text checkbox to on or off . |
Link | In the Link box, enter a URL or select a link to a page. |
Font | Use the Font options to select Heading or Body. |
Apply heading effects | Set the Apply heading effects checkbox to on or off . To use this option, set the Font option to Heading. You can customize heading effects in Theme settings > Heading effects. |
Mobile font size scale | Adjust the Mobile font size scale slider between -2 and 7 . |
Desktop font size scale | Adjust the Desktop font size scale slider between -2 and 10 . |
Speed | Adjust the Speed slider between 10 and 400 . |
Direction | Use the Direction options to select Right to left or Left to right. |
Color > Color scheme | Use the Color scheme selector to select a color scheme. |
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. |
Color > Use gradient for background | Set the Use gradient for background checkbox to on or off . |
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. |