Header and mega menu

Reel’s header holds your logo, the main menu, search, the customer account and the bag. On a computer, a menu item with nested links opens a mega menu with columns and up to four images. On phones and tablets, the menu opens as a sheet of large words.

1. Build the menu

The mega menu comes from the structure of your menu. You build it in Shopify admin, not in the theme.

1. Go to Content → Menus and open your main menu.
2. Add a top-level item, for example Shop.
3. Drag items under it to nest them. Each nested item becomes a column heading, for example Outerwear.
4. Drag items under those to nest a third level. They become the links in that column, for example Parkas and Shells.
5. Click Save menu.

A top-level item without nested items stays a plain link. Every mega menu ends with a See all link to the top-level item’s own link.

2. Header settings

Go to Online Store → Themes → Customize and click Header.

• Menu: the menu to show. The default is your main menu.
• Customer account menu: the links in the account sheet. See section 4.
• Color scheme: also used by the mega menu and the phone menu.
• Stay at the top while scrolling: keeps the header in view.

3. Add images to the mega menu

1. In the Header section, click Add block → Mega menu image.
2. In Menu item, type the title of the top-level item exactly as it appears in your menu, for example Shop. Capital letters don’t matter, but spelling does.
3. Choose an Image, type a Label, and pick a Link. Leave the link blank to use the menu item’s own link.
4. Add more blocks for the same item, up to four.

You can add 12 Mega menu image blocks in total, split across your menu items. Images appear in a row beside the link columns.

4. Customer account

When customer accounts are on, an account icon sits in the header. It is Shopify’s account component. Signed-out shoppers use it to sign in. Signed-in customers open an account sheet with the links from the Customer account menu.

• The default menu is Customer account main menu. Shopify creates it when you use customer accounts. Edit its links in Content → Menus, or pick another menu in the setting.
• If the icon is missing, open Settings → Customer accounts and make sure sign-in links are shown in your online store.

5. Search

The search icon opens a search bar across the top of the page. In Theme settings → Search:

• Show results while typing shows suggested searches, matching collections and matching products as the shopper types.
• Show prices in results adds the price to each product.

6. On phones and tablets

On screens narrower than 1100 px, the menu button on the left opens the menu sheet instead of the mega menu.

• Top-level items show as large words. An item with nested links opens to show the second level, with a See all link first.
• The third level and the mega menu images don’t show in the sheet. Make sure every page a shopper needs is reachable from the first two levels.
• The foot of the sheet holds the sign-in or account link, and the country and language selectors when your store has more than one of either.