Scrolling content
Section
Last updated
Section
Last updated
Add the Scrolling content section to display a moving banner for eye-catching promotions and store updates.
Add text, images, and icons with links
Add highlighted text
Control the speed 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.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the 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.
Use the Text block to display a custom message with an optional link. In the section settings, you can select the font, size, and color of all text blocks.
Highlight a word or words within the text. With Enable highlighting toggle, use pipe characters (| |) on either side of the text you want to highlight.
Highlight text used the Accent color selected in the sections' color scheme.
Click Text block to find settings
Text
Enter text to show in the scrolling content.
Text link
Add a link to redirect visitors when they click the text.
Enable highlighting
When enabled, wrap text with pipe characters (| text |) to apply the color scheme's "Accent" color.
Click Scrolling content to find settings
Text style
Choose the font for the text blocks, as selected in your theme settings.
Heading Default Body
Text size
For desktop screens, change the font size for all text blocks.
1 - 8 Default: 7
Mobile text size
For mobile screens, change the font size for all text blocks.
1 - 8 Default: 6
Use the Image block to upload a custom image. You can adjust the size of the image and add an optional link.
Click Image block to find 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.
20 - 500 px Default: 150
Mobile image size
Adjust the width of the image for mobile screens.
20 - 350 px Default: 150
Image link
Add a link to redirect visitors when they click the image.
Use the Icon block to display a free icon or upload your own icon image. You can adjust the size of the icon and add an optional link.
Click Icon block to find 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.
1 - 75 px Default: 70
Mobile icon width
Increase or decrease the width of the icon for mobile screens.
1 - 75 px Default: 60
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 speed and direction of scrolling.
Click Scrolling content to find settings
Scroll duration
Adjust the number of seconds it takes for the content to scroll from beginning to end.
5 - 45 secs Default: 10
Scroll direction
Choose the direction of scrolling.
Left Default Right
After adding the blocks, you can adjust the gap between content blocks
Click Scrolling content to find settings
Gap
For desktop screens, adjust the space between content blocks.
0 - 100 px Default: 50
Mobile gap
For mobile screens, adjust the space between content blocks.
0 - 100 px Default: 50
