Header

Logo, navigation, search, account and cart, with dropdowns that can grow into mega menu panels.

What it does

The header carries the logo, the main menu, the search field, the account entry and the cart. Menu entries with children open as simple dropdowns. Add Mega menu column and Mega menu promo card blocks to an entry and the dropdown becomes a panel with columns of links, images and a promotional card. The header can scroll away, come back when the visitor scrolls up, or stay fixed, and it can turn into a floating card once the page has moved under it.

The account entry is Shopify’s account component. It shows a sign in link to guests and the account menu to signed in customers, on desktop and on a phone, and it appears only when customer accounts are enabled in your Shopify settings.

When to use it

Always; every page has it. The decisions are how much navigation you need. A store with one product does well with Logo centered, three or four text entries and no mega menu. A store with a small range and a story to tell benefits from one mega menu panel on the Shop entry, with the products as image links and one promo card.

Blocks

Mega menu column: a column of up to eight links under a heading, each with an optional image, description and badge. A link that points to a product or collection uses that resource’s image when you leave the image empty.
Mega menu promo card: an image card with heading, text and a link, for a launch, a bundle or a story page.

Both blocks carry a Menu item field. Every block whose Menu item names the same top level entry becomes part of that entry’s panel, in the order the blocks are listed.

Setting it up

Create the menu in Online Store → Navigation and pick it under Navigation → Menu.
Choose Layout, and under Behavior the Sticky header mode and the Style.
For a mega menu, add a Mega menu column block, type the entry name into Menu item, fill the links. Add a second column or a Promo card the same way.
Upload the logo under Theme settings → General. The header sizes it from there.

Settings

Setting	Type	What it does
General
Color scheme	Color scheme	The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors.
Width	Select	Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width
Layout	Select	Logo centered puts the menu on the left and search, account and cart on the right. Logo left puts the menu next to the logo.Options: Logo centered, Logo left · Default: Logo centered
Navigation
Menu	Menu	The main navigation. Entries with children open as dropdowns; add Mega menu column blocks to turn a dropdown into a panel.Default: main-menu
Style	Select	Search, account and cart as icons or as text links on desktop. On a phone they are always icons.Options: Text, Icons · Default: Icons
Show account	Checkbox	Shows the account entry on desktop and on mobile. It only appears when customer accounts are enabled in Settings, Customer accounts.Default: on
Show search field	Checkbox	Shows the search field on desktop and inside the menu drawer on a phone.Default: on
Behavior
Sticky header	Select	None scrolls the header away. On scroll up brings it back the moment the visitor scrolls towards the top. Always keeps it on screen.Options: None, On scroll up, Always · Default: On scroll up
Style	Select	Full width keeps the header edge to edge. Floating card lifts it off the page edges as a rounded card once the page has scrolled.Options: Full width, Floating card · Default: Full width
Show header over the hero image	Checkbox	Lays the header over the first section of the home page with no background of its own. Only for a home page that starts with a full width image.Default: off
Section padding
Top padding	Range	Space above the header row.0 to 48 px · Default: 16
Bottom padding	Range	Space below the header row.0 to 48 px · Default: 16

Mega menu column block

Setting	Type	What it does
Menu item	Text	The top level menu entry this column belongs to, spelled exactly as in the menu. All columns and cards with the same entry form one panel.
Width	Select	How much of the panel this column takes up.Options: Narrow, Medium, Wide · Default: Medium
Image style	Select	Automatic puts a link to a product on the product's tile color and fits the picture into it, like a product card. The other two options fill the square.Options: Automatic, On a tinted tile, Fills the square · Default: Automatic
Heading	Text	The title above the links in this column.
Link	Link	Makes the column title a link, for example to the collection the column lists.
Link 1
Title	Text	Text of the first link.Default: Name what this link leads to
Description	Text	A short line under the first link.
Link	Link	Where the first link leads.
Image	Image	Picture next to the first link. Empty uses the image of the product or collection it links to.
Badge	Text	A small tag next to the first link, such as New.
Link 2
Title	Text	Text of the second link.
Description	Text	A short line under the second link.
Link	Link	Where the second link leads.
Image	Image	Picture next to the second link. Empty uses the linked product or collection image.
Badge	Text	A small tag next to the second link.
Link 3
Title	Text	Text of the third link.
Description	Text	A short line under the third link.
Link	Link	Where the third link leads.
Image	Image	Picture next to the third link. Empty uses the linked product or collection image.
Badge	Text	A small tag next to the third link.
Link 4
Title	Text	Text of the fourth link.
Description	Text	A short line under the fourth link.
Link	Link	Where the fourth link leads.
Image	Image	Picture next to the fourth link. Empty uses the linked product or collection image.
Badge	Text	A small tag next to the fourth link.
Link 5
Title	Text	Text of the fifth link.
Description	Text	A short line under the fifth link.
Link	Link	Where the fifth link leads.
Image	Image	Picture next to the fifth link. Empty uses the linked product or collection image.
Badge	Text	A small tag next to the fifth link.
Link 6
Title	Text	Text of the sixth link.
Description	Text	A short line under the sixth link.
Link	Link	Where the sixth link leads.
Image	Image	Picture next to the sixth link. Empty uses the linked product or collection image.
Badge	Text	A small tag next to the sixth link.
Link 7
Title	Text	Text of the seventh link.
Description	Text	A short line under the seventh link.
Link	Link	Where the seventh link leads.
Image	Image	Picture next to the seventh link. Empty uses the linked product or collection image.
Badge	Text	A small tag next to the seventh link.
Link 8
Title	Text	Text of the eighth link.
Description	Text	A short line under the eighth link.
Link	Link	Where the eighth link leads.
Image	Image	Picture next to the eighth link. Empty uses the linked product or collection image.
Badge	Text	A small tag next to the eighth link.

Mega menu promo card block

Setting	Type	What it does
Menu item	Text	The top level menu entry this column belongs to, spelled exactly as in the menu. All columns and cards with the same entry form one panel.
Width	Select	How much of the panel this column takes up.Options: Narrow, Medium, Wide · Default: Medium
Height	Select	How tall the promo card is. Match the columns makes it as tall as the link columns next to it.Options: Match the columns, Small, Medium, Large · Default: Match the columns
Image	Image	The picture on the promo card.
Heading	Text	The title above the links in this column.Default: Name what this card promotes
Text	Text	A short line under the card heading.
Link	Link	Where the whole card leads.

Tips

The header is part of the header group and appears on every page. You edit it once; there is no per page header.
Mega menu blocks are matched to menu entries by name. If a panel does not appear, check that the Menu item field reads exactly like the entry in Online Store, Navigation, including capitals.
On a phone the menu, search and account move into a drawer behind the menu icon. Logo, account and cart stay in the row.
Show header over the hero image only works on the home page and only when the first section is a full width Slideshow or Video. Everywhere else the header keeps its background.