# 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 <a href="#differences-from-sections" id="differences-from-sections"></a>

| 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 <a href="#mandatory-settings" id="mandatory-settings"></a>

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](/site-themes/develop-site-themes/sections/settings/content-editors.md) and [Design Editors](/site-themes/develop-site-themes/sections/settings/design-editors.md) for details on these editor types.

### Template Configuration <a href="#template-configuration" id="template-configuration"></a>

Headers are referenced in the template's `configuration.ts`, not in page sections:

**Default header** (built-in):

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

**Custom header** (your own section with type `HEADER`):

```typescript
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'`.

{% hint style="info" %}
**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.
{% endhint %}

### Validation Errors <a href="#validation-errors" id="validation-errors"></a>

| 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'`           |

### Learn more <a href="#further-reading" id="further-reading"></a>

For everything else — settings, showcases, entry points, composables — see [Sections](/site-themes/develop-site-themes/sections.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ecwid.com/site-themes/develop-site-themes/headers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.