Top bar
Overview
The Top Bar section is a versatile header component used to display helpful information, store locator access, and localization dropdowns for language and country selection. It adapts its layout based on enabled content and supports flexible alignment, typography, and spacing options for desktop and mobile views.
Section Configuration:
Content
| Setting | Description |
|---|---|
| Section Heading | Text content shown in the center of the bar, typically used for announcements or support messaging. |
| Heading Size | Sets the visual size of the heading text. |
Localization
| Setting | Description |
|---|---|
| Enable Country Selector | Displays a dropdown to select the country, if localization is configured. |
| Enable Language Selector | Displays a dropdown to select the language, if localization is configured. |
| Justify Locales Dropdown | Aligns the position of the localization dropdown: left, center, or right. |
Store Locator
| Setting | Description |
|---|---|
| Enable Store Locator | Displays a button that opens a modal with store location details. |
| Store Button Label | Custom text for the store locator button. |
Layout
| Setting | Description |
|---|---|
| Container Layout | Defines the width behavior of the section: contained or full-width. |
| Container Padding | Adds or removes inner horizontal spacing within the container. |
Typography
| Setting | Description |
|---|---|
| Text Weight | Sets the font weight for all text within the section. |
| Text Alignment (Desktop) | Aligns text horizontally on desktop devices. |
| Text Alignment (Mobile) | Aligns text horizontally on mobile devices. |
Color Scheme
| Setting | Description |
|---|---|
| Color Scheme | Applies a predefined background and text color theme to the section. |
Spacing
| Setting | Description |
|---|---|
| Top Padding | Adds vertical spacing above the top bar. |
| Bottom Padding | Adds vertical spacing below the top bar. |