Scrolling banner
Overview:
The Scrolling Banner section is used to display continuously moving announcement banners, promotional messages, trust indicators, offers, highlights, or brand messaging in a marquee-style layout. It supports icons, text styling, scrolling animations, pill or label styles, responsive spacing, color schemes, and hover interactions to create visually engaging moving content across the storefront.
Blocks Configuration
Banner Block:
The Banner block displays an individual scrolling item inside the marquee section.
Content
| Setting | Description |
|---|---|
| Icon Image | Uploads an image or icon displayed beside the banner text. |
| Icon Size | Controls the display size of the icon image. |
| Banner Text | Defines the text content displayed inside the scrolling banner. |
Typography:
| Setting | Description |
|---|---|
| Text Size | Controls the size of banner text. |
| Text Weight | Adjusts the font thickness of banner text. |
| Text Case | Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Font Family | Allows switching between default and heading font family styles. |
Layout Style:
| Setting | Description |
|---|---|
| Banner Style | Controls whether banner items display as Label or Pill style. |
Section Configuration
Grid Settings:
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Adds spacing between scrolling banner items on desktop devices. |
| Mobile Grid Spacing | Adds spacing between scrolling banner items on mobile devices. |
Marquee Settings:
| Setting | Description |
|---|---|
| Marquee Direction | Controls scrolling direction such as Right to Left or Left to Right. |
| Marquee Speed | Controls the scrolling animation speed of banner items. |
| Pause on Hover | Pauses the scrolling animation when users hover over the banner section. |
Layout:
| Setting | Description |
|---|---|
| Container Layout | Determines whether the section uses a contained, contained content, or full-width layout. |
| Container Width | Controls the maximum width of the section container on desktop devices. |
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color palette to the scrolling banner section background and content. |
| Gradient Mode | Enables gradient styling for the section background. |