Announcement bar
Overview:
The Announcement Bar section displays a short highlighted message at the top of your store, typically used for promotional messages, store updates, or important announcements. Its layout and styling options allow full control over typography, alignment, and spacing, ensuring consistent visual appearance across desktop and mobile devices.
Section Configuration:
Content
| Setting | Description |
|---|---|
| Section Heading | Defines the main announcement message displayed in the bar. Supports rich text formatting for emphasis or links. |
Layout
| Setting | Description |
|---|---|
| Container Layout | Determines the width behavior of the announcement bar: contained within the page width or stretched edge-to-edge across the screen. |
| Container Padding | Toggles inner horizontal padding within the container. Disabling this removes default side spacing. |
Typography
| Setting | Description |
|---|---|
| Text Size | Controls the overall size of the announcement text, available in small or large variants. |
| Text Weight | Adjusts the font weight (thickness) of the announcement text, ranging from light (300) to black (900). |
Text Alignment
| Setting | Description |
|---|---|
| Text Alignment (Desktop) | Sets the horizontal alignment of the announcement text on desktop screens (e.g., left, center, right). |
| Text Alignment (Mobile) | Sets the horizontal alignment of the announcement text on mobile screens. |
Color Scheme
| Setting | Description |
|---|---|
| Color Scheme | Applies a predefined color palette to the background and text of the announcement bar for consistent visual styling. |
Spacing
| Setting | Description |
|---|---|
| Top Padding | Adds vertical spacing above the announcement bar content. |
| Bottom Padding | Adds vertical spacing below the announcement bar content. |