← All guides

Navigation for Every Stage of Your Store's Growth — from 10 to 10,000 Products

Stage 3 — A Store That Has Scaled (500+ Products, 15+ Categories)

Navigation for a scaled store with 500+ products and 15+ categories: multi-column mega menus, a mobile Tab Bar, search, A/B testing, and how to set it up sensibly with Navi+.

Stage 3 — A Store That Has Scaled (500+ Products, 15+ Categories)

When a store crosses 500 products and 15 categories, things change in nature. The challenge of scaled store navigation is no longer “how to keep it tidy,” but “how to help thousands of shoppers with dozens of different intentions each find what they need within seconds.” This is the stage I struggled with the most while running a store, so let me share what I learned.

What Stage 3 looks like

The most obvious trait is a large, multi-tiered catalog. You no longer have a few flat categories, but a 2-3 level tree: a top group, subgroups, then filtering by attributes. A fashion shop might have Men / Women / Kids, with each branch split into Tops / Bottoms / Accessories, and then further by occasion or season.

Traffic also becomes more varied. Shoppers coming from Google search usually already know what they want. Shoppers from Facebook or TikTok ads often arrive on a whim, click a product, then decide what to do next. Shoppers from email are returning customers who know their way around. Each source behaves differently, and the menu has to serve all three on the same interface.

Many stores at this stage also sell across multiple markets and languages. And speed is now a matter of survival. According to Google, the good thresholds for Core Web Vitals are LCP under 2.5 seconds, INP under 200ms, and CLS under 0.1. Every extra app you install can eat into that budget, so keeping the page light takes real discipline.

A simple menu bar is not enough for scaled store navigation. The needs usually include:

  • A more complex Mega Menu: multiple columns to lay out the whole category tree, with room for a featured product and a seasonal promotion banner.
  • Optimized mobile navigation: most orders come from phones, so the touch experience must be smooth and within easy reach.
  • Menu A/B testing: when traffic is large enough, measure instead of guess.
  • A FAB for seasonal CTAs: a floating button to push the campaign that’s running without touching the entire menu.

The multi-column mega menu — and its limits

A multi-column mega menu lets shoppers see the entire store structure in a single hover. This is a big advantage on desktop, where there is plenty of space and a precise cursor.

But multiple columns does not mean cramming in everything. Shoppers scan the screen from left to right, top to bottom, so the leftmost first column should hold the most important group. Placing a featured product or banner in the rightmost column — the area the eye reaches last — is usually more sensible than squeezing it into the middle of the reading flow.

Mobile: where the order is decided

On a phone, the thumb is the cursor. According to Steven Hoober (UXmatters), most users hold the phone one-handed and operate it with their thumb, so the easiest area to touch is the lower half of the screen. This is why a fixed Tab Bar at the bottom is usually more effective than piling everything into a hamburger menu at the top.

The Nielsen Norman Group also points out that hiding all navigation behind a hamburger markedly reduces how much shoppers use the menu. They recommend a combination: a few important shortcuts shown up front, with the rest tucked into a slide menu. For a 500+ product store, this pairing is almost mandatory — you can’t expect shoppers to open the hamburger themselves to explore the catalog.

A few hard decisions

At this scale, the choices no longer have one-size-fits-all answers. A few things I had to weigh:

Should you split the menu by persona? For example, separating “For myself” and “For a gift.” This works when the two groups of shoppers genuinely think differently — gift buyers care about the occasion, the budget, the recipient. But if you impose a persona that shoppers don’t think in terms of, you only add another layer of hesitation. Look at your internal search data before deciding.

Should you attach search to the mega menu? With a large catalog, search is often the fastest way for a shopper with intent to reach their target. Placing the search box right inside or next to the mega menu serves both groups — those who like to browse and those who like to type. This is usually a “should do” decision.

When should you use a featured product in the mega menu? When you have a product genuinely worth pushing: new arrivals, items on a strong sale, or that group’s bestseller. Don’t place a featured product just to fill empty space — an image box with no reason makes the menu more cluttered and slower.

A rule I set for myself: every element in the menu must answer the question “does it help the shopper move forward, or is it just decoration?”

One baseline worth remembering: according to the Baymard Institute, the average cart abandonment rate is around 70%, and that figure has barely changed over many years. Good navigation can’t fix the checkout step, but a cluttered, slow, hard-to-search menu will make shoppers leave very early — even before they get a chance to add to cart.

Configuration tips with Navi+

At this stage, I usually separate desktop and mobile rather than using one shared configuration. Navi+ lets you configure the two environments independently, so this is the time to take advantage of that.

On desktop: use a full Mega Menu. Lay out the category tree across multiple columns, reserve one column for a featured product or seasonal banner, and consider placing a search box right inside the menu. Because Navi+ works in a no-code drag-and-drop way, you can change the column layout quite quickly when you want to try a new structure.

On mobile: combine three layers. An optimized Tab Bar at the bottom for the 4-5 most important paths, sitting neatly within the thumb zone. A Slide Menu holding the entire catalog for shoppers who want to browse deeply. And a FAB for seasonal CTAs — say “11.11 Sale” or “Lunar New Year Gifts” — turned on for the occasion and turned off afterward, without rebuilding the menu.

Because the Navi+ menu stays in place when you change themes and is optimized not to drag down Core Web Vitals, you can experiment with layouts more freely without worrying about starting over every time you swap the design.

Measure and review on a cycle

Large scale lets you measure in a meaningful way. Use analytics to see which menu items get clicked a lot and which are nearly dead. With enough traffic, menu A/B testing helps you compare two options — for example, a mega menu with a featured product versus one without — and let the numbers decide instead of gut feeling.

For a multilingual store, remember that a machine-translated menu sometimes breaks the layout: German is longer than Vietnamese, and some languages read right to left. Check each language version as its own experience; don’t assume that a nice original means a nice translation.

Finally, set a regular review schedule — quarterly, for instance. The catalog at this stage changes constantly, and a menu that made sense six months ago may already be out of step with your current product structure. Navigation is not a do-it-once-and-forget task.

This article is part of the larger guide on Navigation for Every Stage of Your Store’s Growth — from 10 to 10,000 Products.

Share Facebook X