Header Section
The header section is the main navigation and branding component for the theme, providing a comprehensive dual-row layout system with support for mega menus, transparent header modes, sticky behavior, and extensive customization options.
It includes multiple block types for different mega menu configurations and a vertical menu system for categories.
The block is added by default to the Header Group
Supported block types
menu_tab
Tab-style menu items for multi-brand or category navigation with SVG logo support
mega_menu_1
Standard mega menu with 3-column grid layout and promotional banners
mega_menu_2
Enhanced mega menu with 4-column grid, brand links, and customizable promotional content
mega_menu_3
Advanced mega menu with product collections, flexible grid layout, and comprehensive promotion options
vertical_menu
Category menu with vertical dropdown, customizable styling, and color scheme inheritance
Section Settings
Logo Width
range (px)
Width of the logo on desktop (min 50 — max 300).
Visible when Logo is set
Logo Width (Mobile)
range (px)
Width of the logo on mobile devices.
Visible when Logo is set
Logo Position
select
Position of the logo inside the header (left/center/right).
Always visible
Logo Row
select
Which row the logo sits in (top/bottom).
Always visible
Menu
link_list
The menu to use for the main navigation (e.g., main-menu).
Always visible
Menu Position
select
Position of the menu within the header (left/center/right).
Always visible
Menu Row
select
Which row the menu is placed in (top/bottom).
Always visible
Icon Type
select
Icon style for menu items (none/caret).
Always visible
Link Size
select
Size for link/button text inside the header (rem values mapped to px labels).
Always visible
Button Font Weight (Link)
select
Font weight used for header links.
Always visible
Text Case
select
Text transform applied to header links (none/uppercase/capitalize).
Always visible
Show Message
checkbox
Toggle to show a promotional message bar in the header.
Always visible
Message
richtext
Content of the promotional message (HTML allowed).
Visible when Show Message is true
Message Font
select
Font family used for the message text.
Visible when Show Message is true
Message Size
select
Font size for the message.
Visible when Show Message is true
Message Position
select
Left or right alignment for the message.
Always visible (message content controls visibility)
Message Row
select
Which row the message is placed in (top/bottom).
Visible when Show Message is true
Show Account
checkbox
Toggle visibility of account actions (login/account link).
Always visible
Account Type
select
Display type for account (text/icon/both).
Always visible
Account Row
select
Which row account actions appear in.
Visible when Show Account is true
Show Search
checkbox
Toggle header search visibility.
Always visible
Search Type
select
Inline search style (frame/underline).
Visible when Show Search is true and global search type is 'inline'
Search Position
select
Position of the search control (left/center/right).
Visible when Show Search is true
Search Row
select
Which row the search sits in (top/bottom).
Visible when Show Search is true
Show Country
checkbox
Show the country/region selector.
Always visible
Show Language
checkbox
Show the language selector.
Always visible
Country Selector Style (Flag)
checkbox
Show country flags in the localization control.
Visible when Show Country or Show Language is true
Localization Font
select
Font used for localization controls.
Visible when Show Country or Show Language is true
Localization Size
select
Font size for localization controls.
Visible when Show Country or Show Language is true
Localization Type
select
Display type for localization (text/icon).
Always visible
Localization Position
select
Position of localization controls (left/right).
Visible when Show Country or Show Language is true
Localization Row
select
Which row localization controls appear in (top/bottom).
Visible when Show Country or Show Language is true
Gift Cards Enabled
checkbox
Show a gift card action/icon in header.
Always visible
Gift Cards Link
url
Link target for gift cards (e.g., /pages/gift-cards).
Visible when Gift Cards Enabled is true
Actions Type
select
Display style for header action buttons (text/icon/both).
Always visible
Actions Row
select
Row for action buttons (top/bottom).
Always visible
Section Width
select
Header content sizing: page-width or full-width.
Always visible
Enable Sticky Header
select
Sticky header behavior for the header. Options: "always" (header stays fixed and visible), "scroll-up" (header hides on scroll down and reappears when scrolling up), "never" (no sticky behavior). Default: always.
Always visible
Divider Thickness
range (px)
Divider thickness between header rows.
Visible when any of Menu Row, Localization Row, Search Row, Account Row or Actions Row is 'bottom'
Divider Size
select
Divider width option (page-width/full-width).
Visible when any of Menu Row, Localization Row, Search Row, Account Row or Actions Row is 'bottom'
Border Width
range (px)
Border width around header rows.
Always visible
You can find more detailed information about each block in the article 'Header Block Article'.
Last updated