Scrolling content

The Scrolling content section was added in v1.2.0 — Learn how to update your theme to access the latest features.

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

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.

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.

Section styles


Click the section to customize the general section styles for colors and spacing, available in all sections:

Add 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


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.

Add highlighted text

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.

STEPS

In your theme editor (Customize):

  1. Click the Text block to open the settings. The default block is labelled "Announce your sale".

    Click (+) Add block to create more Text blocks.

    Click Remove block or the eye icon to delete or hide a block.

  2. Enter Text to show in the scrolling content.

  3. (Optional.) Add pipe characters (|) before and after text to highlight it using the accent color from the section's color scheme.

  4. (Optional.) Select or paste a Link to make the text a clickable link.

In the sections panel, click Scrolling content to open the section settings.

  1. Select the Font to use for all text blocks: Either the Heading or Body font from your theme settings.

  2. Select the Size for all text blocks: Between 1 to 8 (from small to large).

  3. Click Save.

Click Text block to find 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.

Enable highlighting

When enabled, wrap text with pipe characters (| text |) to apply the color scheme's "Accent" color.

Click Scrolling content to find settings

Setting
Description
Options

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

Images


Use the Image block to upload a custom image. You can adjust the size of the image and add an optional link.

STEPS

In your theme editor (Customize):

  1. Click (+) Add block and select Image.

    You can add multiple Image blocks. Click Remove block or the eye icon to delete or hide a block.

  2. Click the Image block to open the settings.

  3. Click Select Image to select or upload an image.

    There are no required image dimensions. We recommend a minimum width of 200px.

  4. Use the Image size sliders to change the image width for desktop and mobile screens.

    Make sure the image size does not exceed the width of your uploaded image.

  5. (Optional.) Select or paste a Link to make the entire image a clickable link.

  6. Click Save.

Click Image block to find 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.

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.

Icons


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.

STEPS

In your theme editor (Customize):

  1. Click (+) Add block and select Icon.

    You can add multiple Icon blocks. Click Remove block or the eye icon to delete or hide a block.

  2. Click the Icon block to open the settings.

  3. Select an Icon name to display one of 30+ free icons.

  4. (Optional.) Upload your own icon image.

    There are no required image dimensions. We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px

  5. Use the Icon size sliders to change the icon width for desktop and mobile screens.

    Make sure the image size does not exceed the width of your uploaded image.

  6. Set the Icon color to use the accent or text color of the section's color scheme.

  7. (Optional.) Select or paste a Link to make the entire icon a clickable link.

  8. Click Save.

Click Icon block to find settings

Setting
Description
Options

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.

Scrolling behavior


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

STEPS

In your theme editor (Customize):

  1. Click the Scrolling content section to open the settings.

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

  3. Choose to scroll content towards the Left or Right.

  4. Click Save.

Click Scrolling content to find settings

Setting
Description
Options

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

Adjust gap


After adding the blocks, you can adjust the gap between content blocks

Click Scrolling content to find settings

Setting
Description
Options

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

Last updated