> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/mobile-dock.md).

# Mobile dock

Give mobile shoppers an app-style navigation bar at the bottom of the screen with quick access to your cart, search, menu, account and key pages.

***

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

The **Mobile dock** is a navigation bar fixed to the bottom of the screen on phones, like the tab bar in a shopping app. Each item is an icon with a label: cart, search, menu, account, or a link to any page. It only shows on mobile and lives in the **Overlay** group, so it appears on every page.

The dock appears once shoppers scroll past the header. While it's showing, the theme hides the sticky header so the two don't both cover the page.

### 1. Our guide to set up a Mobile dock section:

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

* In the theme editor, click **Add section** in the **Overlay** group at the bottom of the sidebar.
* Locate **Mobile dock.**
* Switch the preview to mobile view with the phone icon at the top of the editor. The dock doesn't show on desktop.
* Click **Save.**
  {% endhint %}

The section is added with two **Link** blocks, a **Cart**, a **Search** and a **Menu** block. Drag the blocks to reorder them.

### 2. Section settings

* **General**
  * **Behavior:** When the dock is shown: On scroll up / Always.
    * **On scroll up:** The dock slides in when shoppers scroll up and hides when they scroll down.
    * **Always:** The dock stays on screen once shoppers scroll past the header.
  * **Color scheme:** None / Accent 1 / Accent 2 / Background 1 / Background 2 / Inverse. **None** keeps the page's default colors.
* **Section padding**
  * **Top padding** and **Bottom padding:** 0–40px.

### 3. Block settings

You can add up to 6 blocks in total. **Cart**, **Account**, **Search** and **Menu** can each be added once.

**Cart block**

* **Cart style:** The icon: Cart / Bag.

It shows the number of items in the cart. It opens the cart drawer when **Cart type** is set to **Drawer** in [Cart theme settings](/articles/theme-settings/inspiredtheme-settings-intro/cart.md); otherwise it goes to the cart page.

**Account block**

No settings. It shows **Log in** for guests and **Account** for signed-in customers, and links to the matching page.

**Search block**

No settings. It opens the [Search modal](/articles/sections/theme-sections/search-modal.md).

**Menu block**

No settings. It opens the mobile menu from your [Header](/articles/header/header.md).

**Link block**

* **Icon:** Choose from 31 icons, such as Store, Heart, Price tag or Truck.
* **Label:** The text below the icon.
* **Link:** The page, collection, product or URL it opens.

### 4. Tips

* Four or five items fit best on small phones. Keep labels to one short word.
* Use a **Link** block with the Store icon and your home page as the first item, so shoppers can always get back to the start.
* If you also use the [Live reel](/articles/sections/theme-sections/live-reel.md), it sits just above the dock so the two don't overlap.