Scrolling text

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

Use this section to display scrolling text on a page.

The previous image shows a Scrolling text section below the header on a store's home page. The section contains the scrolling text New guide. In the upper left, part of the Theme editor's section menu is displayed. The menu's Character option is set to ↓ (the down arrow symbol). This setting specifies the symbol to display between each occurrence of repeated text in the section.

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:

1. In the Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Scrolling text section.

   Note

   The section can be added to any page except Checkout and Gift card 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 a single line of text to display as scrolling text in the section.
Link	In the Link field, enter an external URL or select a store page. The link is applied to the section's scrolling text.
Mobile font size scale	Adjust the Mobile font size scale slider to set a font size for the section's text on mobile display devices. The minimum value is -2 and the maximum is 4.
Desktop font size scale	Adjust the Desktop font size scale slider to set a font size for the section's text on desktop display devices. The minimum value is -2 and the maximum is 9.
Font	Use the Font options to apply the Heading or Body font to the section's text.
Scroll > Speed	Adjust the Speed slider between 20 and 400 to specify how quickly scrolling content moves in the section. If a user has reduced motion enabled, the scrolling text does not animate and instead displays as a static banner.
Scroll > Direction	Use the Direction options to set the section's text to scroll from Right to left or Left to right.
Scroll > Repeat text	Set the Repeat text option to on or off. With this option enabled, the section's text repeats automatically, creating an endless scrolling effect.
Repeat text separator > Spacing	Use the Spacing options to select S (small), M (medium), L (large), or XL (extra large). This option specifies the size of the spacing between each occurrence of repeated text.
Repeat text separator > Type	Use the Type options to select Gap, Character, or Button. This option specifies how the spacing between each occurrence of repeated text is displayed. The Gap option displays empty space between each occurrence. The Character option displays a specific text character between each occurrence. The Button option displays a button between each occurrence.
Repeat text separator > Character	Use the Character option to select ·, •, ↑, →, ↓, and more. This option specifies the text character displayed between each occurrence of repeated text in the section. To use this option, set the Type option to Character.
Repeat text separator > Repeat character	Adjust the Repeat character slider between 1x and 6x. This option specifies the number of text characters that are displayed between each occurrence of repeated text in the section. To use this option, set the Type option to Character.
Repeat text separator > Spacing between repeated characters	Use the Spacing between repeated characters options to select None, Hair, Thin, Punctuation, 4-per-em, and more. This option changes the spacing between text characters that separate each occurrence of repeated text in the section. To use this option, set the Type option to Character.
Repeat text separator > Button label	In the Button label field, enter text to use as a label for the button that separates each occurrence of repeated text in the section. The button uses the URL or store page you provide in the Link field. To use this option, set the Type option to Button.
Repeat text separator > Button style	Use the Button style option to apply a Primary or Secondary button style to the button that separates each occurrence of repeated text in the section. To use this option, set the Type option to Button.
HTML tag > HTML tag	Use the HTML tag options to select None, H1, H2, or H3. This option allows you to set the appropriate HTML heading tag when you use scrolling text for a page heading.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
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.