> For the complete documentation index, see [llms.txt](https://menudocs.nx8apps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://menudocs.nx8apps.com/footer-menu.md).

# Footer menu

Add a sticky bottom navigation bar to your storefront on phones and tablets — like the tab bar in a mobile app. Give shoppers one-tap access to Home, Shop, Search, Cart, and more.

### What is the Footer Menu?

The Footer Menu is a navigation bar that stays pinned to the bottom of the screen on **phones and tablets**, so your most important links are always within thumb's reach. It works like the tab bar in a native mobile app: a row of up to **5 icons with labels** that follow the shopper as they scroll.

It is completely independent from your theme's own footer — it doesn't replace your footer links or change your theme. You can turn it on or off at any time.

> **Premium feature.** The Footer Menu is available on a paid plan. You can build and preview it for free — you only need a paid plan to make it live on your storefront.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2F8Q39iBNbnZp3LZQXEyQb%2Fimage.png?alt=media&amp;token=245bab42-d735-4f2f-a774-1859e80fe513" alt="" width="319"><figcaption></figcaption></figure>

***

### Before you start

To show the Footer Menu on your storefront you need two things:

1. **A paid plan** — required to publish (set a menu live).
2. **The app embed turned on** in your theme — this is what actually renders the bar. It takes one click.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2FAIpb02x7Ed17GY5h8KGW%2Fsetup-page.png?alt=media&amp;token=3d9e777b-ce48-4002-a848-ab6ec94559fd" alt=""><figcaption></figcaption></figure>

***

### Step 1 — Turn on the app embed

The bar only appears once its app embed is enabled in the theme editor.

1. Open the **Footer Menu** page in the app and click **Learn more** or **Open theme editor**, or go to **Online Store → Themes → Customize → App embeds**.
2. Find **Extra menu — Footer menu** in the App embeds panel and toggle it **on**.
3. Click **Save**.

\[VIDEO: 15–20s screen recording — opening the theme editor, scrolling to App embeds, toggling "Extra menu — Footer menu" on, clicking Save.]

Back in the app, you can click **Check again** on the "Turn on the footer menu in your theme" banner to confirm it's active.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2FHU5vQgFgIur6goNdeHGZ%2Fembed.png?alt=media&amp;token=2d25f783-611d-4162-b5e6-a83e53ef9cba" alt=""><figcaption></figcaption></figure>

***

### Step 2 — Create a footer menu

1. Go to the **Footer Menu** page in the app.
2. Click **Create footer menu** and give it a name (this name is internal — shoppers never see it).
3. You'll be taken straight into the editor.

You can keep up to **10 footer menus** — one is **Live**, the rest are drafts you can use as backups or seasonal variations.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2F2uzvuyfB7lKPxKvCQqSV%2Flist-menus.png?alt=media&amp;token=dc2fec0b-9229-4137-9f59-4c3a4e16fdac" alt=""><figcaption></figcaption></figure>

***

### Step 3 — Add your items

Each footer menu holds up to **5 items** (more than 5 makes each tap target too small on a phone). Every item has an **icon** and a **label**.

1. Click **Add item**.
2. Pick an **icon** and type a short **label**.
3. Choose where the item links to:
   * **Home** — your storefront home page
   * **Collection** — a specific collection
   * **Product** — a specific product
   * **Page** — a standard page (e.g. Contact, About)
   * **Blog** — a blog
   * **Custom URL** — any link or path (e.g. `/cart`, `/search`)
4. Drag items by the handle to reorder them.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2FZrI81yau0w67OYdTE2iw%2Fimage.png?alt=media&amp;token=b91f84b0-194a-446f-bd35-2c223eac19a7" alt=""><figcaption></figcaption></figure>

\[VIDEO: 10–15s — adding an item, then drag-and-drop reordering two items in the list.]

> **Tip:** Keep labels to one short word (e.g. *Shop*, *Search*, *Cart*). Short labels keep the bar tidy and readable on small screens.

***

### Step 4 — Customize the appearance

Open the **Appearance** panel to style the bar. The live preview updates as you change each setting.

* **Bar background** — a solid color or a gradient.
* **Text & icon color** — the color of inactive items.
* **Active item color** — the label/icon color for the item matching the current page.
* **Active background** — an optional colored "pill" behind the current item (solid or gradient). Leave it transparent if you don't want a pill.

The active item is detected automatically from the page the shopper is on, and its label is slightly bolded so it stands out even without a colored pill.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2FHNVdiByLlQObc3IFRo65%2Fimage.png?alt=media&amp;token=d3bb3859-6372-4295-8e96-2295a29a85a3" alt=""><figcaption></figcaption></figure>

> **Accessibility note:** the app shows a contrast warning if your text color is hard to read against the background, so shoppers can always read the labels.

***

### Step 5 — Control where and how it shows

Open the **Visibility** panel to fine-tune the behavior:

* **Hide on scroll** — the bar slides away as the shopper scrolls down and comes back when they scroll up (like Facebook). Off by default.
* **Avoid conflicts at the bottom of the screen** — automatically hides the bar when a drawer, popup, or another sticky bar (e.g. a sticky "Add to cart") is open, so nothing overlaps. On by default.
* **Lift chat widgets** — nudges chat buttons (Crisp, Tidio, Messenger, etc.) up so the bar doesn't cover them. On by default.
* **Hide on specific page types** — turn the bar off on pages where you don't want it (e.g. checkout-adjacent or landing pages).

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2FOMpyOClVs1yCMtkYZY9U%2Fimage.png?alt=media&amp;token=13e487bc-7146-4e5e-a002-13631a5bdaca" alt=""><figcaption></figcaption></figure>

***

### Step 6 — Translate your labels (optional)

If your store sells in more than one language, you can translate each item's label.

1. Open the **Translations** panel.
2. Choose a language from **Translating into** at the top.
3. Enter a translation for each item. The placeholder shows the original label — leave a field blank to fall back to the original.

Shoppers automatically see the labels in their own language. Translations travel with the menu when you export, import, or duplicate it.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2Fjc544563SVmefqYeDE3h%2Fimage.png?alt=media&amp;token=e4034e47-a203-437e-b780-d769f60c37f3" alt=""><figcaption></figcaption></figure>

***

### Step 7 — Set it live

When you're happy with your menu, click **Set live** in the top-right of the editor.

* Only **one** footer menu can be live at a time. Setting a new one live automatically moves the previous one to draft.
* **Save your changes first** — "Set live" publishes what's saved, not unsaved edits on screen, so the button is disabled until you save.
* To take the bar down, open the live menu and click **Move to draft**. Your menu is kept — it just stops showing on the storefront.

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2FeFWCOmENPvUka4KpDqXZ%2Fimage.png?alt=media&amp;token=c7097cf2-a9f4-424f-a625-76424d4fa51f" alt=""><figcaption></figcaption></figure>

***

### Managing multiple menus

From the **Footer Menu** list page, use the **…** menu on any row to:

* **Set live / Move to draft**
* **Duplicate** — great for seasonal or A/B variations
* **Rename**
* **Export** — download the menu as a `.json` file
* **Import** — upload a `.json` file to recreate a menu (including its translations)
* **Delete** (the live menu can't be deleted until you move it to draft)

<figure><img src="https://3637410424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2cjmzPKyasfAe0Rwk5RU%2Fuploads%2FACasmOI3eDl6IyLQD1Zr%2Fimage.png?alt=media&amp;token=3bbafeb9-8445-40cf-934e-2081a90baf0d" alt=""><figcaption></figcaption></figure>

***

### Frequently asked questions

**Does the Footer Menu show on desktop?** No — by design it only appears on phones and tablets, where a bottom bar is most useful.

**Will it replace or change my theme's footer?** No. It's a separate bar that sits on top of your storefront and doesn't touch your theme's footer links.

**I enabled the app embed but nothing shows.** Make sure you have a menu **set live** and that you're viewing the store on a phone/tablet-width screen. If you're on a paid plan and it still doesn't appear, click **Check again** on the banner.

**What happens if I downgrade to the free plan?** Your menus and settings are kept, but the bar stops showing on your storefront. Set a menu live again after you upgrade to bring it back.

**Can I use more than 5 items?** No — 5 is the maximum so each item stays large enough to tap comfortably on a phone.

{% embed url="<https://youtu.be/L6dk-Yc8-nE>" %}

### Cart button

An item that links to the cart can either open the cart page or open your theme's own cart drawer, so a shopper who adds something keeps their place on the page instead of being sent away from it. Choose between them under **edit an item → Links to: Cart**.

Most themes need nothing else. If your theme's drawer doesn't open, you can point the app at its cart button yourself — by clicking the button on your own storefront rather than by writing any code.

[Open your theme's cart drawer from the footer bar →](#cart-button)