How to build your navigation and mega menus

Last checked against Splash 1.0.0 / 2026-08-15

A top-level menu item opens as a multi-column panel because its submenu has a submenu of its own, so the navigation you build in Shopify admin decides the shape of the header. Depth is the default rule. One setting overrides it: the Layout field on a Mega menu block, which forces columns or a plain dropdown on the single item that block names.

Depth is the switch#

Splash reads the depth of each top-level item in your main menu and draws it accordingly. Unless you add a Mega menu block and change its Layout field, nothing in the theme editor is involved.

Splash reads three levels. A fourth level is not drawn anywhere.

Note Depth decides this on its own, but it is not the last word. A Mega menu block whose Layout is set to Columns or Simple list overrides the reading above for that one item, in either direction. The block is covered below.

Build the main menu#

Go to Shopify admin, then Content, then Menus. The header uses the menu with the handle main-menu unless you point it somewhere else.

1. Add a top-level item, for example Equipment. This is what appears in the header row.
2. Add child items nested under it, for example Pumps, Filters, Heating and control. Each one becomes a column.
3. Add grandchild items nested under each child. These become the links inside that column.

The number of columns equals the number of child items. Three or four is comfortable. Ten child items give you ten narrow columns across the panel, so group them instead.

Note A top-level item that has children is not a link on a wide screen. It is a toggle that opens the panel. The route to a parent collection is covered below.

Product counts#

Inside a mega menu, third-level links show how many products the collection holds, read live from the store. You cannot type a count, and the figure is always current.

A count appears only when all of the following are true:

• The item is drawing as columns, not as a simple dropdown.
• The link is a third-level link. Column headings never carry a count.
• The menu item points at a collection. A link to a page, a product or a typed URL shows no count.

Counts are on by default. To turn them off for one menu item, add a Mega menu block for it and clear Show product counts.

Point the header at your menus#

In the theme editor, open the Header group and select the Header section.

Requires The account icon renders only when customer accounts are turned on. Go to Shopify admin, then Settings, then Customer accounts, and choose any option other than not using accounts. While accounts are off, no icon appears in the header and no Account row appears in the mobile drawer, whatever the Customer account menu is set to.

The Mega menu block#

The block does not create a mega menu. It attaches extras to a top-level item that already exists in your navigation: a featured panel, a layout override, and the count toggle. Add one from the Header section's block list. Up to 12 blocks are allowed.

Note The block finds its item by name. A typo, or renaming the item in Navigation afterwards, makes the whole block do nothing: no error, no warning, no featured panel. If a featured panel has stopped appearing, check the spelling of Menu item against the menu first.

The featured panel#

An optional card at the right of the columns, 300px wide. It takes five fields under the Featured panel heading in the block.

Two things silently produce nothing. The panel is drawn only when the item is drawing as columns, so setting Layout to Simple list hides it with every field filled in. And the link is drawn only when both Link label and Link are filled: one without the other draws no link at all.

On a phone the featured panel appears as a card at the foot of the drilled-in level, so the copy is not lost on small screens.

Splash ships two featured panels already filled in, on Equipment and on Pools. They are yours to edit rather than examples to add. See replace the demo content.

What shoppers see#

Wide screens and the drawer#

The horizontal navigation row appears at 1040px and wider. Below that the whole menu becomes the hamburger drawer. That threshold is wider than many themes use, so a small laptop window or a landscape tablet can show the drawer. This is expected.

In the drawer the levels stack rather than nest. Tapping a row with children slides that level in from the right and takes the level behind it off screen. The same row becomes the way back out. The Account row sits at the foot of the top level and is hidden while you are drilled into a submenu.

The route to a parent collection#

Because a top-level item with children is a toggle and not a link, the parent collection needs another way in. Splash handles this differently in each mode:

• Columns. The column headings are real links to their own collections. On a wide screen there is no separate row for the top-level collection itself.
• Simple list. The first row of the dropdown is the parent item's own name, linking to its page.
• The drawer. Every drilled-in level starts with a row leading to the parent collection, in both modes, but the wording differs. In Columns it reads All <name>. In Simple list it repeats the item's own name, so the first row of the level carries the same words as the row that opened it.

If a top-level collection page matters to you on desktop, give it a child item of its own that points back at it.

The search panel#

The magnifier in the header opens a panel with a field, a close mark, and a list of suggestions. The suggestions come from a menu you nominate.

1. In Shopify admin, Content, then Menus, create a menu whose items point at search results or at collections. A search URL looks like /search?q=pool+pumps. The shipped demo content expects the handle popular-searches.
2. In the theme editor, open Header and find the Search group.
3. Set Popular searches menu to that menu.
4. Set Heading to the label above the list. It defaults to Popular searches. Leave it blank to show the list with no label.

With no menu selected, the panel opens with the field alone. The heading on its own draws nothing.

Once a shopper types two characters, the shortcuts are replaced by live results, and they come back when the field is cleared. One or the other is shown, never both.

Limit Live results are products only, and at most five. Neither is adjustable. Pages and articles are reached through the See all results row at the foot of the panel, which leads to the full search page and does cover products, pages and articles.

Quote-only products show Price on request in the results instead of a figure. See quote-only products. For the full search results page and its filters, see collection and search pages.

The footer menu#

The footer's link columns come from one menu. Open the Footer section in the theme editor and set Menu. It defaults to the menu with the handle footer.

Each top-level item in that menu becomes one column:

• An item with child items draws its own title as the column heading and its children as the list beneath.
• An item without child items draws a single bare link and no heading.

If a footer column looks like it has lost its heading, that item has no child links. The brand column and the newsletter column are always drawn and do not come from the menu. For the rest of the footer, see announcement bar, footer and cart.

The collections directory#

The /collections page lists your categories. By default it lists every collection in the store that holds at least one product, paginated, in Shopify's own order. Collections with no products are left out, because a directory entry that leads nowhere is worse than a shorter directory.

That default includes collections that are mechanisms rather than categories: a best sellers collection feeding a home page section, an automatic collection left behind by another theme. To curate the page instead, build a menu of exactly the collections you want and point the section at it.

1. In Shopify admin, Content, then Menus, create a menu listing the collections in the order you want them. The shipped demo content expects the handle category-directory.
2. In the theme editor, switch the preview to the Collections page and select the Collections grid section.
3. Set Menu to that menu.

With a menu set, the page lists exactly those collections in exactly that order, with no pagination, and the count in the page heading matches what is listed. Menu items that are not collection links are skipped, so a page or a typed URL in that menu simply does not appear.

Leave Menu empty to go back to the automatic listing. Collections per page sets the page length for the automatic listing only, from 8 to 24, defaulting to 16.

The home page carries its own category row, which is a separate section with its own photographs and settings. See set up the home page.

When something does not appear#

Every setting named here is defined in full on the section and block reference. If something behaves differently from what is described, contact support.

Something wrong here If a step does not match what you see, say so and it gets fixed. Documentation goes stale, which is why the line under the title carries a date.