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

Aspect	Section	Header
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 — type NAVIGATION_MENU (the site's main navigation)
• logo — type LOGO (the store's logo)

Design (design.ts):

• logo — type LOGO (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):

header: { type: 'default', id: 'header', showcase_id: '1' }

Custom header (your own section with type HEADER):

header: { type: 'custom', id: 'my-custom-header', showcase_id: '1' }

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 carries over to the new header automatically. This means merchants won't lose their logo or navigation setup when switching headers.

Validation Errors

Error	Cause	Resolution
"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'

Further Reading

For everything else — settings, showcases, entry points, composables — see Sections.