Headers
Headers are specialized sections that appear at the top of every page in the storefront. They follow the same structure as regular sections — same folder layout, settings files, entry points, and composables — but with a few additional constraints.
Differences from Sections
Type
SECTION
HEADER
Mandatory content
None
menu (NAVIGATION_MENU) and logo (LOGO)
Mandatory design
None
logo (LOGO)
Placement
Inside template pages
Template configuration header slot only
Used in page sections
Yes
No
Mandatory Settings
Header sections must define the following settings with exact key names:
Content (content.ts):
menu— typeNAVIGATION_MENU(the site's main navigation)logo— typeLOGO(the store's logo)
Design (design.ts):
logo— typeLOGO(logo styling: font, size, color, spacing, frame, capitalization)
These are enforced at build time. See Content Editors and Design Editors for details on these editor types.
Template Configuration
Headers are referenced in the template's configuration.ts, not in page sections:
Default header (built-in):
Custom header (your own section with type HEADER):
When using type: 'custom', the referenced section must exist in the headers/ directory and have type: 'HEADER'.
Logo and Menu Carry-Over
When a merchant applies a new header or a new template with a different header, the existing logo and menu configuration carry over to the new header automatically. This means merchants won't lose their logo or navigation setup when switching headers.
Validation Errors
"Header section must have id 'header' when type is 'default'"
Default header must use the id "header"
Set id to 'header'
"Custom header section must exist in headers directory"
Referenced custom section not found
Create the section in the headers/ directory
"Custom header section must be of type 'HEADER'"
Custom section exists but has wrong type
Set the section's type to 'HEADER'
Learn more
For everything else — settings, showcases, entry points, composables — see Sections
Last updated
Was this helpful?