> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/header-and-footer/header.md). # Header, menus and search Choose a header layout, set up the main menu and mega menu panels, utility links, search, account and bag. The header sits at the top of every page. It holds your logo, the main menu, search, the account link and the bag. Stratum offers six header layouts, large mega menu panels for desktop, predictive search and an optional product bar on product pages. ![Header](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-3e6e07925189293316a408fff1e56589b758a293%2Fheader.png?alt=media) ## Open the header settings 1. Go to **Online Store › Themes › Customize**. 2. In the left sidebar, click **Header** (in the **Header** group, under **Announcement bar**). Your logo is not set here. Add it in **Theme settings › Logo and favicon**, see [Logo, colors, fonts and buttons](/store-wide-design/brand.md). ## Choose a layout Pick a layout under **Layout › Layout**. Each one keeps the same menu, search and bag; only the arrangement changes. | Layout | What it looks like | Good for | | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | | **Classic: logo and search, menu below** (default) | Logo, a search field and the icons on top; the main menu in a second row, with an optional note on the right. | Most stores, especially with a large catalog. | | **Global bar: one slim row** | Logo, menu and icons in a single thin row. | Stores with a short menu that want more room for content. | | **Centered: logo in the middle, menu below** | Logo centered, menu centered underneath. | Brand-led stores. | | **Floating pill** | A rounded bar that floats over the page, optionally over the first section of the home page. | Image-led home pages with a full-width hero. | | **Search first: wide search, menu as chips** | A wide search field with the menu shown as rounded chips underneath. | Stores where shoppers mostly know what they want. | | **Split: menu on both sides of the logo** | Logo in the middle, menu links divided left and right. | Short menus and a strong logo. | Extra settings appear for some layouts: * **Menu links left of the logo** (Split only): how many main menu links go to the left of the logo, from 1 to 6. The rest go to the right. Default: 3. * **Show "All" chip** (Search first only): adds an **All** chip before the menu chips that links to all products. On by default. * **Float over the first section on the home page** (Floating pill only): the pill sits on top of your first home page section and turns solid once shoppers scroll. Use it with a full-width image or video as the first section. On by default. {% hint style="info" %} Each layout is also available as a ready-made preset (**Header: global bar**, **Header: centered**, **Header: floating pill**, **Header: search first** and **Header: split**) if you add a new header section. Changing the **Layout** setting on your existing header does the same thing and keeps your other settings. {% endhint %} ## General settings | Setting | What it does | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Color scheme** | Colors for the header bar, its menus and the mobile menu. Default: Scheme 1. | | **Keep header visible on scroll** | The header stays pinned to the top of the screen while visitors scroll. On by default. On phones with the bottom navigation bar turned on, the header slides away while visitors scroll up and the bottom bar appears instead (see [Mobile navigation](/header-and-footer/mobile-navigation.md)). | ## Icons and labels | Setting | Options | Notes | | ----------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | **Account** | **Icon in a circle** (default), **Icon**, **Text** | Shows only when customer accounts are turned on in **Settings › Customer accounts**. | | **Bag** | **Filled pill** (default), **Icon with count**, **Text with count** | The bag opens the cart drawer, a popup or the cart page, depending on **Theme settings › Cart › Cart type**. | ## Set up the main menu The header shows the menu chosen in **Main menu** (default: your **Main menu**). Build it in **Online Store › Navigation**: 1. Open **Online Store › Navigation** and click your main menu. 2. Add top-level items such as **Cookware**, **Bakeware** and **Sale**. 3. To give an item a mega menu panel, drag links underneath it so they are indented (second level). 4. For grouped columns inside a panel, indent links one more level (third level). 5. Click **Save menu**. How each level shows on desktop: * **First level**: the links in the header. * **Second level**: a top-level item with second-level links opens a large panel under the header. Second-level links with no children show as large links in the left column, followed by a **See all** link. * **Third level**: second-level links that have their own children become small group headings, with their children listed underneath, in a second column. * When the top-level item links to a collection, the panel heading includes the number of products in that collection. Panels open when shoppers hover (after a short delay so the menu does not flicker) or click, and close with Escape, by clicking elsewhere or by moving away. Touch screens open them with a tap. On phones the same menu appears in the slide-in menu drawer, with expandable sections for each top-level item. {% hint style="warning" %} The **Search first** layout shows the menu as chips and never opens mega menu panels. Use one of the other layouts if you rely on panels. {% endhint %} ### Note beside the main menu **Note beside the main menu** (Classic layout only) adds a short line of text at the right end of the menu row, for example "Free delivery over $150". You can use bold, italic and links. Keep it accurate. ### Products in a mega menu panel (Menu panel products) The header has three **Menu panel products** blocks. Each one adds a few product cards from a collection to the panel of one main menu item: | Setting | What it does | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | **Main menu item** | The name of the top-level menu item, exactly as it appears in your menu, for example `Cookware`. Capital letters don't matter. | | **Collection** | The collection to take products from. | | **Products to show** | **One**, **Two** (default) or **Three** products. | To set one up, click **Header** in the sidebar, then the **Menu panel products** block, and fill in the three settings. A menu item named in one of these blocks opens a panel even when it has no submenu, so you can use them to promote a collection under a simple link. ## Utility links: Header menu and Header link blocks Next to the bag you can add small utility links such as **Trade**, **Compare** or **Stores**. Add them as blocks inside the header: * **Header menu**: shows the top-level links of a menu you choose. Create a small menu (for example "Utility") in **Online Store › Navigation** first. Sub-links are not shown. * **Header link**: a single link with its own **Label** and **Link**. Both blocks have **Show number of products in compare**. Turn it on for a link to your compare page, and the link shows how many products the shopper has selected. On the **Header menu** block it applies to links that point to a page using the compare template (on by default); on **Header link** it is off by default. On desktop these links sit beside the bag. On phones they are copied into the bottom of the menu drawer automatically. You can also add **app blocks** to the header if an app offers one. ## Country and language selectors **Show country and language selectors** (off by default) adds the selectors to the header and to the bottom of the mobile menu. They appear only when your store sells in more than one country or language. See [Markets, languages and currency](/selling-internationally/markets-and-languages.md). ## Search ![Predictive search](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-dd5c86cd89cab557f9ffb3bc318e7e008d23330c%2Fpredictive-search.png?alt=media) | Setting | What it does | | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show search** | Turns search on or off in the header. On by default. | | **Search** | How search appears: **Search field** (default), **Icon**, or **Icon and text**. Icon and Icon and text open the search field in a panel below the header. The **Search first** layout always shows the field, and **Floating pill** always uses the icon. | | **Search field text** | The placeholder text inside the empty search field. Leave empty for the default. | | **Popular searches** | Comma-separated search terms, for example `dutch oven, knife set, kettle`. Shown as suggestions before shoppers type. | | **Trending products collection** | Up to four products from this collection are shown in the search panel before shoppers type. | When shoppers click into the empty search field, the panel shows your **Popular searches**, the **Trending products collection** and up to six links from the main menu as categories. As shoppers type, predictive search shows, side by side: * **Suggestions**: up to six completed search terms. * **Products**: up to four products with image, vendor, SKU and price. * **Collections** and **Pages** or blog posts that match. * A **See all results** link to the full search page. Shoppers can move through the results with the arrow keys and press Enter to open one. Results come from Shopify's search, so the **Search & Discovery** app's synonyms and boosts apply. See [Search](/collections-and-search/search.md) for the search results page. ## Product bar **Show product bar on product pages** (off by default) adds a slim bar under the header on product pages with the product title, the current price and a **Buy** button that jumps to the add to bag form. The price follows the selected variant. **Product bar links** (shown when the product bar is on) adds small links to the bar on large screens. Enter one per line as `Label | link`, for example: ``` Reviews | #reviews Specifications | #specs Delivery | /policies/shipping-policy ``` The product bar is not shown with the **Floating pill** layout. ## Common questions **My menu items don't open a panel.** Only top-level items with indented links (or a **Menu panel products** block naming them) open panels, and never in the **Search first** layout. Check the indentation in **Online Store › Navigation**. **The account icon is missing.** It only shows when customer accounts are turned on in **Settings › Customer accounts**. **Utility links don't show on my phone.** They move into the menu drawer on phones. Open the menu to see them at the bottom. ## Related * [Mobile navigation](/header-and-footer/mobile-navigation.md) * [Announcement bar](/header-and-footer/announcement-bar.md) * [Header reference](/reference/sections/header.md)