The header sits in the header group and shows on every page. It takes its links from a menu you build under Online Store → Navigation, supports three menu levels, and turns any top-level item that has children into a mega menu on desktop and a drawer on phones.
General settings
- Color scheme for the bar.
- Logo accepts any aspect ratio, SVG or PNG, at least 400 pixels wide. Logo width, 60 to 300 pixels, sets how wide it renders; the height follows. With no logo the store name shows as text.
- Menu is the menu the header reads. Main menu by default.
- Menu alignment is Center or Left. Center puts the menu between the logo and the buttons; Left tucks it beside the logo.
- Sticky header is Not sticky, Always visible, or Show when scrolling up. The last keeps the header out of the way while a guest reads a long menu and brings it back the moment they scroll up to find it.
Header section
Every setting, with its control and default- Color schemeColor scheme · Scheme 1
- LogoImage
- Logo widthSlider: 60 to 300 px · 140px
- MenuMenu · Main Menu
- Menu alignmentChoice: Center, Left · Center
- Sticky headerChoice: Not sticky, Always visible, Show when scrolling up · Show when scrolling up
- Show images for location entriesCheckbox · OnTurn this off to show every location as a text row. A location with no image always shows as a text row.
- Show Book now buttonCheckbox · OnUses the booking settings under Theme settings. Hidden until a booking address is set.
- Second button labelText
- Second button linkLink
- Show searchCheckbox · On
- Customer account menuMenu · Customer Account Main Menu
Buttons
- Show Book now button puts your booking button in the header. It uses Book button label and the default center from Theme settings → Booking, and stays hidden until a Booking site address is set.
- Second button label and Second button link add a quieter button beside it: gift cards, a new guest offer, a careers page.
- Show search adds the search icon, which opens an inline panel with suggestions as the guest types.
- Customer account menu is the menu shown to signed-in customers under the account icon. The account icon itself uses Shopify's customer accounts, so it works with both classic and new customer accounts.
How the menu behaves
- A top-level item with no children is a plain link.
- A top-level item with children opens a mega menu on desktop. Second-level items become columns; third-level items list under each column heading. On phones the same structure opens as a drawer with a View all link at each level.
- Any top-level item can also carry Menu feature blocks and Menu location blocks, placed by position. See below and Locations in the menu.
The mega menu is a native disclosure, so it opens with a click or with Enter and Space, closes with Escape, and only one is open at a time.
Menu feature blocks
A Menu feature block adds a promotional card to one dropdown: an image, a Heading, a line of Text, a Link label and a Link. Show under menu item picks which top-level item shows it, counting from 1 at the left; it only applies to items that have a dropdown. Up to eight blocks, so every dropdown can have its own card.
The demo puts a new guest offer under Services.
Menu feature block
Up to 8 per section- Show under menu itemSlider: 1 to 8 · 11 is the first item in the main menu. Only applies to items that have a dropdown.
- ImageImage
- HeadingText · New guest offer
- TextText · Save 20% on your first visit at any location.
- Link labelText · See the offer
- LinkLink
Menus with more than three levels
Only the first three levels render. If your menu is deeper, move the extra items up a level or give them a page of their own.