Scrolling content
Last updated
Was this helpful?
Last updated
Was this helpful?
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
In the editor side panel, click (+) Add section and select Scrolling content. Click and hold the drag handles ⋮⋮ to re-order sections.
Sections include general styles. Click the section to find options for colors, spacing, and animations.
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.
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.
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.
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
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
Text size
Change the font size for all text blocks.
1 - 8
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
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.
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
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.
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
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
After adding the blocks, you can increase or decrease the space between content blocks.
Click section for settings
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
Section colors
Section spacing
Section animations