> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_6av1zj.png =1000x657)

## 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.

## Step 1: Create your menu

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_bnr7xe.png =1000x657)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1q6m3t8.png =1000x657)

2. **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1iymv5g.png =1000x657)

3. **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**.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_5o1rrp.png =1000x657)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1nk20f7.png =1000x657)

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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_sjeaqh.png =1000x657)

## Step 2: Add and arrange your menu items

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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_i8u7ct.png =1000x657)

## 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.

## Step 4: Make your menu active

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?

* [Styling & Configuring Your Mobile Menu](https://help.quizell.com/en/article/styling-configuring-your-mobile-menu-hkeqch/)
* [What Is Quizell Smart Search & Menu? (and how it's different from Quizell)](https://help.quizell.com/en/article/what-is-quizell-smart-search-menu-and-how-its-different-from-quizell-1f8zju/)
* [Setting Up AI Search](https://help.quizell.com/en/article/setting-up-ai-search-16ze8ds/)
* [Customizing Your Search Bar](https://help.quizell.com/en/article/customizing-your-search-bar-17pw913/)

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