The Mobile dock provides a fixed navigation bar at the bottom of the storefront on mobile devices. It gives customers quick access to important areas such as the homepage, menu, search, account, cart, or a custom link.
The Mobile dock is designed specifically for smaller screens and is not displayed on desktop devices.
Section overview
The Mobile dock supports up to 6 blocks.
Available block types include:
- Home
- Menu
- Link
- Search
- Account
- Cart
Each block can include:
- A title
- A built-in icon
- An optional custom SVG icon
The Link block also includes a custom link and an option to open the destination in a new tab.
STEPS:
Open the Mobile dock settings
The Mobile dock is included in Maison's Overlay group.
- Open the Maison theme editor.
- Expand the Overlay group.
- Select Mobile dock.
- Review the blocks currently added to the dock.
- Reorder, add, remove, or configure the blocks as needed.
- Click Save when finished.
Add and arrange Mobile dock blocks
The Mobile dock can contain up to 6 blocks.
To add a navigation item:
- Open the Mobile dock settings.
- Click Add block.
- Select the block type you want to add.
- Configure the block settings.
- Drag the block to the desired position.
- Click Save.
The order of the blocks in the theme editor determines their order in the Mobile dock.
Maison supports the following block types:
| Block | Description |
|---|---|
| Home | Links customers to the storefront homepage. |
| Menu | Opens the mobile Menu Drawer. |
| Link | Creates a custom navigation item that can point to another page or destination. |
| Search | Gives customers quick access to storefront search. |
| Account | Opens the customer account area. Customers who are not logged in are directed to the login page. |
| Cart | Gives customers quick access to the cart. |
Configure the Home block
The Home block provides a shortcut back to the storefront homepage.
Configure the available settings:
| Setting | Description |
|---|---|
| Custom SVG icon | Replaces the default Home icon with a custom SVG icon. |
| Title | Sets the text displayed below the icon. The default title is Home. |
If no custom SVG icon is added, Maison uses the built-in Home icon.
Configure the Menu block
The Menu block gives customers quick access to the mobile Menu Drawer.
Configure the available settings:
| Setting | Description |
|---|---|
| Custom SVG icon | Replaces the default Menu icon with a custom SVG icon. |
| Title | Sets the text displayed below the icon. The default title is Menu. |
When customers tap this item, the mobile Menu Drawer opens.
Configure the Search block
The Search block gives customers direct access to storefront search.
Configure the available settings:
| Setting | Description |
|---|---|
| Custom SVG icon | Replaces the default Search icon with a custom SVG icon. |
| Title | Sets the text displayed below the icon. The default title is Search. |
The search experience follows the search behavior configured in Maison. Depending on your theme settings, customers can use the Search Drawer or the search page.
Configure the Account block
The Account block gives customers quick access to their customer account.
Configure the available settings:
| Setting | Description |
|---|---|
| Custom SVG icon | Replaces the default Account icon with a custom SVG icon. |
| Title | Sets the text displayed below the icon. The default title is Account. |
When customers tap the Account item:
- Logged-in customers are taken to their account.
- Customers who are not logged in are taken to the login page.
Configure the Cart block
The Cart block gives customers quick access to their shopping cart.
Configure the available settings:
| Setting | Description |
|---|---|
| Custom SVG icon | Replaces the default Cart icon with a custom SVG icon. |
| Title | Sets the text displayed below the icon. The default title is Cart. |
The cart experience follows the cart behavior configured in Maison. Depending on your theme settings, customers can use the Cart Drawer or the cart page.
Add a custom Link block
Use the Link block when you want to add another destination to the Mobile dock.
For example, you can use it to link to a collection, page, promotion, or another important storefront destination.
Configure the block settings:
| Setting | Description |
|---|---|
| Custom SVG icon | Replaces the default Link icon with a custom SVG icon. |
| Title | Sets the text displayed below the icon. |
| Link | Selects the destination for the navigation item. |
| Open in new tab | Opens the destination in a new browser tab when enabled. |
If no custom SVG icon is added, Maison uses the built-in icon for the Link block.
You can add more than one Link block as long as the Mobile dock does not exceed the maximum of 6 blocks.
Use a custom SVG icon
Each Mobile dock block includes a Custom SVG icon setting.
Use this setting when you want to replace Maison's built-in icon with your own SVG icon.
If the Custom SVG icon field is left empty, Maison automatically uses the default icon for that block.
Reorder or remove Mobile dock items
You can change the navigation order at any time.
- Open the Mobile dock settings.
- Drag blocks into the desired order.
- Remove any block you no longer want to display.
- Make sure the dock contains no more than 6 blocks.
- Click Save.
Changes apply to the Mobile dock across the storefront.
Mobile dock behavior
The Mobile dock:
- Appears at the bottom of the storefront.
- Is fixed in position while customers browse.
- Is only visible on mobile devices.
- Supports up to 6 navigation items.
- Uses the block order configured in the theme editor.
- Allows built-in icons to be replaced with custom SVG icons.
Troubleshooting
If the Mobile dock does not display correctly, check the following:
- Make sure Mobile dock is enabled in the Overlay group.
- Use the mobile preview, as the Mobile dock is not displayed on desktop devices.
- Make sure the section contains at least one block.
- Confirm that the dock does not contain more than 6 blocks.
- Check that each custom Link block has a valid destination.
- If a custom icon does not display, remove it temporarily to confirm that the built-in icon appears correctly.
- If Menu does not open as expected, check your mobile Menu Drawer configuration.
- If Search does not behave as expected, check the theme's search behavior settings.
- If Cart does not behave as expected, check the theme's cart behavior settings.
- Save your changes and refresh the mobile storefront after updating the dock.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Set up the "Show on model" feature
How to Set Up Language and Country/Region Selectors in Maison