Announcement bar
Overview:
The Announcement Bar section is used to display scrolling promotional messages, store updates, shipping announcements, trust messaging, or important notifications at the top of the storefront. It supports multiple announcement items, marquee scrolling animation, typography customization, responsive spacing, container layouts, borders, and color schemes. The section is available within the Header group.
Blocks Configuration
Announcement Block:
The Announcement block displays an individual message inside the scrolling announcement bar. Multiple announcement blocks can be added to display different messages.
Content
| Setting | Description |
|---|---|
| Announcement Text | Defines the announcement message displayed inside the scrolling bar. |
The announcement text uses an Inline Rich Text field, with “Welcome to our store!” as the default content.
Typography:
| Setting | Description |
|---|---|
| Text Size | Controls the size of the announcement text such as Large, Medium, or Small. |
| Text Weight | Adjusts the font thickness of the announcement text ranging from Thin (100) to Black (900). |
| Text Case | Changes the text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Font Family | Allows switching between the Default and Heading font family styles. |
| Text Color Style | Applies predefined color styling to the announcement text, such as Default or Heading. |
The default typography settings are Small text size, Normal (400) font weight, Default text case, Default font family, and Heading text color style.
Section Configuration
Visibility Settings:
| Setting | Description |
|---|---|
| Show on Homepage Only | Displays the announcement bar on the homepage when enabled. |
This setting is disabled by default.
Grid Settings:
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Adds spacing between scrolling announcement items on desktop devices. Default: 50px. |
| Mobile Grid Spacing | Adds spacing between scrolling announcement items on mobile devices. Default: 10px. |
The desktop grid spacing can be configured from 0px to 200px, while mobile grid spacing can be configured from 0px to 100px.
Marquee Settings:
| Setting | Description |
|---|---|
| Marquee Direction | Controls the scrolling direction such as Right to Left or Left to Right. |
| Marquee Speed | Controls the scrolling animation duration of the announcement bar. Default: 15s. |
| Pause on Hover | Pauses the scrolling animation when users hover over the announcement bar. |
The marquee speed can be configured from 5s to 50s, and Pause on Hover is enabled by default.
Layout:
| Setting | Description |
|---|---|
| Container Layout | Determines the width/layout of the announcement bar using Page Width, Contained Content, or Container Fluid. |
| Border Style | Controls whether the announcement bar has No Border, Top Border, Bottom Border, or Top & Bottom Border. |
| Container Size | Controls the maximum desktop container width from 50% to 100%. |
The default container layout is Contained Content, the default border is Bottom Border, and the default container size is 100%.
The Border Style setting is only displayed when Page Width is not selected.
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color scheme to the announcement bar. |
The default color scheme is Scheme 1.
Inner Spacing:
These settings control spacing inside the announcement bar.
| Setting | Description |
|---|---|
| Top Padding (Desktop) | Adds spacing inside the top area of the section on desktop devices. |
| Bottom Padding (Desktop) | Adds spacing inside the bottom area of the section on desktop devices. |
| Left Padding (Desktop) | Controls inner left spacing on desktop devices. |
| Right Padding (Desktop) | Controls inner right spacing on desktop devices. |
| Top Padding (Mobile) | Adds spacing inside the top area of the section on mobile devices. |
| Bottom Padding (Mobile) | Adds spacing inside the bottom area of the section on mobile devices. |
| Left Padding (Mobile) | Controls inner left spacing on mobile devices. |
| Right Padding (Mobile) | Controls inner right spacing on mobile devices. |
Default Values:
Desktop:
- Top: 14px
- Bottom: 14px
- Left: 75px
- Right: 75px
Mobile:
- Top: 10px
- Bottom: 10px
- Left: 15px
- Right: 15px
Outer Spacing:
These settings control spacing outside the announcement bar.
| Setting | Description |
|---|---|
| Top Margin (Desktop) | Adds spacing outside the top area of the section on desktop devices. |
| Bottom Margin (Desktop) | Adds spacing outside the bottom area of the section on desktop devices. |
| Left Margin (Desktop) | Controls outer left spacing on desktop devices. |
| Right Margin (Desktop) | Controls outer right spacing on desktop devices. |
| Top Margin (Mobile) | Adds spacing outside the top area of the section on mobile devices. |
| Bottom Margin (Mobile) | Adds spacing outside the bottom area of the section on mobile devices. |
| Left Margin (Mobile) | Controls outer left spacing on mobile devices. |
| Right Margin (Mobile) | Controls outer right spacing on mobile devices. |
All outer spacing values are 0px by default.
Desktop top/bottom spacing can be configured from 0px to 100px, while desktop left/right spacing can be configured from 0px to 50px. The same ranges apply to the corresponding mobile settings.