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.
At a glance: Already in your theme. Find it in the Header area of the left sidebar, on every page.
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
- 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.
- Add the top-level item that will open the mega menu, for example Shop. It can link to a collection or to any page.
- 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.
- Under each heading, nest the links for that column, like Dresses and Knitwear. Click Save menu.
- In the theme editor, click Header in the left sidebar, then Add block → Mega menu.
- 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.
- 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.
- 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.
- Click Save, then point to Shop in the preview. The panel lists one column per heading.
- 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
1is 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.