1. What is Mobile dock?
Mobile dock section showcases a fixed navigation bar at the bottom of the mobile screen, allowing customers to quickly access homepage, menu, or cart…
This feature enhances mobile browsing convenience and ensures key actions remain easily accessible no matter where users are on the page.
2. Section Components
| Section |
Mobile dock |
Display a navigation bar at the bottom of the mobile screen. |
|---|---|---|
| Available blocks | Home | Used to direct customers to the homepage. |
| Menu | Used to direct customers to the store’s navigation menu. | |
| Search |
Used to allow customers to search products instantly. |
|
|
Account |
Used to provide access to the customer account page. |
|
| Cart | Used to direct customers to the cart page. | |
| Link | Used to direct customers to a custom link. |
3. Location & Setup
To add and set up the Mobile dock section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Navigate to Overlay group.
- Decide where you want to place the new section.
- Click "Add section".
- Select "Mobile dock".
4. Highlight Features
- Customizable navigation blocks: Add up to 6 blocks, including Home, Menu, Search, Account, Cart, and custom Link options for flexible navigation design.
- Icon flexibility: Choose icons from the theme’s built-in list, insert SVG code, or upload custom images for a personalized look.
-
Adaptive layout & styling: Easily adjust icon position, icon size, and section colors to match your store’s branding.
5. Common Use Cases
🤔 How to set up Mobile dock?
If you want to set up the sticky Mobile dock but don’t know how to start. Here’s quick steps to begin:
STEP 1: Add the section
In the Overlay group, add Mobile dock section.
STEP 2: Set up the blocks for navigation
Mobile dock section allows you to add up to 6 blocks, and only Link blocks can be added more than once.
Click on the blocks to open their settings panel. The settings of the blocks are similar:
- Choose an existing icon from the Icon dropdown list, or if you want to use a different icon from the list, there are 3 options:
|
Options |
How to set up? |
|
Use theme icon list |
In the Icon drop-down list, choose Use another icon, then copy the icon name from this theme icon list and paste it into the Use another icon field. |
|
Insert SVG code |
In the Icon drop-down list, choose Use another icon, then paste the SVG code of your go-to icon into the Custom icon (SVG code) field. |
|
Use custom image as icon |
Upload Custom icon image. |
- Enter the title you want to appear under the icon.
- (For Link block only) Add the URL to navigate customers.
STEP 3: Click "Save" to apply changes.
Note: When enable Mobile dock, sticky header is not supported on mobile devices.
🤔 How to customize Mobile dock’s look?
To adjust the section’s look. Here’s how:
STEP 1: Open the settings
Click on the Mobile dock section to open its settings panel.
STEP 2: Customize icon display
- Choose Icon position: Centered or Spread evenly.
- Adjust Icon size.
STEP 3: Customize color
At Colors settings group, choose color for section elements such as background, text, and divider.
STEP 4: Customize the section layout
- (Optional) Toggle “Show section divider” ON.
- Adjust section top/bottom padding.
STEP 5: Click "Save" to apply changes.
6. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
