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.
Click the section to edit general section styles for colors and spacing, available in all sections:
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 font, 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 of the section's selected color scheme.
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 style
Choose the font for the text blocks, based on your theme settings.
Heading Default Body
Text size
For desktop screens, change the font size for all text blocks.
1 - 8
Mobile text size
For mobile screens, 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 30+ icons or upload a custom icon image
Change the icon size and color
Make the icon a clickable link.
Click icon block for settings
Icon
Select from 30+ icons 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. Make sure the icon width does not exceed the width of your custom image.
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 section's color scheme.
Accent Default 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
Editing templates will change all pages that use the same template. for different page layouts, or in the same template.
Section colors
Section width
Section padding
