Mobile Toolbar Setup Guide
The Mobile Toolbar adds a fixed navigation bar at the bottom of the screen on mobile devices. It gives your customers quick access to key actions like shopping, contacting you, viewing their cart, and managing their account — all with one tap.
Quick Setup (3 Minutes)
Step 1: Find the Section
- In your Shopify admin, go to Online Store → Themes → Customize
- In the left sidebar, look for Mobile Toolbar under your global sections (it's available on every page)
- Click on it to open the settings
Step 2: Enable the Toolbar
- Check the Enable mobile toolbar box
- The toolbar will appear at the bottom of the preview on mobile
Step 3: Add Your Buttons
The toolbar comes with 5 default buttons: Shop, Contact, Cart, Account, and Search. You can remove any you don't need, rearrange them by dragging, or add Custom buttons.
Tip: The toolbar supports a maximum of 5 buttons total. Choose the ones that matter most to your customers.
Button Types
Shop
Links to your products. By default it goes to your "All Products" collection.
| Setting | What It Does |
|---|---|
| Label | The text shown below the icon (e.g., "Shop") |
| Custom URL | Set any URL you want — a specific collection, a landing page, etc. Overrides the collection setting |
| Collection | Pick a specific collection to link to |
Contact
Opens the Contact Panel (see the Contact Panel Setup Guide) or links to a URL.
| Setting | What It Does |
|---|---|
| Label | The text shown below the icon (e.g., "Contact") |
| Action | Choose between "Open contact panel" or "Go to URL" |
| URL | Only used when the action is set to "Go to URL" |
Note: When set to "Open contact panel," the contact info card slides up from the bottom of the screen above the toolbar. The side tab trigger is automatically hidden on mobile so there's no duplicate.
Cart
Opens the cart drawer or navigates to the cart page, depending on your theme's cart setting.
| Setting | What It Does |
|---|---|
| Label | The text shown below the icon (e.g., "Cart") |
The cart button automatically shows a badge with the current item count when items are in the cart.
Account
Opens your Shopify customer account modal. This uses the native Shopify account component, so login, registration, and order history all work out of the box.
| Setting | What It Does |
|---|---|
| Label | The text shown below the icon (e.g., "Account") |
Note: Customer accounts must be enabled in your Shopify settings for this button to appear.
Search
Opens the theme's search modal.
| Setting | What It Does |
|---|---|
| Label | The text shown below the icon (e.g., "Search") |
Custom Button
Add your own buttons with custom links. Great for linking to social media, a specific page, a booking tool, or anything else.
| Setting | What It Does |
|---|---|
| Label | The text shown below the icon |
| Link | The URL to navigate to |
| Icon class | A LineAwesome icon class (e.g., las la-star) |
| Icon image | Upload a custom icon image as a fallback |
| Open in new tab | Whether the link opens in a new browser tab |
Icon Overrides
Every button type (including the defaults) supports custom icons. For each button you can set:
- Icon class — A LineAwesome icon class. Browse the icon library and copy the class name (e.g.,
las la-store,las la-phone). - Icon image — Upload any image to use as the icon. This is a fallback if no icon class is set.
If neither is set, the button uses its built-in default icon.
Color Settings
| Setting | What It Does |
|---|---|
| Background | The toolbar's background color |
| Icon color | Color of all button icons |
| Label color | Color of the text labels below icons |
| Top border color | The thin border along the top edge |
| Badge background | The cart count badge background |
| Badge text | The cart count badge text color |
Other Settings
| Setting | What It Does |
|---|---|
| Show text labels | Toggle the text labels on/off. When off, only icons are shown for a more compact look |
Good to Know
- The toolbar is mobile only — it won't appear on desktop
- It is off by default so enabling it won't affect existing stores until you're ready
- The toolbar is fixed to the bottom of the screen and stays visible as customers scroll
- Page content automatically adjusts so nothing gets hidden behind the toolbar
- The toolbar works alongside other features like the Bulk Order sidebar — it appears above it