The header appears on every page of your store and controls your logo, navigation menus, search, account, and cart.
Overview
The Header section is a global section that spans every page of your store. It displays your logo, desktop navigation links, and action buttons for search, account, and cart. You can configure it to sit as a transparent overlay on hero images for a full-bleed look, and you can extend the navigation with rich promotional content using mega menu blocks.
Settings
General
| Setting | Type | Default | Description |
|---|---|---|---|
| Color scheme | Color scheme | Default | Background and text color applied to the header bar. |
| Full width | Toggle | On | Extends the header edge-to-edge across the full viewport. |
| Layout | Select | Logo center, menu left | Position of the logo and desktop navigation links. Four combinations of left and center placements are available. |
| Sticky behavior | Select | Fixed | How the header responds when the page scrolls. None lets it scroll away; Fixed keeps it permanently visible; Scroll hides on scroll-down and reveals on scroll-up. |
| Show as icons | Toggle | On | Displays Cart, Account, and Search as icon buttons. Turn off to show them as text links. |
| Country/Region button | Select | Neutral flag | Shows a localization selector in the header. Options: Hide, Globe, Neutral flag, Country flag, Text. |
| Header shadow | Toggle | On | Adds a subtle shadow below the header to separate it from page content. |
Navigation
| Setting | Type | Default | Description |
|---|---|---|---|
| Primary menu | Menu | main-menu | The main navigation menu. Top-level items appear as navigation links on desktop and populate the drawer. Supports up to three levels of hierarchy. |
| Top-level menu items shown on desktop | Number | 7 |
How many top-level primary menu items are displayed as desktop navigation links. Items beyond the limit are still accessible from the drawer. Between 0 and 12. |
| Secondary menu | Menu | — | Optional additional menu appended to the drawer only. |
| Desktop submenu type | Select | Drawer | How sub-navigation opens on desktop — a side Drawer or an inline Dropdown. Mobile always uses the drawer. |
| Drawer width | Select | Full | Width of the drawer panel on desktop. Full uses the full panel width; Single column narrows it. Visible only when Desktop submenu type is Drawer. |
Logo
| Setting | Type | Default | Description |
|---|---|---|---|
| Logo | Image | — | Your store logo. If no image is uploaded, the store name displays as text. |
| Logo width — desktop | Range | 120 px |
Maximum logo width on desktop. Between 30 and 300 px. |
| Logo padding — desktop | Range | 15 px |
Vertical space above and below the logo on desktop. Between 0 and 100 px. |
| Logo width — mobile | Range | 100 px |
Maximum logo width on mobile. Between 30 and 300 px. |
| Logo padding — mobile | Range | 5 px |
Vertical space above and below the logo on mobile. Between 0 and 100 px. |
Overlay header
Enable the overlay to make the header transparent on top of hero images. The header still functions fully — only the background is removed.
| Setting | Type | Default | Description |
|---|---|---|---|
| Overlay on home page | Toggle | Off | Applies the transparent overlay on the home page. |
| Overlay on collection pages | Toggle | Off | Applies the transparent overlay on all collection pages. |
| Overlay on pages | Textarea | — | Page handles (one per line) where the overlay should also apply. |
| Overlay text color | Select | Foreground | Text and icon color on overlay pages. Foreground uses the color scheme text color; Background uses the background color, which reads clearly over dark hero images. |
| Alternate logo | Image | — | A second logo displayed when overlay is active and text color is set to Background — use this to swap a dark logo for a light one. |
Drawer logo
| Setting | Type | Default | Description |
|---|---|---|---|
| Drawer logo | Select | None | Which logo to show inside the navigation drawer. Options: None, Header logo, Overlay logo, Custom. |
| Drawer logo image | Image | — | A custom logo for the drawer. Visible only when Drawer logo is set to Custom. |
| Drawer logo width | Range | 100 px |
Maximum width of the logo inside the drawer. Between 30 and 200 px. |
Setup
Steps
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your active theme.
- In the left sidebar, click Header.
- Select your Primary menu in the Navigation settings.
- Choose a Layout and Sticky behavior to suit your design.
- Upload your logo and adjust its width and padding under Logo settings.
- If your home page has a full-bleed hero image, enable Overlay on home page and set the Overlay text color to match the image.
- Click Save.
If your logo is hard to read over a dark hero image, upload an Alternate logo (a light version of your logo) and set Overlay text color to Background. The theme swaps logos automatically on overlay pages.
Mega menu
Add promotional images, product picks, and column layouts directly inside your navigation using Header section blocks. Both the Drawer and Dropdown submenu types support mega menu content.
There are three block types:
- Menu banners — up to ten promotional images, each with an optional title and link, displayed alongside the sub-menu links.
- Menu products — a curated list of products shown next to the sub-menu links. Source from a collection or select products manually.
- Menu columns — a structured column layout with images and links, up to six columns. Useful for visual category navigation.
Each block has a mandatory Parent menu item title setting. Enter the exact name of the top-level primary menu item the block should appear under. The value is case-sensitive.
Read more in Mega menu setup.
Menu item formatting
The theme recognises three special title patterns that change how a menu item is displayed. Enter them directly in Shopify's menu editor as part of the item's title — no code required.
(See Shopify's guide to editing menus for how to create and edit menu items.)
Dividers (drawer only)
Create a menu item whose title is exactly --- (three dashes). The theme replaces it with a visual divider line, which is useful for grouping long lists in the drawer. Divider items are skipped in the desktop navigation links.
Badges
Add :::badge-name after the item title to display a small badge label next to the link — for example, New Arrivals:::new displays the link as "New Arrivals" with a "new" badge. The badge name is lowercased and applied as a style. Badges appear in both the desktop navigation and the drawer.
Emphasized links
Add *** anywhere in the item title — for example, ***Sale — to display the link in an emphasized style. The *** characters are removed from the visible title. Emphasis applies in both the desktop navigation and the drawer.
Search
Search is controlled in Theme settings. When enabled, a search button appears in the header. Clicking it opens a search panel where customers can type a query, and predictive results appear as they type.
Configure suggested search terms in Theme settings → Search → Search recommendations — enter each term on its own line. These appear in the panel before the customer starts typing.
Keep shoppers moving with smart navigation
A fixed header with visible cart and account shortcuts reduces the steps between browsing and checkout. Surfacing your most important collections as top-level navigation links means customers reach product pages in one click, without opening the full drawer.
Reinforce your brand at every scroll
A transparent overlay header with a full-bleed hero image gives your store a premium, editorial feel. Pair it with an alternate logo to ensure your branding stays crisp whether the header sits above a light or dark image.
Advanced
This section is intended for developers customising the theme. No changes here are required for normal use.
Overlay on custom pages
The Overlay on pages textarea accepts Shopify page handles, one per line. Internally, the Liquid uses newline_to_br and then splits on <br /> to build the list. Template-name matching is limited to index and collection — all other page types require an explicit handle entry in this field.
Menu item title patterns
All three special title patterns (---, :::badge-name, ***) are parsed in shortcut-menu.liquid (desktop navigation) and drawer-menu-items.liquid (drawer). The --- pattern causes the item to be skipped entirely in the shortcut menu and replaced with an <hr> in the drawer. The ::: split and *** removal happen before the item title is passed to the rendered link element, so the raw syntax never reaches the DOM.
Sticky behaviour data attribute
The sticky scroll logic is driven by data-sticky-behavior on <header id="MainHeader">. JavaScript reads this attribute at runtime. Valid values: none, fixed, scroll.