Scrolling content

Scrolling content was added in v3.0 — Learn how to update your theme to access new features.

The Scrolling content section displays a banner with moving text, images, and icons. Use this section for eye-catching promotions and store updates.

• Add scrolling text, images, and icons with optional links

• Add highlighted text

• Control the duration and direction of scrolling

Set up section

---

In the editor side panel, click (+) Add section and select Scrolling content. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles

Sections include general styles. Click the section to find options for colors, spacing, and animations.

Section colors

Section spacing

Section animations

Editing templates change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.

Content blocks

---

Add Text, Image, and Icon blocks to show as the scrolling content. You can add multiple blocks of the same type.

• Under the Scrolling content section, click (+) Add block.

• Use the drag-and-drop handles ⋮⋮ to rearrange the blocks.

• Click a block to edit content and settings.

Text block

---

Add scrolling text with an optional link. Click (+) Add block to create more text blocks. Click the block to:

• Enter text for a scrolling message

• Make the text block a clickable link

• Highlight part of the text with an accent color

In the section settings, you can change the text size and colors of text blocks.

Add text link

---

In the Text link field, add a link to apply to the entire text block.

If you've added a Text link, do not apply linked text to the content. Using the rich formatting buttons to remove any linked text.

Add highlighted text

---

Highlight a word or words within the text block. With Enable highlighting toggled, enter pipe characters (|) on either side of the words you want to highlight. For example: |text|

Highlighted text uses the Accent color. Either use the default accent color from your theme settings, or use the override with custom colors option in the section settings.

Click text block for settings

Setting	Description
Text	Enter text to show in the scrolling content.
Text link	Add a link to redirect visitors when they click the text block. If enabled, do not apply linked text to the content using the rich formatting buttons.
Enable highlighting	When enabled, wrap text with pipe characters (| text |) to apply the accent color.

Click section for settings

Setting	Description	Options
Text size	Change the font size for all text blocks.	1 - 8

Image block

---

Add a scrolling image with optional link. Click (+) Add block to create more image blocks. Click the block to:

• Upload a custom image

• Change the image size

• Make the image a clickable link.

Click image block for settings

Setting	Description	Options
Image	Select or upload an image. We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px.
Image size	Adjust the width of the image for desktop screens. Make sure the image size does not exceed the width of your uploaded image.	20 - 500 px
Mobile image size	Adjust the width of the image for mobile screens.	20 - 350 px
Image link	Add a link to redirect visitors when they click the image.

Icon block

---

Add a scrolling icon with an optional link. Click (+) Add block to create more icon blocks. Click the block to:

• Select from over 100+ icons

• Change the icon size and color

• Make the icon a clickable link.

Click icon block for settings

Setting	Description	Options
Icon	Select an icon to show in the scrolling content.
Custom icon image	Upload your own icon to show in the scrolling content. We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px.
Icon width	Increase or decrease the width of the icon for desktop screens.	1 - 75 px
Mobile icon width	Increase or decrease the width of the icon for mobile screens.	1 - 75 px
Icon color	Choose an icon color based on the default or custom section colors.	Accent Text
Icon link	Add a link to redirect visitors when they click the icon.

Scrolling behavior

---

In the section settings, change the duration (speed) and direction of scrolling.

• Use the Scroll duration slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.

• Choose to scroll content towards the Left or Right.

Click section for settings

Setting	Description	Options
Scroll duration	Change the number of seconds it takes for the content to scroll from beginning to end.	5 - 45 secs
Scroll direction	Choose the direction of scrolling.	Left Default Right

Gap between blocks

---

After adding the blocks, you can increase or decrease the space between content blocks.

Click section for settings

Setting	Description	Options
Gap	For desktop screens, adjust the space between content blocks.	0 - 100 px
Mobile gap	For mobile screens, adjust the space between content blocks.	0 - 100 px