Header & navigation
How to set up the header menu, mega menu and dropdowns, the mobile menu, the search, account and cart buttons, the status strip, whether the header stays on screen as shoppers scroll, and the back-to-top button.
The header is one section in the Header group. It has two rows: a bar with the logo, menu and buttons, and an optional status strip underneath, with short live readouts such as your product count. By default the header stays at the top of the screen as shoppers scroll. See Sticky header.
To announce a sale or a launch, with a link or a countdown, add an Announcement bar to the Header group. Unlike the status strip, it holds links and scrolls away with the page.
The header bar
From start to end:
| Part | Comes from |
|---|---|
| Logo or shop name | Theme settings › Brand. See Typography, layout & brand. |
| Tagline | Theme settings › Brand › "Tagline". Hidden at 900 px and below. |
| Menu | Header › "Menu" |
| Search button | Header › "Show search" |
| Account button | Shown when customer accounts are turned on in Shopify admin |
| Cart button | Always shown. Reads "CART [2]" with the live item count. On screens narrower than 375 px it shows only the count, "[2]". |
| Menu button | Shown at 900 px and below, in place of the menu |
On screens 600 px wide and below, the shop name and the buttons share one row when the name fits beside them, which is about six characters on a 375 px wide phone. A longer name gets the row to itself, with the buttons on a second row underneath. A custom logo shrinks to fit beside the buttons instead, to about 90 px wide on a 375 px wide phone. See Logo.
Menu
Header › "Menu". The default is main-menu, which you edit in Online Store › Navigation.
On screens wider than 900 px, top-level links sit in the header bar:
- A link without child links is a plain button.
- A link with child links opens a panel. Header › "Menu style" chooses which kind.
| "Menu style" | Top-level link whose child links have links of their own | Other top-level links with child links |
|---|---|---|
| Mega menu (default) | A panel as wide as the header. Each child link is a column heading, with its own links listed under it. The panel's top line names the item and links to its page, such as "All Audio". | A dropdown listing the child links |
| Dropdown | A dropdown listing the child links, with each child's own links indented underneath | A dropdown listing the child links |
On wider screens a menu with only two levels looks the same in both styles, so nothing changes there until you add a third level. The mobile menu differs slightly: in Mega menu style each group also starts with an "All …" link to its top-level page (see Mobile menu). A top-level link set to # gets no "All …" link.
Panels open on click, tap, Enter or Space. With Header › "Open menus on hover" on (the default), they also open when a shopper using a mouse rests the pointer on the item, and close shortly after the pointer leaves. A shopper who clicks keeps the panel open until they click the item again, click anywhere else or press Escape. Escape closes a panel opened by hover without moving keyboard focus from wherever it was. If keyboard focus is inside one panel when the pointer opens another, focus moves to the first panel's item as that panel closes, so the next Tab carries on from there. On touch screens nothing opens on hover: a tap opens and closes the panel.
With the keyboard, Enter or Space opens a panel and Tab moves through its links in reading order. Tabbing past the last link closes the panel, and Escape closes it and returns focus to the item. Without JavaScript, panels still open and close by click and keyboard, but not on hover.
A panel taller than the screen scrolls inside itself, so a long list, such as 50 brands, stays reachable.
Menu promos
Header › Add block › "Menu promo" adds a tile to a mega menu: an image, a label, a heading, a line of text and a link.
- "Menu item" is the title of the top-level link the tile belongs to, such as "Audio". Capitals, spaces and punctuation don't matter: "audio" and " AUDIO " both match "Audio".
- A top-level link shows its first two matching promos, in the order of the blocks, at the end of its mega menu panel. On screens 1024 px and wider they sit beside the columns; narrower, under them.
- Promos show only in mega menus: under a top-level link whose child links have links of their own, with Header › "Menu style" set to Mega menu. A promo for any other link isn't shown to shoppers, and neither is a third or later promo for the same link. In the theme editor each shows a note under the header bar so you can still select it.
- The whole tile is one link, named by its heading. Without a link the tile is shown but isn't clickable. A promo with no heading isn't shown to shoppers.
- Images load only when the panel opens, so promos don't slow down the first screen. Images are cropped to 4:3 around their focal point. An image's alt text is used; without one the image is decorative.
- On phones, promos show at the end of their link's group in the menu drawer, as a small thumbnail and the heading. To see them in the theme editor's phone preview, open the menu drawer.
Selecting a Menu promo block in the theme editor opens its panel at desktop width.
Keep top-level links short, one or two words each. If the links don't fit on one line at your page width, they wrap to a second line. Move less important links into dropdowns or into the footer menu.
Mobile menu
At 900 px and below, the menu is replaced by a menu button that opens a drawer from the side. The drawer shows the same menu. Links with children expand in place.
In Mega menu style, each group starts with "All …", a link to the top-level link's own page, and a child link that has links of its own becomes a group of its own, starting with its own "All …" link. In Dropdown style, child links' own links are listed, indented, under them.
If your store sells to more than one country or in more than one language, the drawer also shows country and language selectors under the menu. See Markets, currencies & languages.
Search
Header › "Show search". On by default. The search button opens a search panel from the top of the screen with live suggestions as the shopper types. Turn it off to remove the button and panel. The search page at /search still works. See Search.
Account
When customer accounts are turned on in Settings › Customer accounts, an account button appears. With Shopify's customer accounts it opens an account panel with sign-in options, or links such as Orders and Profile once signed in.
Theme settings › Customer accounts › "Customer account menu" chooses the links shown in the account panel. The default is customer-account-main-menu, the menu Shopify creates for customer accounts. See Customer accounts.
Cart
The cart button opens the cart drawer. The count in brackets updates when products are added or removed, without a page reload.
Screen readers announce the button as "Cart, 2 items" at every screen width, including where only "[2]" shows. The word comes from the same translation as the visible label, so voice control users can say "click Cart", or its translation, to open it.
Status strip
The strip under the header bar holds up to four short readouts. Add them as blocks. With no blocks, the strip is hidden.
| Block | Limit | Settings | Shows |
|---|---|---|---|
| Status text | 2 | "Label", "Value" | Your label, then your value in the accent color. Leave "Value" empty to show only the label. |
| Product count | 1 | "Label" | Your label, then the real number of products in your catalog |
| Free dispatch note | 1 | "Label" | Your label, then Theme settings › Commerce › "Free dispatch over", formatted as money |
The Free dispatch note hides itself when "Free dispatch over" is 0, and for shoppers browsing in a currency other than your store's. A Status text with both "Label" and "Value" empty shows nothing either. When nothing in the strip has anything to show, the strip is hidden too, so the header doesn't show an empty band. The Product count updates as you add and remove products.
The default header has "Uplink / Stable", "Products indexed" and "Free dispatch over". "Free dispatch over" starts at 0, so the Free dispatch note stays hidden until you set an amount.
On screens 600 px wide and below, the strip stays on one line. When the readouts don't all fit, shoppers swipe the strip sideways, and an ellipsis (…) at the edge shows there's more. Keyboard users can tab to the strip and scroll it with the arrow keys. Put the readout that matters most first.
Status text is fixed text. Don't use it for claims that change, like stock or delivery times, unless you'll keep it up to date. Product count and Free dispatch note stay accurate on their own.
Sticky header
Header › "Sticky header":
| Option | What shoppers see |
|---|---|
| Always (default) | The header bar and the status strip stay at the top of the screen all the way down the page. |
| On scroll up | The header slides away while shoppers scroll down and comes back as soon as they scroll up. It also comes back when a keyboard user tabs back into it, and it doesn't hide while one of its dropdowns is open. |
| None | The header scrolls away with the page. |
The status strip sticks with the bar. On a 375 px wide phone the stuck header, with the default readouts, is about 100 px tall. For a slimmer header, remove status strip blocks or choose On scroll up.
While the header is stuck:
- Links that jump to a spot on the page, such as pagination and the skip link, land below the header, and so does whatever a keyboard user tabs to. Nothing ends up hidden underneath it.
- A dropdown taller than the screen scrolls inside itself, so its last links stay reachable.
- The cart, menu and search drawers open over it as usual, and the page behind them doesn't move.
The stuck header has the plain page color, so the page doesn't show through it. With "Show grid overlay" on (Theme settings › Motion and effects), the grid stops at the header.
Visitors who've asked their device to reduce motion see On scroll up hide and show the header without the slide. Without JavaScript, both sticky options behave like Always.
Back-to-top button
Theme settings › Navigation › "Show back-to-top button". On by default. A small "↑ TOP" button appears in a bottom corner once a shopper has scrolled down one screen, and goes again when they scroll back up past that point. It never shows on the first screen, so it can't cover Add to cart there, or on a page shorter than two screens.
Selecting it scrolls to the top of the page and moves keyboard focus to the start of the main content, the same place the "Skip to content" link goes, so the next Tab reaches the first link on the page. Screen readers announce it as "Back to top".
Theme settings › Navigation › "Position" puts it in the bottom left (the default) or bottom right corner. Chat apps such as Shopify Inbox usually put their button in the bottom right, so keep the back-to-top button on the other side. In right-to-left languages the sides swap: Left is the bottom right corner.
The last links on the page, such as your policy links, always scroll clear of the button, and the page gains a little space at the very end so nothing in the footer sits under it. Without JavaScript the button isn't shown. Visitors who've asked their device to reduce motion jump straight to the top instead of scrolling there.
Recipes
Mega menu for a catalog
- Online Store › Navigation › Main menu: add "Catalog", linked to your all-products collection, with child links "Audio", "Input" and "Power", each linked to its collection
- Give each of those child links its own links, such as "Headphones", "Speakers" and "Microphones" under "Audio"
- Header › "Menu style": Mega menu
Catalog opens a panel with an "All Catalog" link and one column each for Audio, Input and Power.
Promo tile in the Audio menu
- Build a three-level menu with a top-level "Audio" link, as in the recipe above
- Header › Add block: Menu promo › "Menu item": Audio, "Image": your headphones photo, "Panel label": New, "Heading": ANC headphones, "Link": the product
- Header › "Menu style": Mega menu
Menu with category dropdowns
- Online Store › Navigation › Main menu: add "Audio" with child links "Headphones" and "Speakers", and give "Headphones" child links "Wired" and "Wireless"
- Header › "Menu": Main menu
- Header › "Menu style": Dropdown
Support hours in the status strip
- Header › Add block: Status text › "Label": "Support", "Value": your hours, for example "Mon–Fri 9–17"
- Header › Add block: Free dispatch note
A slim header on phones
- Header › "Sticky header": On scroll up
- Header › remove the Status text block, or every status strip block
A minimal header
- Header › "Show search": off
- Header › remove every status strip block
- Theme settings › Brand › "Tagline": empty
See also
- Announcement bar: announcements and a countdown above the header
- Search: the search panel and search page
- Cart drawer & cart page: what the cart button opens
- Footer: the footer menu and localization selectors