Articles on: Quizell Smart Search & Menu

Building Your Mobile Menu

Introduction

The mobile menu is a customizable bottom navigation bar that helps mobile shoppers move around your store — with items like Home, Catalog, Cart, Account, and More always within thumb's reach. This guide covers creating a menu and adding, editing, and arranging its items.

(Styling, sizing, and behavior are covered in Styling & Configuring Your Mobile Menu.)

The mobile menu is part of Quizell Smart Search & Menu, a separate Shopify app from Quizell. It displays on mobile devices only, not desktop.

Where to find it

In your Shopify admin, open Apps → Quizell Smart Search & Menu
Select Menus in the left menu

The Menus page

The Menus page lists your menus and lets you build them without any coding:

Default Menu (Most Popular) — a ready-made starting point.
Active — the badge marks the menu currently live on your store. Only the active menu displays to shoppers.
Edit — opens the menu editor.
More — manage the menu (duplicate, delete, and other actions).
Create Menu — start a new menu from scratch.

To build a new menu, click Create Menu on the Menus page. This launches a short setup wizard:

Choose your navigation layout — pick a layout preset (Most Popular, Highlight, Floating, Rounded, Boxed, or one of the Spotlight styles), then click Next.

Select a menu type, then click Next:

Navigation menu — a standard mobile-friendly bottom navigation bar with core links for seamless browsing. This is the focus of this guide.
Mega menu — ideal for large catalogs; supports rich categories and quick access to everything in one view.

Pick a color theme — choose Scheme 1, 2, or 3, or use Adjust colors / Import website colors to match your store. The live preview updates as you choose. Click Next.

Select a menu language from the list (English, French, German, Spanish, Arabic, and more), then click Generate Menu.

Your menu is created and opens in the menu editor, on the Menu tab — with additional tabs (Style, Size, Behavior, Custom CSS) and a live phone preview on the right.

Already have a menu? Click Edit on it from the Menus page to open it directly.

Everything you choose in the wizard — layout, colors, and language — can be refined later in the editor, so don't worry about getting it perfect now.

On the Menu tab, the Menu items list is where you build the bar. A typical menu includes items like Home, Catalog, Cart, Account, and More.

For each item you can:

Reorder — drag the handle to change the order items appear in the bar.
Expand — use the chevron (›) to manage sub-items nested under that item (handy for an item like "More").
Edit — use the pencil to set the item's label, icon, and destination.
Show/Hide — use the eye icon to toggle an item's visibility.
Delete — use the trash icon to remove an item.

To add a new item, click + Add menu at the bottom of the list.

Step 3: Preview on mobile

The phone preview on the right shows the bottom navigation bar exactly as mobile shoppers will see it. Update items on the left and watch the bar change.

Remember: the menu appears on mobile only, so always confirm the experience on a mobile device or your browser's mobile view.

Only the Active menu shows on your store. From the Menus page, make sure the menu you want live is marked Active.

Best practices

Keep it to around five items. A mobile bottom bar gets cramped quickly — lead with your highest-traffic destinations.
Use the "More" item for overflow. Nest secondary links under it rather than crowding the bar.
Pair clear icons with short labels so items are tappable and instantly recognizable.
Always test on mobile, since the menu doesn't appear on desktop.

Important notes

The mobile menu is mobile-only and does not display on desktop.
Only the Active menu is shown to shoppers; you can keep other menus as drafts.
Styling, size, and behavior live on the other editor tabs — see Styling & Configuring Your Mobile Menu.

Troubleshooting

My menu isn't showing on my store

Confirm the menu is marked Active on the Menus page.
Check on a mobile device (or mobile view) — the menu doesn't appear on desktop.

The bar feels too crowded

Reduce to around five items and move the rest under a "More" item using the expand (›) control.

An item links to the wrong place

Click the pencil on that item and update its destination.

What's next?

With your items in place, style the menu next so it matches your brand.

Updated on: 10/06/2026

Was this article helpful?

Thank you!