Header
Updated today
The header section provides your site's navigation and branding and appears at the top of every page, sitting below the announcement bar in the header group.
Settings
These settings control the header's colors, layout, and navigation.
Color scheme: the color scheme applied to the section. The header ships on the first scheme by default.
Logo position: Middle (default) or Left. This applies only to the desktop version of the header; when set to middle, the logo renders after the navigation, and when left, before it.
Style type: Content on one block (default) or Content on multiple blocks, which changes how the header content is grouped into cards.
Menu: the menu used for the desktop navigation (default
main-menu). The mobile drawer inherits this menu unless you override it with the drawer menu block.Customer account menu: the menu shown in the account controls for both desktop and mobile (default
customer-account-main-menu).Show search: displays search in the desktop header icons and the mobile drawer (on by default).
Desktop dropdown trigger type: Click (default) or Hover controls how desktop dropdowns open.
Featured button position: Start (left) (default) or End (right). At the start it renders before the navigation links; at the end it renders in the header icon area after the other controls. The button shows only when it has a link set.
Primary border radius scheme: the corner rounding used for the header cards (Scheme 1 by default).
Secondary border radius scheme: the corner rounding used for dropdown and mega-menu cards (Scheme 1 by default).
Blocks
The header uses fixed blocks for its logo, featured button, and drawer menu, and lets you add mega-menu blocks for desktop dropdowns.
Header logo: sets the logo as an image or SVG (SVG takes precedence) and its display width, in pixels or percent. The mobile size can be set separately. A logo card displays only when the block is on and the style type is Content on multiple blocks.
Featured button: a link or button with a label, size (small, default, or large), and alignment. It appears only when a link is set, and its position follows the Featured button position setting.
Mega menu: one block per top-level menu item you want to expand into a mega menu. Set Menu item handle to the exact handle of the top-level menu item this block replaces the dropdown for; if no menu item matches, the block renders nothing. Add up to two promotions, each with a heading, image, link, and foreground and background colors; a promotion shows only when its heading is filled in.
Mobile drawer menu: the menu behind the hamburger button on mobile. It inherits the section's Menu by default, or you can choose a separate Menu for it. It renders nested navigation (up to grandchild links), search when Show search is on, and a customer account link when customer accounts are enabled.