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, and color schemes to create a visually engaging top bar experience.
Blocks Configuration
Announcement Block:
The Announcement block displays an individual scrolling message inside the announcement bar.
Content
| Setting | Description |
|---|---|
| Announcement Text | Defines the announcement message displayed inside the scrolling bar. |
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 Default and Heading font family styles. |
| Text Color Style | Applies predefined color styling to the announcement text. |
Section Configuration
Visibility Settings:
| Setting | Description |
|---|---|
| Show on Homepage Only | Displays the announcement bar only on the homepage when enabled. |
Grid Settings:
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Adds spacing between scrolling announcement items on desktop devices by default it's 180px. |
| Mobile Grid Spacing | Adds spacing between scrolling announcement items on mobile devices by default it's 10px. |
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 the announcement bar by default its 15s. |
| Pause on Hover | Pauses scrolling animation when users hover over the announcement bar. |
Layout:
| Setting | Description |
|---|---|
| Container Layout | Determines whether the section uses Contained, Contained Content, or Full Width layout. |
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color palette to the announcement bar background and content. |
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. |
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. |