Scrolling text

This guide describes how to set up the Scrolling text section.

Use the section to add an area with moving or scrolling text to a page.

The previous image shows an example store's home page. In the upper left, part of the Theme editor's Scrolling text section menu is displayed. The menu's Animate shape between text option is enabled. This option turns on or off animation for shapes in the section. The shapes are displayed between each instance of repeated text. For example, in the previous image, the Triangle shape is displayed between the section's repeated text "All flavour no filler". With this setting on, the animation is applied to the section's triangle shape.

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:

1. In the 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 to any page, except Gift card and Customer pages. To add the section to the current page, select Add section > Scrolling text. Refer to Shopify help: Add a section.

2. From the side menu, select Scrolling text.

3. Select a setting described in the following table.

Setting name	Description
Text	In the Text field, enter text to display as scrolling text in the section. Note that, if a user's device is set to reduce motion, the scrolling text will display as a static banner as a fallback.
Link	In the Link field, enter a URL or select a store page for the section's text to use as a link. The link opens when a visitor selects the section's text.
Font	Use the Font option to set the section's text to use the same font as Heading or Body text.
Apply heading effects	Use the Apply heading effects option to turn on or off the heading effects applied to the section's text. 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 to specify a size for the section's text on mobile display devices. Refer to Typography.
Desktop font size scale	Adjust the Desktop font size scale slider between -2 and 11 to specify a size for the section's text on desktop display devices. Refer to Typography.
Scrolling text > Repeat text	Use the Repeat text option to turn on or off repeating the section's scrolling text automatically. With this option enabled, repeating the section's scrolling text creates an infinity effect. Note that, if a user's device is set to reduce motion, the scrolling text will display as a static banner as a fallback.
Scrolling text > Shape between repeated text	Use the Shape between repeated text option to select None, Circle, Diamond, Triangle, Star, 10 point star or Flower. The shape you select is displayed between each instance of repeated text. To use this setting, enable the Repeat text option.
Scrolling text > Animate shape between text	Use the Animate shape between text option to turn on or off animation for shapes in the section. The shapes are displayed between each instance of repeated text. To use this setting, enable the Repeat text option and select a shape other than None in the Shape between repeated text setting.
Scrolling text > Speed	Adjust the Speed slider between 10 and 400 to specify a speed for scrolling text in the section.
Scrolling text > Direction	Use the Direction option to set scrolling text in the section to move Right to left or Left to right.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Color > Use gradient for background	Use the Use gradient for background option to turn on or off using a gradient as the section's background.
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 CSS field, 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.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.