> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/overlay-group/mobile-dock.md).

# Mobile dock

A fixed bar pinned to the bottom of the screen on mobile. It gives shoppers one-tap access to key destinations like home, menu, search, cart, and account.

Add up to **6 blocks**. Each block shows an icon with a label, and the blocks are spaced evenly across the bar.

{% hint style="info" %}
Each block type can be added only once. After you add Home, Menu, Search, Shop, Cart, Account, or Custom link, that block leaves the picker — so the dock cannot hold two of the same type.
{% endhint %}

![Mobile dock overview](/files/pMyvhpxkDBstmtHQAHgU)

***

## Style

### Icon

| Setting                | Description                                 |
| ---------------------- | ------------------------------------------- |
| Icon size              | Sets the size of all icons in the dock.     |
| Icon and label spacing | Sets the gap between an icon and its label. |

### Typography

Applies to every block label in the dock.

| Setting | Description                   |
| ------- | ----------------------------- |
| Font    | Font used for the label text. |
| Size    | Size of the label text.       |
| Color   | Color of the label text.      |

### Color

| Setting      | Description                                         |
| ------------ | --------------------------------------------------- |
| Color scheme | Background, text, and icon colors for the dock bar. |

### Padding

| Setting | Description                            |
| ------- | -------------------------------------- |
| Top     | Space above the icons, inside the bar. |
| Bottom  | Space below the icons, inside the bar. |

***

## Available Blocks

### Home

Links to the store home page.

| Setting | Description                |
| ------- | -------------------------- |
| Label   | Text shown below the icon. |

***

### Menu

Opens the mobile menu drawer.

| Setting | Description                |
| ------- | -------------------------- |
| Label   | Text shown below the icon. |

***

### Search

Opens the search drawer.

| Setting | Description                |
| ------- | -------------------------- |
| Label   | Text shown below the icon. |

***

### Shop

Links to a collection or any URL you set.

| Setting | Description                     |
| ------- | ------------------------------- |
| Label   | Text shown below the icon.      |
| Link    | Where the block sends shoppers. |

***

### Cart

Opens the cart drawer and shows a live item-count badge.

| Setting    | Description                           |
| ---------- | ------------------------------------- |
| Label      | Text shown below the icon.            |
| Badge type | Visual style of the item-count badge. |

{% tabs %}
{% tab title="Primary" %}
Bold, high-contrast badge.
{% endtab %}

{% tab title="Secondary" %}
Softer secondary tone.
{% endtab %}

{% tab title="Subtle" %}
Muted, low-key badge.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
The cart icon shape (bag, basket, or cart) follows [**Theme Settings → Cart**](/helix/theme-settings/cart.md) and is not set per block.
{% endhint %}

***

### Account

Opens the account panel as a bottom sheet — sign-in for guests, or the customer's account and menu once they are signed in. Signed in, the icon becomes the customer's avatar.

| Setting | Description                |
| ------- | -------------------------- |
| Label   | Text shown below the icon. |

{% hint style="info" %}
The menu inside the panel is set in [**Theme Settings → Customer account**](/helix/theme-settings/customer-account.md). The block only shows when customer accounts are turned on in **Shopify admin → Settings → Customer accounts**.
{% endhint %}

***

### Custom Link

A freeform slot with your own icon and destination.

| Setting              | Description                                                            |
| -------------------- | ---------------------------------------------------------------------- |
| Source               | Whether the icon comes from the built-in library or an uploaded image. |
| Icon                 | Pick an icon from the library (shown when Source is Library).          |
| Custom icon          | Upload an image to use as the icon (shown when Source is Custom).      |
| Label                | Text shown below the icon.                                             |
| Link                 | Where the block sends shoppers. Set this, or the block links nowhere.  |
| Open link in new tab | Opens the link in a new browser tab.                                   |