Scrolling content

Theme section

Update This section was added in v3.1.0 on March 11, 2024. See our Changelog and theme update guide to learn more.

Use the Scrolling content section to display a moving banner for eye-catching promotions and store updates.

  • Add text, images, and icons with links

  • Change the style, spacing, and colors

  • Control the speed and direction of scrolling

Set up section

Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

STEPS

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

    Learn how to use templates in our Templates guide.

  2. Under Template, click (+) Add section and select Scrolling content.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add scrolling content

Add Text, Image, and Icon blocks to show as the scrolling content. You can add multiple blocks of the same type. Use the drag-and-drop handles ⋮⋮ to change their order.

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.

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.) Select or paste a Link to make the text a clickable link.

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

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

  6. Select the Size for all text blocks: Either Small, Medium, Large, Extra Large.

  7. Scroll down and click the Text color swatch to change the color of all text blocks.

  8. Click Save.

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.

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. (Optional.) Select or paste a Link to make the entire icon a clickable link.

  7. Click Save.

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.

Content styles

After adding the blocks, you can customize the content styles, which apply to all blocks in the section.

  • Adjust the gap between the blocks

  • Change the spacing above and below the content

  • Show a color border at the top and bottom

  • Change the background color

Tip If you want to remove all space between other sections, set the Padding sliders to 0 and set the padding under Section style to None.

STEPS

In your theme editor (Customize):

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

  2. Use the Gap slider to increase or decrease the space between content blocks: between 0 and 100 pixels.

  3. Use the Padding sliders to increase or decrease the space at the Top and Bottom of the content: between 0 and 50 pixels.

    To remove all space between other sections, set these options to 0 and set the padding under Section style to None.

  4. Choose to show a thin border line for the scrolling content. Select None, Top and bottom, Top only, or Bottom only.

  5. Select the color of the Text, Background, and Border (if enabled).

  6. Click Save.

Section style

Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.

STEPS

In your theme editor (Customize):

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

  2. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  3. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the color of Lines and borders set in the Theme settings.

  4. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

  5. Click Save.

Settings reference

Click (+) Add block to add new blocks. Click the following blocks to find their settings.

Text block

Setting
Description

Text

Enter text to show in the scrolling content.

Text link

Add a link to redirect visitors when they click the text.

Images

Setting
Description

Image

Upload an image to show in the scrolling content. We recommend a .png image with a transparent background and minimum dimensions of 200px by 200px.

Image size

Increase or decrease the width of the image for desktop screens.

Mobile image size

Increase or decrease the width of the image for mobile screens.

Image link

Add a link to redirect visitors when they click the image.

Icons

Setting
Description

Icon name

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.

Mobile icon width

Increase or decrease the width of the icon for mobile screens.

Click the Scrolling content section to find the following settings.

Content style

Setting
Description

Font

Choose to use the Heading or Body font for the text blocks, as selected in your theme settings.

Text size

Select the font size for the text blocks: Either Small, Medium, Large, Extra Large.

Scroll duration

Increase or decrease the number of seconds it takes for the content to scroll from beginning to end.

Scroll direction

Choose to scroll content towards the Left or Right.

Gap

Increase or decrease the space between content blocks: between 0 and 100 pixels.

Padding

Increase or decrease the space at the Top and Bottom of the scrolling content: between 0 and 50 pixels. To remove all space between other sections, set these options to 0 and set the padding under Section style to None.

Border

Show a thin border line above or below the scrolling content. Select None, Top and bottom, Top only, or Bottom only.

Colors

Select the color of the Text, Background, and Border (if enabled).

Section style

Setting
Description

Enable animation

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.

Top divider

Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings.

Padding

Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Related links

Gallery carousel Slideshow Theme sections

Last updated