Skip to content

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.


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:

  1. 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.


    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.

  2. From the side menu, select Scrolling text.

    A Scrolling text section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
TextIn the Text box, enter text to display inside the section.
Repeat textSelect the checkbox Repeat text to turn on/off repeating text inside the section. With this setting enabled, the text repeatedly scrolls across the section.
LinkIn 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 sourceTo 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 sizeSelect 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.
FontSelect the Font radio buttons to set the section's text to use the same font as Heading or Body text.
SpeedAdjust the Speed slider to set a scroll speed between 10sec and 400sec (seconds) for scrolling text.
DirectionSelect the Direction radio buttons to set the section's text to move from Right to left or Left to right.
Color > Color schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Color > Disable transitionSelect 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 paddingSelect 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 paddingSelect the checkbox Remove bottom padding to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding.
Custom CSSSelect 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 sectionSelect Remove section to delete the section from the current page.