Header

Holds your logo, main navigation, search and cart. Four layout styles, an optional sticky behavior, and a transparent mode for pages that open with a full-width image. Anything richer than a plain dropdown, such as a mega menu, a product menu or a phone number, is added as a block.

Good for

• Big catalogs that need a mega menu with columns and promo images
• Home pages that open with a full-screen image, using the transparent header
• Promoting products, collections or a campaign directly from the menu

Build a mega menu

1. In your Shopify admin, go to Content → Menus and open the menu your header uses. That's Main menu unless you picked another one under Menu in the header settings. The mega menu reads from that menu.
2. Add the top-level item that will open the mega menu, for example Shop. It can link to a collection or to any page.
3. Under that item, add the items that will become the column headings, like Women, Men and Accessories. Drag each one slightly to the right beneath Shop so it's nested. Headings are clickable too, so give each one a link.
4. Under each heading, nest the links for that column, like Dresses and Knitwear. Click Save menu.
5. In the theme editor, click Header in the left sidebar, then Add block → Mega menu.
6. In Label, type the name of the top-level item exactly as it appears in the menu, for example Shop. Capital letters and punctuation don't matter, but the words must match. The block doesn't add a new item. It replaces that item's normal dropdown with the mega menu panel.
7. Choose Desktop columns. If the last link in each column is a View all link, turn on Enable link highlight to make it stand out.
8. To add promo images or videos, turn on Enable media cards and fill in up to four cards. Each card needs an image or video, and it only becomes clickable once it has both a Heading and a Link URL.
9. Click Save, then point to Shop in the preview. The panel lists one column per heading.
10. If you use a separate Mobile menu, add the same Shop item there, with its nested items. The mobile drawer then opens the same columns and cards as a drill-down menu.

Section settings

Logo

Layout

Transparent header

Make sure that the first section on your home page is either an image slideshow or a full-width image.

Search

Navigation

Menu badge

Menu highlight

Appearance

Spacing

Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.

Blocks

Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.

Mega menu block

Content

Media cards

Media card 1–4

Each of the 4 media cards has the same settings, set separately for each one.

Tabbed menu block

Adds a tabbed panel to the header navigation, opened from the menu item named in Label. The tabs are listed down the left of the panel, and hovering over or clicking a tab shows its links on the right, in columns under group headings. On mobile, the same menu opens in the menu drawer as a drill-down: tab, then group heading, then links.

Everything in the panel comes from one menu you build in your Shopify admin under Content → Menus, nested three levels deep:

• Tabs. The top-level items in the menu, like Women, Men and Kids.
• Group headings. The items nested under each tab, like Clothing and Shoes. Each one heads a column, and is a link too.
• Links. The items nested under each heading, like Dresses and Knitwear. They're listed in the heading's column.

To nest an item in the menu editor, drag it slightly to the right beneath the item above it. The block shows nothing until it has a Label and a menu with at least one tab that has all three levels. Give every tab its group headings and links, since a tab with nothing nested under it has an empty panel on desktop.

Content

Product menu block

Content

Products

Collection menu block

Content

Collections

Card style

Media menu block

Content

Media card 1–5

Each of the 5 media cards has the same settings, set separately for each one.

Phone number block

Content

Store locator block

Inside each Store locator you can add these nested blocks: Location. Click the block in the sidebar, then Add block beneath it.

Content

Layout

Map

Image controls

Text sizes

Section style

Tips

• The other menu blocks can add an item or take one over. Product menu, Collection menu, Media menu and Tabbed menu add a new item to the end of the navigation, named by their Label. If the label matches a top-level item already in your menu, the block opens from that item instead of adding a new one.
• A Tabbed menu needs three levels. In the menu you pick for the block, the top-level items become tabs, the items under them become group headings, and the items under those become links. If no tab has links under its headings, the block shows nothing.
• Badges and highlights count menu items from the left. Position 1 is the first top-level item in Menu. Items added by menu blocks aren't counted.
• Upload a light version of your logo for the transparent header. The transparent header's Logo replaces your normal logo while the header sits over the image, and it uses the same width settings.

Troubleshooting

My mega menu isn't showing

Check that Label matches the name of a top-level item in the menu picked under Menu in the header settings (usually Main menu), and that the item has nested items under it. An item with nothing nested under it has no columns to show, so it stays a plain link.

The header is transparent on the home page but not on other pages

The transparent header only applies to the page types you switch on under Transparent header. Product pages and other pages aren't included by default. For a regular page, add its handle to Custom pages. The handle is the last part of the page's web address, for example about-us. The page also needs a full-width image at the top, because the header sits over the top of the page.

When does the transparent header turn solid?

It switches to its normal colors when the shopper points to the header, opens a menu, uses search, or scrolls down the page even slightly. With Enable sticky header off, the header scrolls away with the image instead, so you mostly see it in its transparent state.

The header disappears when I scroll down

That's what On scroll up does. The header slides away while shoppers scroll down and comes back as soon as they scroll up. To keep it on screen all the time, set Sticky header style to Always on.