Good navigation lets a first-time visitor find the right product in a couple of taps, without thinking about how your store is organized. Most navigation problems come from menus built around how the business sees its catalog instead of how customers shop.
Organize around how customers shop
Customers might look for products by:
- type (shirts, trousers, jackets),
- use or occasion (running, hiking, office),
- recipient (for him, for her, for kids),
- problem (dry skin, oily skin).
Pick the one or two your customers use most. Your support emails, site search terms and the pages people land on from search engines will tell you. In Shopify, the menu is built from collections and links in the Navigation settings, so set up collections to match.
Use plain labels
"Bottoms" is clearer than "The Foundation Edit". Use the words customers type into search. If a label needs explaining, change it.
Keep the top level short
Around five to seven top-level items is easy to scan. Put depth into sub-menus or well-built collection pages instead of a long top bar. Include "Sale" only if you run sales regularly; a permanent empty sale link frustrates people.
Make search do real work
For catalogs with more than a few dozen products, many visitors go straight to search. Check that it:
- tolerates typos and plurals,
- shows products (with images and prices) as you type,
- returns sensible results for your top 20 search terms.
Shopify's own Search & Discovery app lets you set synonyms and filters; test your most common queries after any change.
Filters that match decisions
On collection pages, offer filters for the attributes customers decide on: size, color, price, material, compatibility. Hide filters that would return nothing. On mobile, put filters behind a clear button that opens a full-screen panel.
Design for thumbs
On mobile, the menu is usually behind an icon. Make sure:
- tap targets are comfortably large,
- the search bar is visible without opening the menu, if search matters to your store,
- nested levels are easy to back out of,
- the cart and account links are easy to find.
Testing navigation changes
Navigation changes affect every page, so they're high-stakes. Two approaches work:
- Tree testing before you build. Give people a text-only version of your menu and tasks ("Where would you find a waterproof jacket for a child?"). Online tree-testing tools make this quick and cheap.
- A/B testing after you build. Measure the share of visitors who reach a product page and purchases per visitor. Run it for whole weeks, and remember that returning customers may be slower at first with a new layout, because they knew the old one.
For more on testing with mostly mobile traffic, see A/B testing for mobile.
Common questions
How many items should a Shopify menu have?
There's no fixed rule, but most stores do well with roughly five to seven top-level items. More than that becomes hard to scan, especially on mobile. Use sub-menus or collection pages for depth.
Should I use a mega menu?
For large catalogs with many categories, a well-organized mega menu on desktop helps. On mobile it turns into nested lists, so make sure the mobile version is just as easy to use.