Header
The site header provides navigation, search, account access, and cart functionality. Fit Check offers two header styles: a modern floating bar (interactive island) and a classic traditional layout.
Configure the Section
The header is a global section that appears on all pages. To customize it:
- In the theme editor, click the Header section in the left sidebar.
Section Settings
General
| Setting | Description |
|---|---|
| Header style | Choose Bar (floating interactive island) or Traditional (classic full-width). Default: Bar. |
Traditional Mode Settings
| Setting | Description |
|---|---|
| Logo position | Left or Center. Default: Center. |
| Section width | Page width or Full width. Default: Page width. |
| Section height | Small, Medium, or Large. Default: Medium. |
| Sticky header | Always, On scroll up, or Never. Default: Never. |
| Border width | Bottom border thickness. Range: 0–5px. Default: 0. |
| Transparent header (home) | Enable transparent header on the homepage. Default: Off. |
| Color scheme | Color scheme for the header, with optional inverse scheme for transparent mode. |
Bar Mode Settings
| Setting | Description |
|---|---|
| Max width | Maximum width of the floating bar. Range: 360–720px. Default: 544px. |
| Border radius | Corner rounding of the bar. Range: 0–24px. Default: 4px. |
| Border color | Bar border color. Default: #F5F5F5. |
| Background opacity | Bar background transparency. Range: 0–100%. Default: 90%. |
| Backdrop blur | Glass-effect blur behind the bar. Range: 0–40px. Default: 4px. |
| Shadow opacity | Drop shadow intensity. Range: 0–60%. Default: 0%. |
| Vertical offset | Distance from the top of the page. Range: 8–48px. Default: 16px. |
| Utilities next to menu | Move search and utility icons to the left side, next to the menu. Default: On. |
| Sticky behavior | Always, On scroll up, or Never. Default: Never. |
| Show backdrop | Display a dimmed overlay behind the menu when open. Default: Off. |
| Padding | Inner padding with unified or separate top/bottom/left/right controls. Range: 0–16px. Default: 4px. |
| Use inverse logo | Show the inverse logo when using a dark color scheme. Default: Off. |
Bar Transparent Mode (Mobile)
| Setting | Description |
|---|---|
| Transparent on mobile home page | Enable transparent bar on the mobile homepage. Default: Off. |
| Color scheme | Default or Inverse color scheme when transparent. |
| Inverse color scheme | Select a specific color scheme for the inverse transparent state. |
Colors
| Setting | Description |
|---|---|
| Color scheme | Primary color scheme for the header. |
Island Announcement
When using Bar mode, you can add an Island announcement section to display dismissible messages below the floating header bar. On desktop, it appears as a pill-shaped bar matching the island style. On mobile, it spans full width.
To add it, click Add section in the header group and select Island announcement.
Section Settings
| Setting | Description |
|---|---|
| Transition speed | Time between announcement slides. Range: 2–10s. Default: 5s. |
| Sticky behavior | Follow header (mirrors header sticky setting) or Disappears on scroll (hides on any scroll). Default: Follow header. |
| Show dismiss button | Allow visitors to dismiss the bar. Persists for the session. Default: On. |
| Dismiss button size | Size of the dismiss icon. Range: 10–48px. Default: 12px. |
| Dismiss button color | Color of the dismiss icon. Default: #666666. |
Appearance
| Setting | Description |
|---|---|
| Color scheme | Color scheme for the announcement bar. |
| Background opacity | Bar background transparency. Range: 0–100%. Default: 90%. |
| Backdrop blur | Glass-effect blur behind the bar. Range: 0–40px. Default: 4px. |
| Gap | Spacing between the header island and the announcement bar. Range: 0–16px. Default: 6px. |
| Border color | Bar border color. Default: #F5F5F5. |
| Border opacity | Border transparency. Range: 0–100%. Default: 100%. |
Padding
| Setting | Description |
|---|---|
| Unified padding | Use the same value for top and bottom. Default: On. |
| Padding | Top and bottom padding (when unified). Range: 0–100px. Default: 8px. |
| Top / Bottom | Independent top and bottom padding (when not unified). Range: 0–100px. Default: 8px each. |
Blocks
Add Announcement blocks with text content and optional links. When multiple blocks are added, they auto-rotate based on the transition speed.
Blocks
The header supports app blocks for integrating third-party apps directly into the header area. Internal blocks (logo, menu, utilities) are automatically included based on the header style.
Localization
The header includes built-in country/language selectors that appear as a localization panel. In bar mode, the localization panel slides open inline. In traditional mode, it opens as a drawer from the side.
Shared Drawer Styling
Search, cart, menu, localization, and account surfaces inherit the global drawer and backdrop controls from Theme settings > Drawers and Theme settings > Backdrop. Use those settings when you want all overlay surfaces to share border, shadow, opacity, blur, padding, and backdrop behavior.