How to build your navigation and mega menus

Last checked against Splash 1.0.0 / 2026-09-09

A top-level menu item that has children opens as a panel, and that panel lists those children one to a row with the measurement that separates the products behind each one, derived from the products themselves. The navigation you build in Shopify admin decides what the header holds. The theme editor adds a photograph, two extra doors, and a handful of switches.

What each menu item draws#

Splash reads 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.

Note Depth no longer decides the shape. Earlier versions of Splash drew columns only where a third menu level existed; the panel is one component now whatever the depth, so a two-level menu gets the same panel a three-level one does.

Splash reads three levels. In the panel and in the drawer only the first two are drawn: a third level is reached from the shelf's own page. The Simple list dropdown is the one place grandchildren appear in the header. A fourth level is not drawn anywhere.

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 Pumps & Filtration. This is what appears in the header row.
2. Add child items nested under it, for example Pumps & Motors and Filtration. Each one becomes a row in the panel.
3. Point each child at a collection, not at a typed URL. That is what lets the row carry a figure.

Between two and five children reads well. Ten children give you a panel ten rows deep, so group them instead.

The figure on each row#

Every row in the panel carries one datum at its trailing edge, and Splash chooses which:

• A measurement, where the products behind that row answer the same specification in the same unit, for example 52-118 GPM. It is read from the products' own specification metafields and cannot be typed. See specifications.
• A product count, where they do not, for example 9 models. Read live from the store, so it is always current.

A row carries neither when its menu item points at a page, a product or a typed URL rather than a collection.

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. That leaves the measurement, which the switch does not affect.

Clicking a range#

Pointing at a top-level item opens its panel either way. What a click does is a setting, Clicking a range goes to it, on the Header section and on by default.

• On. Clicking the item goes to the page it links to. The panel is a preview you look at on the way past.
• Off. Clicking opens the panel and nothing navigates. The panel then closes with a full-width row leading to the item's own page.

This applies to a mouse on a wide screen. On a touch screen, and in the drawer, a tap always opens the menu, which ends with a link to the range. An item whose URL is # has nowhere to go, so it always opens the panel.

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 the panel. It attaches extras to a top-level item that already exists in your navigation: a photograph, a layout override, and the count toggle. Add one from the Header section's block list. Up to 20 blocks are allowed, shared with the Sizing row blocks below.

Note Match the block to its item with Collection wherever you can. It survives renaming the item in Navigation, where the Menu item text field does not: a rename makes a text-matched block do nothing, with no error and no warning. If a photograph has stopped appearing, check that first.

The object study#

One photograph per top-level item, shown at the right of the panel between four registration marks the theme draws. With no photograph the panel is the rows alone and half the width; with one it is twice as wide.

What the file needs:

• 16:9, 1600 by 900 or larger. Another ratio is letterboxed inside the frame rather than cropped, so nothing is cut off.
• A flat white ground. The panel is white, so a white-ground photograph reads as a cut-out with no work at all.
• Nothing in the four corners. Keep the outer eighth of each corner clear, or it lands under a registration mark.
• No corner marks, rules or borders in the file. The theme draws those.

Photograph on phones is a second file for the same item, served below 750px. Use it when the wide photograph carries composed labels or fine detail: at phone size those become unreadable. Set it to the same picture without the labels. Leave it empty and phones show no photograph at all, while tablets and wide screens keep the first one.

The two doors#

To the right of the ranges the header carries a second, smaller register of two items. Both are optional and both disappear when you empty what feeds them.

Pool sizing#

A lookup table that answers one question for a shopper who knows their pool's volume. It is built from Sizing row blocks on the Header section, and the header does the arithmetic.

Then one Sizing row block per case:

With no Sizing row blocks the door is not drawn.

Quoted work#

A second door for work you price rather than sell off the shelf.

A menu row pointing at the same page as the call to action is dropped, so the quote page is offered once rather than twice. If the menu holds nothing but that page, the door collapses to a plain link.

With no menu and no quote page, the door is not drawn. See why quote requests exist.

Extra menu links#

Extra menu links on the Header section takes a menu whose items appear as rows in the mobile drawer, under the collections and beside Account. Use it for the links that belong in a menu but not in the header row: order tracking, a trade programme, a journal. They are not drawn on wide screens, where the footer carries them.

The country and language switcher#

Shown when your store sells into more than one country or speaks more than one language, and nowhere otherwise. It has a switch in two places, both on by default:

• Announcement bar, Show the country and language switcher. Draws it at the end of the bar from 1240px up.
• Header, the same label. Draws it as the last row of the mobile drawer, below that width.

The footer carries its own, with its own switch. All three open the same form, so they cannot disagree about what your store offers. Changing either field applies immediately; there is no Apply button unless the shopper has JavaScript turned off.

What shoppers see#

Wide screens and the drawer#

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

If your top-level names are long, or you have more than about six of them, the row runs out of width sooner and hands over to the drawer at wider sizes. Shorter names are the fix.

The drawer#

The drawer opens on a heading and the ranges, each a full-width row with its product count and a chevron:

1. Tapping a range slides its level in from the right and takes the level behind it off screen. That level carries the range's name, one row per shelf with its count, a View all row, and the photograph if you set one for phones.
2. All collections at the top of that level is the way back.
3. Under the ranges sit the utility rows: the two doors, which open in place, then Account, then anything in Extra menu links, then the country and language row.
4. The utility rows are hidden while you are drilled into a range, so a level is the level and nothing else.

The page behind the drawer is dimmed, and tapping the dimmed area closes it.

The route to a parent collection#

A top-level item with children is not a link on a wide screen unless Clicking a range goes to it is on. Splash gives its collection a route in every case:

• The panel. A View all row at the foot of the rows. With the click setting off, a second full-width row leading to the same place closes the panel.
• Simple list. The first row of the dropdown is the item's own name, linking to its page.
• The drawer. Every drilled-in level carries the same View all row.

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.