.png){kind=logo}
Scrolling banner
What is the scrolling banner section?
The Scrolling banner section is a horizontally moving bar that is used to inform customers about ongoing product promotions, highlight brand's unique story and offerings, and showcase exclusive flash deals.
It can also be used to display breaking news, share up-to-date information, and provide brief yet exciting updates across the entire store.
How to add scrolling banner section
.svg){kind=icon}
- Access the Theme Editor: Navigate to `
Online Store > Themes > Customize`. - Add a Section: Click on `
Add section`and select the desired section from the list of available sections. - Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.
General section settings
Within this section, you'll find common settings like visibility options and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.
Unlike the other sections that contain a section header, this particular section does not include one. Instead, the content is presented as blocks within the section.
Section Settings:
- Spacing Between Rows (Desktop & Mobile): Adjust the vertical spacing between scrolling rows (-50px to 150px).
- Spacing Between Blocks (Desktop & Mobile): Set the horizontal spacing between individual blocks within a row (30px to 200px).
- Scrolling Type: Choose between scrolling on user scroll, automatic rotation, or both.
- Pause on Hover: Enable or disable pausing the scroll effect when the user hovers over the section.
First Row Settings:
- Scrolling Direction: Select left or right scrolling direction.
- Scrolling Speed: Adjust the scrolling speed (3s to 50s).
- Rotation Angle: Tilt the row slightly (-5° to 5°) for a more dynamic effect.
- Vertical Spacing (Desktop & Mobile): Set spacing between rows (0px to 50px).
Second Row Settings:
- Same customization options as the first row, allowing for independent adjustments.
Color Schemes:
- First Row Color Scheme: Select a predefined color scheme for the first row.
- Second Row Color Scheme: Select a predefined color scheme for the second row.
- Apply Transparent Background: Optionally make the background transparent for either row.
Block Settings:
- Text: Add scrolling text with customizable styles.
- Text Font: Choose between heading or body font style.
- Text Size (Desktop & Mobile): Set text size (12px to 150px for desktop, 12px to 64px for mobile).
- Font Weight: Adjust text weight (300 to 900).
- Highlight Text Style: Apply effects such as underline, background mask, or outline.
- Visibility: Choose to display in the first row, second row, or both.
- Icon: Add an icon to the scrolling banner.
- Select Icon: Choose from a predefined list or upload a custom icon.
- Icon Size (Desktop & Mobile): Adjust the icon size (16px to 100px).
- Visibility: Choose to display in the first row, second row, or both.
- Image: Add an image to the scrolling banner.
- Upload Image: Upload an image for the banner.
- Image Link: Add a clickable URL.
- Maximum Height (Desktop & Mobile): Set the image height (24px to 200px for desktop, 24px to 100px for mobile).
- Visibility: Choose to display in the first row, second row, or both.
- Button: Add a button within the scrolling banner.
- Button Label: Set custom button text.
- Button Link: Add a clickable URL.
- Button Style: Choose between primary and outline button styles.
- Show Icon in Button: Toggle the display of an icon inside the button.
- Visibility: Choose to display in the first row, second row, or both.
