1. What is Mobile dock?
The Mobile dock is a navigation bar fixed to the bottom of the screen on mobile and tablet. It keeps the most-used shortcuts - menu, search, cart, account, product comparison, and more - within thumb's reach while customers browse.
2. Section Components
| Section | Mobile dock | A fixed navigation bar at the bottom of the screen on mobile and tablet, with up to 5 shortcuts. | |
|---|---|---|---|
| Available blocks |
1st-level available blocks (up to 5 per dock) |
Home | Links to your homepage. |
| Menu | Opens your store menu in a popup. | ||
| Shop | Links to a page of your choice (default: all collections). | ||
| Search | Opens the search. | ||
| Cart | Opens the cart and shows the number of items in it. | ||
| Account | Opens the customer account options. | ||
| Comparison | Opens the Product comparison and shows how many products are in the list. | ||
| Wholesale | Links to your wholesale page (e.g. a Bulk order page). | ||
| Mobile dock item | A custom shortcut - pick any icon, label, and link. | ||
3. Location & Setup
To add the Mobile dock:
- Go to "Online Store" > "Themes" > "Customize".
- In the left sidebar, open the Overlay group.
- Click "Add section" and choose Mobile dock.
4. Highlight Features
- Up to 5 shortcuts from 9 block types, in any order.
- Built-in badges for cart items and products in the comparison list.
- Custom icons - built-in, from the theme icon list, or your own image.
- Full-width, padded, or custom-width layouts with adjustable bottom spacing.
- Works together with the sticky header, Product comparison, and other floating elements.
5. Common Use Cases
🤔 How to add and set up the Mobile dock?
STEP 1: Add the section
In the Theme Editor, open the Overlay group, click "Add section", and choose Mobile dock. It comes with 5 blocks: Home, Menu, Search, Cart, and Account.
STEP 2: Choose your shortcuts
- Remove any block you don't need, and click "Add block" to add others (e.g. Comparison or Shop). The dock holds up to 5 blocks.
- Drag blocks to change their order - the dock shows them left to right in the same order.
STEP 3: Choose how labels show
Click on the Mobile dock section and set Show label to Always (default), Only show when selected, or None (icons only).
STEP 4:
Click "Save" when done. Switch the editor preview to mobile to see the dock.
⚠️ Note: The Mobile dock only shows on mobile and tablet - it never appears on desktop.
🤔 How to change a block's icon or label?
Click on any block in the Mobile dock section, then:
-
Icon style = Icon: pick one of the built-in icons from Icon, or choose Use another icon and enter an icon name from this list (e.g.
badminton). - Icon style = Image: upload your own icon in Custom icon image.
- Change the text under the icon in Label.
Click "Save" when done.
🤔 How to add custom shortcuts to the dock?
Three blocks let you link to any page you choose:
- Shop - goes to all collections by default; change the Link to any collection or page.
- Wholesale - add a Link to your wholesale page, e.g. a page using the Bulk order section.
- Mobile dock item - a fully custom shortcut: choose an icon (including trust and shipping icons such as Free shipping or Live chat), a Label, and a Link.
Add the block with "Add block", fill in the Link and Label, then click "Save".
🤔 How does the Mobile dock work with other features?
| Feature | What happens |
| Sticky header | The sticky header and the dock never show at the same time while scrolling - the dock shows when customers scroll down, the header when they scroll up. See the Header guide. |
| Product comparison | The Comparison block only shows when the Product comparison section is added, and is disabled while the list is empty. Once it's in the dock, the floating compare button is hidden on mobile and tablet. |
| Catalog mode | The Cart block is hidden when Theme settings > Cart > Catalog mode > Hide cart is turned on. |
| Scroll to top | The Scroll to top button is hidden on mobile and tablet while the dock is added. |
| Sticky add to cart, Withdrawal request, popups | These move up automatically so they sit above the dock instead of behind it. |
🤔 What other customization options can you give your Mobile dock?
| For the whole Mobile dock section: | |
| ✨ Make the dock float above the screen edge | Set Section width to Full width padded or Custom, then adjust Bottom spacing (0-100px). |
| ✨ Make the dock narrower | Set Section width to Custom and adjust Mobile width and Tablet width (40-100%). |
| ✨ Remove the border | Turn off Show border. |
| ✨ Change the color scheme | Choose the Color scheme for light and dark mode. |
6. Change Logs
Version 2.2.0 - October 2026
- New – Mobile dock: A bottom navigation bar for mobile and tablet with up to 5 shortcuts - Home, Menu, Shop, Search, Cart, Account, Comparison, Wholesale, or a custom Mobile dock item.
7. Support Information
Need help? Contact our support team at Omni Themes Support
