> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/set-up-your-store/mobile-navigation-bar.md).

# Mobile navigation bar

The **Mobile navigation bar** is a bar pinned to the bottom of the screen on phones, holding shortcuts to the parts of the store shoppers use most: home, shop, cart, offers, and account. It keeps those actions within thumb reach no matter how far down a collection or product page the shopper has scrolled, instead of making them scroll back up to the header. On a store where most traffic is mobile, this is what keeps browsing and the cart one tap apart.

It is a global section, so it appears on every page of the store when enabled.

<figure><img src="/files/m0nNPlvxuBQueh4EWKw2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section only shows on mobile. Please switch to mobile view.
{% endhint %}

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Switch the preview to mobile view, otherwise the bar does not render.
3. In the left sidebar, click **Mobile navigation bar**.
4. Turn on **Enable mobile navigation bar**, then tick the items you want in the bar.
   {% endhint %}

*Result:* the bar appears at the bottom of the mobile preview with the items you selected.

### Section settings <a href="#section-settings" id="section-settings"></a>

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable mobile navigation bar</strong></td><td>Shows a sticky navigation bar at the bottom of the screen on mobile devices for quick access to key actions.</td></tr><tr><td><strong>Show home page</strong></td><td>Displays the <strong>Home</strong> icon. Clicking it takes shoppers to the home page.</td></tr><tr><td><strong>Show shop</strong></td><td>Displays the <strong>Shop</strong> icon. Clicking it takes shoppers to the collection page.</td></tr><tr><td><strong>Show cart</strong></td><td>Displays the <strong>Cart</strong> icon. Clicking it opens the cart drawer.</td></tr><tr><td><strong>Show offer</strong></td><td>Displays the <strong>Offer</strong> icon. Clicking it opens the <strong>Offers</strong> popup.</td></tr><tr><td><strong>Show account</strong></td><td>Displays the <strong>Account</strong> icon. Clicking it opens the account popup.</td></tr></tbody></table>

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* On phones, the bar stays fixed at the bottom of the screen while shoppers scroll.
* It duplicates actions that live in the header on desktop, so keep the two consistent: an icon enabled here but hidden in the header will confuse shoppers who switch devices.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Header](/velare/set-up-your-store/header-group/header.md): the desktop equivalents of these icons
* [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md): what the cart icon can open
* [Offers popup](/velare/customize-your-pages/overlay-group/offers-popup.md): the offers content shown from the header offer icon


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/set-up-your-store/mobile-navigation-bar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.