/
Editing the mobile menu

Editing the mobile menu

 

Introduction

The mobile menu within UltraCart StoreFront is fully editable using the Visual Builder tool. By default, the mobile menu is a copy of the Header Menu configured under StoreFront Menus. Changes made to the Header Menu at the menu configuration level are initially reflected in the mobile menu when the theme is first installed or reset. However, once customizations are made directly within Visual Builder, these edits are independent of the original Header Menu configuration.

Prerequisites

Prerequisite: You must be logged into your UltraCart StoreFront backend and have access to the Visual Builder tool.

Step-by-step Instructions

1. Open Visual Builder

  1. Navigate to:

Main Menu → StoreFronts → (Select StoreFront Host) → Browse Your Store

  1. Click the Edit button to launch Visual Builder.

    image-20250625-133922.png
    Open the Visual Builder Editor.

Note: The Visual Builder menu is only available to users actively logged into the UltraCart backend in the same browser session.

2. Open the Hierarchy Panel

image-20250625-134631.png
Clicking the ‘hierarchy’ button in Visual Builder menu.

  1. Inside Visual Builder, locate the Hierarchy option in the right-hand menu bar.

  2. Click Hierarchy to open the hierarchical view of your StoreFront layout.

3. Locate the Mobile Menu Element

image-20250625-135118.png
Locating the ‘Mobile Menu’ side panel.

  1. In the Hierarchy Panel, locate and select the Mobile Menu side panel element.

  2. Click the greater-than symbol (>) to drill down to reveal the nested menu structure.

Tip: You can click the lightbulb icon next to the Mobile Menu element to quickly highlight and display its layout within the editor.

4. Edit the Mobile Menu Content

  1. In the hierarchy, locate the Menu element within the Mobile Menu.

  2. Click the Settings button for the Menu element.

    image-20250625-135554.png
    Clicking the Settings button for the menu element in hierarchy panel.

  3. In the settings panel, click the Edit button next to Menu Content.

    image-20250625-135734.png
    Click the ‘Edit' button for 'Menu Content.’

5. Modify Menu Items

Within the Menu Content editor:

image-20250625-140148.png
View of the Menu Editor in the Visual Builder.

  • Click the pencil icon to edit an existing menu item.

  • Click the plus (+) icon to add a new sub-menu item.

  • Click the trashcan icon to delete a menu item.

Note: Changes made here apply to the mobile menu and Header Menu, since the mobile menu is a copy of the header menu. If you need the mobile menu and the header menu to differ, you’ll need to create a new menu.

6. Save Your Changes

  1. After completing your edits, click Save within the Menu Content editor.

  2. Finally, click the highlighted Save button in Visual Builder to apply your changes to the live storefront.

Conclusion

The Visual Builder makes it easy to customize your mobile menu to fit your StoreFront's design and navigation needs.