Header

The header holds your logo, the main menu, and the search, account and cart icons. It is shared by every page of the store, so you set it up once. It also owns the mobile menu and the search panel.

Where to find it

In the theme editor, the header is in the Header group at the top of the left sidebar, together with the announcement bar. Select Header to open its settings. It cannot be removed or moved, and changes apply to every page.

Menus and dropdowns

The header shows the menu chosen in its Menu setting, which starts as your store's main menu. Menus are edited in your Shopify admin under Content > Menus.

• A top-level item with items nested under it opens a dropdown.
• A top-level item with two levels nested under it opens a mega menu instead. See below.
• A parent item usually links to its own page, with a small arrow beside it that opens its menu. To make a parent that only opens its menu, give it the link #.

Mega menu

A mega menu opens across the full width of the page. Second-level items become numbered column headings, with their third-level items listed under them. A top-level item becomes a mega menu in either of two ways:

• Automatically, when any item nested under it has items of its own. Nothing to set up in the theme.
• With a Mega menu block, which also adds up to two featured tiles beside the columns.

To add featured tiles to a menu item:

1. In the theme editor, select Header and click Add block, then Mega menu.
2. In Top-level menu item name, type the item's name exactly as it appears in your menu, for example Shop.
3. For each tile, choose a Featured collection to use that collection's image, title and link. Or add your own image, caption and link. Anything you add yourself replaces the collection's.

A tile is only shown when it has an image. On mobile, the tiles appear in the menu drawer under that item's links.

Transparent header

With Transparent on home page hero on, the header lies over the first section of the home page with no background of its own, so your hero image runs to the very top of the screen. It returns to its normal colors when a customer scrolls, hovers over it, moves keyboard focus into it or opens a menu.

The header only turns transparent when all of these are true:

• The customer is on the home page. Every other page keeps the normal header.
• The first section of the home page is an Image banner, a Slideshow or a Cover hero.
• That section has an image or video. In a slideshow, every slide needs one.
• That section's Top spacing is None.
• For an image banner or slideshow: Layout is Text over image and Width is Full width.

If any of these is not met, the header quietly stays as it is. This is deliberate: transparent text over a plain background, or over a split layout, would be unreadable.

Text and icon color sets the color of the menu and icons while the header is transparent. The theme adds a soft shade behind the header, dark for a light color and light for a dark one, so it stays readable on any image. If your logo is dark, upload a light version in Logo for transparent header.

Sticky header

Sticky header decides whether the header follows customers down the page:

• Off: the header scrolls away with the page.
• Always: the header stays at the top of the screen.
• On scroll up: the header hides while customers scroll down and returns as soon as they scroll up. This is the default.

Search, account and cart

• Search opens a search panel from the top of the page. Suggestions appear as customers type when Show search suggestions is on in theme settings under Search behavior.
• Account is shown when customer accounts are turned on for your store. Signed-out customers go to sign in. Signed-in customers see the menu chosen in Customer account menu.
• Cart shows the number of items in the cart. It opens the cart drawer or the cart page, depending on Cart type in theme settings under Cart.

Country and language selectors

On mobile, the menu drawer can show a country/region selector and a language selector at the bottom. Each one only appears when there is a choice to make: the country selector when your store sells to more than one country, the language selector when your store has more than one published language. The footer has its own pair of selectors, shown on every screen size.

Layout options

Desktop layout sets how the logo and menu are arranged on desktop:

• Masthead: your logo is shown large in its own row above the menu, like the nameplate of a magazine. As customers scroll, the large logo scrolls away and a compact bar with a small logo stays. This is the default.
• Logo center, menu left: one bar, with the menu on the left, the logo in the middle and the icons on the right.
• Logo left, menu center: one bar, with the logo on the left, the menu in the middle and the icons on the right.

On mobile, every layout becomes a single bar with a menu button, the logo and the icons.

Section settings

Select the section in the theme editor to see these settings, in this order.

Blocks

This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 8 blocks.

Mega menu

Turns one top-level menu item into a mega menu with up to two featured tiles. Add one block for each menu item that should have tiles.

Image sizes

Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.

Tips

• Keep the main menu to five or six top-level items. Longer menus crowd the logo on smaller laptops.
• Menu item names in a Mega menu block must match your menu. If you rename the menu item later, update the block too.
• Check the transparent header against every slide of a slideshow. One light slide can make white menu text hard to read; raise that slide's overlay if so.