Same store, three places where shoppers need a menu: the desktop screen, the drawer on a phone, and the bottom of the phone screen. Each place has its own menu, but you only build the category tree once.
1Desktop: Desktop Mega Menu
Shoppers on a computer have room and a mouse pointer, so they want to see many categories at once without clicking through pages.
A Mega Menu drops down several columns right under the header, showing a whole group of categories and submenu items in one hover.
↓ Smart responsive: this same tree shows on phones
2Phone: Mobile Menu (Slide) reuses the Mega tree
A phone screen is small and has no room for multiple columns. Shoppers need a compact drawer that opens one level at a time.
With Smart responsive, the Mobile Menu takes the Mega Menu's tree. You don't rebuild the categories a second time, and the two never fall out of sync.
Turn your Mega Menu into a phone menu: a card built into the app
You don't need to rebuild anything. In the Mega Menu, open Configure > Smart responsive: click Copy embed item, then paste it at level 1 of the Mobile Menu. No Mobile Menu yet? Click Create a Mobile menu right on the card. The embed item turns into the Mega tree and keeps its levels.
You edit here→Mobile menu on mobile
Follows automaticallyStep 1: Copy this menu item template
Copy embed itemStep 2: Pick the Mobile menu to paste it into
Create a Mobile menu
Configure both ways: hide some items, add your own
Phones need fewer items, and some things only fit a computer, so you can adjust both ways:
- Hide some: for an item that only suits a computer, open it in the Mega Menu, go to Visibility and turn on Exclude when embedded. The item stays on desktop and only disappears from the phone version.
- Add your own: the Mobile Menu can still add its own items around the embedded tree, for example a search box at the top, a Contact item or a WhatsApp button that the desktop doesn't have.
Real limit: an embedded item can only go at level 1 of the Mobile Menu and has no submenu of its own. A Mega that is embedded can't be deleted; to delete it, remove the embedded item from the Mobile Menu first.
↓ The Tab Bar opens this exact drawer
3Bottom of the phone: Tab Bar opens the Mobile Menu
Shoppers hold the phone in one hand, and their thumb only reaches the lower half of the screen. The theme's ☰ button sits in the top corner, which is hard to tap.
The Tab Bar sits at the bottom and is always visible. The Menu tab opens the Mobile Menu from step 2 right away, so shoppers reach the categories fastest without reaching up.
Shared benefits
You edit the categories in one place, the Desktop Mega Menu. When the desktop changes, the Mobile Menu changes with it, and the Tab Bar still opens the same drawer. For an item that should only show on desktop, turn on Exclude when embedded in the item's Visibility.
How to set it up
- Mega Menu: Add menu > Desktop Mega Menu, build the tree in the Build Menu step, then Publish > Turn on. Details: Create a Desktop Mega Menu.
- Mobile Menu: create an empty Mobile Menu, then in the Mega Menu open Configure > Smart responsive, click Copy embed item and paste it at level 1 of the Mobile Menu. Details: Create a Mobile Menu.
- Tab Bar: Add menu > Tab Bar, paste the
open:NaviMenu(SF-…)code of the Mobile Menu into the Link field of the Menu tab. Details: Create a Tab Bar.
Choosing a different menu type? See Which menu fits your store.