Annoucement bar
Overview:
The Announcement Bar section displays short promotional or informational messages at the top of your store. It can be used for offers, shipping updates, announcements, countdown timers, or important notices. The section includes flexible customization options for layout, typography, spacing, colors, slideshow behavior, and responsive alignment across desktop and mobile devices.
Section Configuration:
Content:
| Setting | Description |
|---|---|
| Section Heading | Defines the main announcement message displayed inside the announcement bar. Supports rich text formatting and links. |
| Text Size | Controls the overall size of the announcement text from extra small to extra large. |
| 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 body font and heading font family. |
Countdown Timer:
| Setting | Description |
|---|---|
| Countdown End Date | Sets the ending date for the countdown timer displayed inside the announcement bar. |
| Timer Weight | Controls the font thickness of the countdown timer numbers and labels. |
| Timer Case | Adjusts the text transformation style of the countdown timer labels. |
| Countdown End Behavior | Determines what happens after the timer ends, such as hiding the timer or displaying a custom message. |
| Countdown End Message | Defines a custom message shown after the countdown expires. |
| End Message Weight | Controls the font thickness of the countdown completion message. |
| End Message Case | Adjusts the text transformation style for the countdown completion message. |
Slideshow:
| Setting | Description |
|---|---|
| Show On Homepage Only | Displays the announcement bar only on the homepage when enabled. |
| Slideshow Arrows | Enables previous and next navigation arrows for multiple announcement slides. |
| Auto Play | Automatically rotates announcement slides after a specific interval. |
| Slide Interval | Controls the delay duration between automatic slide transitions in milliseconds. |
Layout:
| Setting | Description |
|---|---|
| Container Layout | Determines whether the announcement bar is displayed in a contained layout, contained content layout, or full-width layout. |
| Container Width | Controls the maximum width of the announcement container on desktop screens. |
Color Scheme:
| Setting | Description |
|---|---|
| Color Scheme | Applies a predefined color palette to the announcement bar background and text. |
| Gradient Mode | Enables or disables gradient styling for the announcement section background. |
Inner Spacing:
| Setting | Description |
|---|---|
| Top Padding (Desktop) | Adds spacing inside the top area of the announcement bar on desktop devices (min 0px-max 100px) |
| Bottom Padding (Desktop) | Adds spacing inside the bottom area of the announcement bar on desktop devices (min 0px-max 100px) |
| Left Padding (Desktop) | Controls the inner left spacing of the announcement bar on desktop devices (min 0px-max 100px) |
| Right Padding (Desktop) | Controls the inner right spacing of the announcement bar on desktop devices (min 0px-max 100px) |
| Top Padding (Mobile) | Adds spacing inside the top area of the announcement bar on mobile devices (min 0px-max 100px) |
| Bottom Padding (Mobile) | Adds spacing inside the bottom area of the announcement bar on mobile devices (min 0px-max 100px) |
| Left Padding (Mobile) | Controls the inner left spacing of the announcement bar on mobile devices (min 0px-max 100px) |
| Right Padding (Mobile) | Controls the inner right spacing of the announcement bar on mobile devices (min 0px-max 100px) |
Outer Spacing:
| Setting | Description |
|---|---|
| Top Margin (Desktop) | Adds spacing outside the top area of the announcement section on desktop devices |
| Bottom Margin (Desktop) | Adds spacing outside the bottom area of the announcement section on desktop devices. |
| Left Margin (Desktop) | Controls the outer left spacing of the announcement section on desktop devices. |
| Right Margin (Desktop) | Controls the outer right spacing of the announcement section on desktop devices. |
| Top Margin (Mobile) | Adds spacing outside the top area of the announcement section on mobile devices. |
| Bottom Margin (Mobile) | Adds spacing outside the bottom area of the announcement section on mobile devices. |
| Left Margin (Mobile) | Controls the outer left spacing of the announcement section on mobile devices. |
| Right Margin (Mobile) | Controls the outer right spacing of the announcement section on mobile devices. |