There is no single set of menus that fits every store. A fashion shop with thousands of SKUs needs very different navigation from a café selling a few dozen items. This article pulls together how to combine Shopify menus by store type, based on what I have observed both running a store and watching how other shops do it.
Before the table, one important point: the menu on desktop and the menu on mobile should not be the same. People hold their phone in one hand and mostly tap with their thumb. According to observations by Steven Hoober, about 75% of mobile interactions are done with the thumb, and the easiest area to reach is the bottom half of the screen. On desktop it is the opposite: people scan from top to bottom, so a horizontal menu up top makes more sense. Two different contexts call for two different ways of laying out the menu.
A suggested table for combining Shopify menus by store type
| Store type | Desktop | Mobile |
|---|---|---|
| Fashion / Lifestyle, large catalog | Mega Menu | Tab Bar + Slide Menu |
| Electronics, many technical categories | Mega Menu with filters | Slide Menu |
| F&B / Local, few products | Simple Nav (plain horizontal menu) | Tab Bar |
| Beauty / Skincare | Mega Menu with images | Tab Bar + chat FAB |
| Dropshipping, many product lines | Mega Menu | Slide Menu |
This table is a starting point, not a rule. Below are the reasons for each row, so you can adjust it to fit your own store.
Fashion and lifestyle: a large catalog needs a Mega Menu on desktop
Fashion shops usually have a deep structure: Men / Women, then Tops / Bottoms / Accessories, then individual product lines, by season, by collection. Cramming all of that into a single vertical dropdown forces shoppers to hover through many layers.
On desktop, a Mega Menu solves this. It spreads the categories into several columns inside one large panel, so users see the whole product tree at once instead of clicking through each level. For a women’s clothing shop with dozens of product lines, this is usually the cleanest approach.
On mobile it is different. A narrow screen cannot spread out a Mega Menu, so a common approach is a Tab Bar for the most important routes (Home, Categories, Cart, Account) pinned at the bottom of the screen, plus a Slide Menu for the full category list. The Tab Bar always stays within thumb reach, while the Slide Menu holds the detailed product tree for when users want to dig deeper.
Electronics: technical categories need filtering right inside the menu
Electronics has its own quirks. Shoppers often know fairly well what they need: capacity, brand, price range, model year. So for an electronics store, the Mega Menu on desktop should include a few filters or subgroups right inside the menu, letting users jump straight to the right branch instead of browsing the whole category page.
For example, a computer accessories shop might split its Mega Menu into columns by type (mice, keyboards, headphones), and within each column list out popular price ranges or brands.
On mobile, because the category tree is long and technical, a Slide Menu works better than trying to stuff everything into a Tab Bar. A Slide Menu lets the menu nest several levels deep while staying compact. If you use it, give it clear text labels alongside icons. Nielsen Norman Group once measured this and found that hidden menus (the hamburger style) cut the chance of users finding navigation by nearly half compared to visible menus, so do not make the menu too hidden.
F&B and local: with few products, do not overcomplicate
Restaurants, bakeries, and local shops usually have only a few dozen items. Building a Mega Menu for a store like that is overkill, and it can even make the page messier than it needs to be.
On desktop, a Simple Nav, a horizontal menu with a few items like Menu, About Us, Contact, is enough. Shoppers do not need to dig deep; they need to order quickly.
On mobile, a Tab Bar works well here. A few of the most important buttons, for example Menu, Order, Call, sit ready at the bottom of the screen, right in the easy-to-reach thumb zone. A café selling online could pin the Order and Call buttons in the Tab Bar so customers do not have to scroll to find them.
Beauty and skincare: imagery and consultation support
Cosmetics sell through images and trust. Customers often hesitate over which type suits their skin, so the menu should reflect that too.
On desktop, a Mega Menu with images lets customers see the product or skincare line right inside the menu, instead of just reading text. A beauty shop might place a representative image for each line (cleansing, moisturizing, sun protection) next to the category name.
On mobile, besides a Tab Bar for the main navigation, a floating chat FAB in the corner fits this industry quite well. Customers tend to have questions before buying (can my skin use this, does it go with that other one), and an always-visible chat button lets them ask right away. Reducing hesitation at this stage is worth it: according to the Baymard Institute, the average cart abandonment rate in ecommerce is around 70%, meaning that for every 10 people who add to cart, only about 3 complete the purchase. Answering questions in time is one way to hold on to part of that.
Dropshipping: many product lines, prioritize clear grouping
Dropshipping stores often sell many categories at once: kitchenware, phone accessories, toys, household goods. The challenge is that these groups are scattered and unrelated to each other.
On desktop, a Mega Menu helps gather each category into its own column, so customers immediately see what the store sells. A clear structure matters more than looking pretty, because customers often arrive from ads and are not yet familiar with the store.
On mobile, a Slide Menu handles a large number of categories well without taking up space. Users open it, pick a category, then dig in.
Why you should configure mobile and desktop separately
What all five cases above have in common is that the two sides are configured differently. This is not a minor detail. Most orders now come from phones, and a desktop menu carried straight over to mobile is usually both hard to tap and a drag on page weight.
Performance is worth watching too. Google sets the threshold for good Core Web Vitals at LCP under 2.5 seconds, INP under 200ms, and CLS under 0.1. A bulky menu loading on every device easily drags these numbers down. On mobile, every component you add should be lightweight.
This is where a tool like Navi+ comes in handy: it lets you configure the desktop and mobile menus separately, drag and drop without code, and keep your menu when you switch themes. You can set a Mega Menu for desktop and a Tab Bar plus Slide Menu for mobile, without ever touching theme files.
In short, choose your menu based on how large your catalog is and how customers shop, then split the configuration for the two screen types. The table above is a starting point; the rest is testing and adjusting based on your store’s real numbers.
This article is part of the larger guide on How to choose the right menu type for your Shopify store.