> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

> The logo, search with a department choice, Compare, the account button and the cart, then a row with the All departments mega menu, the PC Builder link and your quick links, including the Deals gift box.

![Header on the storefront](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/header.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=9b67b8461df83bf7783ed20cde26620a)

Header, highlighted with the demo content

![Header in dark mode](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/header-dark.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=f230ec63e42f6dbc79acc4bb6b08df42)

Header in dark mode

![Header on a phone](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/header-mobile.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=b8f0e15d81f5539b1ef57e703f3e0145)

Header on a phone

## Where to find it

Every page. In the theme editor open any page, then select Header in the Header group of the sidebar. Menu promo blocks are added under it.

## How it works

* The top row holds the logo, the search box and, at the end, Compare (when a compare page is set in Theme settings → Compare), the account button and the cart with its item count. Under it, the department row holds All departments, the PC Builder link and the quick links.
* Search can start with a department choice from Theme settings → Search → Department choices: picking Audio narrows the results page to products of that product type. Suggestions while typing look across the whole store; see [Predictive search](https://docs.kwebby.com/kelvin/sections/search-suggestions.md).
* All departments shows when at least one top-level item of the menu chosen under Main menu has child links. It opens on click, or after a short pause when a mouse rests on it. Departments are listed on the left with their product counts, and pointing at or tabbing to one shows its columns. Esc closes the menu and returns focus to the button.
* A Menu promo block adds a product card beside one department's columns: image, label, title, spec line and price. Promos show on screens wider than 1000 px.
* The quick link whose title matches Theme settings → Deals → Deals menu item (default Deals) shows an animated gift box and is drawn in the sale color. See [Deal highlights](https://docs.kwebby.com/kelvin/guides/deal-highlights.md).
* The PC Builder link comes first in the department row, in the accent color with a wrench icon, once Theme settings → PC Builder → PC Builder page is set. A quick link to the same page is skipped so it never shows twice.
* The account button is Shopify's own account menu: Sign in with Shop for guests, and the Customer account menu once a customer is signed in. It shows only when customer accounts are turned on.
* With Keep the header in view while scrolling on (the default), both header rows stay at the top of the screen. The utility bar above scrolls away.
* On phones under 750 px a menu button opens the phone menu, with all three levels of the main menu. The search box moves to its own row under the logo and the icons (without the department choice), and the department row and Compare leave the bar. Keyboard focus follows the same order: menu button, logo, icons, then search. The account button stays, as an icon. From 1000 px down the labels beside the icons hide and the quick links scroll sideways when they do not fit.
* The logo links to the home page and is never a heading.

![Header in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-header.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=0f294a62370261b1b809d0193fcc077f)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Build the main menu in three levels in Content → Menus (departments, their columns, the links in each column) and choose it under Main menu. See [Menus and the mega menu](https://docs.kwebby.com/kelvin/guides/menus-and-mega-menu.md).
* Under Quick links choose a short one-level menu, such as New, Deals, Monitors and Gift cards. Leave it empty to list the top-level items of the main menu.
* Add a Menu promo block, type the department's title in Department exactly as in the menu (for example Audio) and choose a Product. Image, Label, Heading, Spec line and Link are optional overrides.
* Under Extra links in the phone menu choose a menu with links such as Stores, Trade-in and Help. They show at the end of the phone menu.
* Change PC Builder link label, or untick Show the PC Builder link if you do not sell PC parts.
* Turn on Show country and language selectors in the phone menu if you sell in more than one market or language.
* Set the department choices beside the search box in Theme settings → Search → Department choices, and the logo in Theme settings → Logo.

## Settings

| Setting | What it does |
| - | - |
| **Main menu** | Choose a menu. Top-level items become the departments in All departments. Their children become columns, and grandchildren the links in each column. Default: main-menu. |
| **Quick links** | Choose a menu. The row of links beside All departments. Leave empty to use the main menu. A link titled as in Theme settings, Deals gets the gift box. |
| **Customer account menu** | Choose a menu. The menu in Shopify's account button. Customer accounts must be turned on in Settings, Customer accounts. Default: customer-account-main-menu. |
| **Extra links in the phone menu** | Choose a menu. For example Stores, Trade-in and Help. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 2. |
| **Keep the header in view while scrolling** | On or off. Default: on. |
| **Show search** | On or off. Default: on. |
| **Show the PC Builder link** | On or off. Needs a PC Builder page in Theme settings, PC Builder. Default: on. |
| **PC Builder link label** | Text. Default: PC Builder. |
| **Show country and language selectors in the phone menu** | On or off. Default: off. |

## Blocks

Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Menu promo

| Setting | What it does |
| - | - |
| **Department** | Text. The title of the top-level menu item to show this beside, for example Audio. |
| **Product** | Choose a product. |
| **Image** | Image: upload one or choose from Content → Files. Optional. Replaces the product photo. |
| **Label** | Text. Default: New. |
| **Heading** | Text. Leave empty to use the product title. |
| **Spec line** | Text. Leave empty to use the product's specs.summary metafield. |
| **Link** | Link: a page, product, collection or web address. Leave empty to link to the product. |

> [!NOTE]
>
> Department choices is empty on install, so the search box has no department choice. To add one, type product types your products really have, spelled as in the admin. The choice uses Shopify's product type filter, so add Product type as a filter in the Search & Discovery app if picking a department does not narrow the results.
>
> The account button only shows when customer accounts are turned on in Settings → Customer accounts.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.