StoreFront Menus

Overview

A StoreFront menu is a Menu element placed in Visual Builder. The Header Menu that ships with your theme is the most common one, but you can add as many additional menus as your StoreFront needs. Once a menu exists, you can edit its items either directly in Visual Builder or from the StoreFronts admin Menus page, whichever is faster for the change you're making.

Add a menu with the Menu element

1. Open your StoreFront in the Visual Editor.
2. Click Add Element at the spot where the new menu should appear.
3. Search for "menu" and select the Menu element to insert it.

A new Menu element starts out as a duplicate of the Header Menu, including its name. Open its settings panel and rename it to something that reflects its purpose (for example, "Footer Menu") so you don't confuse it with the header menu later.

tip

Rename the menu before you populate it. The StoreFronts admin Menus page lists menus by name, and a page full of menus still called "Header Menu" is hard to tell apart.

Edit menu items directly in Visual Builder

1. Select the Menu element and open its settings panel.
2. Click Edit next to Menu Content to open the menu item editor.
3. Use the pencil icon to edit an item, the plus icon to add a new item or submenu item, and the trashcan icon to delete an item.
4. Click Save in the menu editor, then click Save again in Visual Builder to publish the change to your live StoreFront.

Edit menu items from the StoreFronts admin Menus page

You can make the same edits from the UltraCart backend instead of Visual Builder. This is useful when you're not already in the editor, or when you want to update a menu without opening a live preview of the StoreFront.

1. Go to Main Menu → StoreFronts → (select your StoreFront host) → Menus.
2. Find the menu you want to change in the list.
3. Add, reorder, or delete choices, then save.

The rest of this section covers each of those edits in turn. All of them start from the Menus page above.

Clicking Menus opens your StoreFront's menus to the right of the sidebar.

Add a link to a menu

Add a custom link, such as an external blog, to an existing menu. This example adds a "Blog" choice to the header menu and positions it between Sale and About.

Here is the header menu before the change.

1. Click Menus in the StoreFronts admin sidebar.

2. Scroll to the menu you want to change, for example the header menu, and click the add button.

   

3. A new entry appears at the bottom of the menu. Give it a Title, choose a Link Type of Custom, and enter the Custom URL.

   

4. Click the new entry's title and drag it to where you want it in the menu.

   

The new item now appears on your StoreFront.

Add your blog to a menu

Linking to a blog you host on your StoreFront uses a Link Type of Page rather than a custom URL, because the blog is already a page in your StoreFront.

1. Click Menus in the StoreFronts admin sidebar.
2. Find the menu you want to edit, and click the add icon at the top left of the menu.
3. Choose a Link Type of Page.
4. Select your blog from the Page dropdown list.
5. Click Save Menu Item.

Create a submenu

There are two ways to create a submenu: turn an existing menu choice into a child of another, or add a new child from scratch.

From an existing menu choice, click the choice you want to demote and drag it on top of the choice it should sit under. For example, dragging Wholesale Signup onto Account Login makes it a submenu choice of Account Login.

From a new menu choice, scroll to the menu you want to extend, then click the icon showing a plus symbol and a series of lines. Hovering over it shows "add child".

Enter a title for the new submenu item. Link Type and Page are pre-selected based on the choice you created it under, so you usually only need to set the title.

After saving the title, the new submenu item appears in the menu.

Watch a video of creating a new submenu

Reorder menu items

Click a menu choice and drag it to the position you want it to appear in. For example, if you have many wholesale customers, you might move Wholesale Signup to the top of the Account menu.

Delete a menu item

Find the choice you want to remove and click the red trashcan icon along the right side of it. This example removes a Matcha submenu choice from the Teas choice on the header menu.

The menu after deleting Matcha:

Watch a video of deleting a menu item

Editing the mobile menu

The mobile menu starts out as a copy of the Header Menu. Edits you make to the Header Menu through either method above carry over to the mobile menu automatically, until you customize the mobile menu directly in Visual Builder. Once you do that, the two menus are independent and further Header Menu changes won't appear on mobile.

The mobile menu is edited in Visual Builder rather than from the admin Menus page, because it is a separate element inside your theme's layout.

1. Go to Main Menu → StoreFronts → (select your StoreFront host) → Browse Your Store, then click Edit to launch Visual Builder.

   

2. Click Hierarchy in the right-hand menu bar to open the hierarchical view of your StoreFront layout.

   

3. Locate and select the Mobile Menu side panel element, then click the greater-than symbol (>) to reveal the nested menu structure.

   

4. Select the Menu element inside the Mobile Menu and click its Settings button.

   

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

   

6. Use the pencil icon to edit an item, the plus icon to add a submenu item, and the trashcan icon to delete an item.

   

7. Click Save in the Menu Content editor, then click Save in Visual Builder to apply the change to your live StoreFront.

note

The Visual Builder menu bar is only available if you are logged into the UltraCart backend in the same browser session.

Mega Menu

Mega Menu is a separate Visual Builder element from the standard Menu element covered on this page, built for menus that need a wider dropdown with more structure than a simple list of links and submenus. See Mega Menu for how to add one and build out its content.

Locating a menu in a template or component

Every template and Visual Builder component that renders a menu carries a directive comment recording which menu it uses, in the form ## uc:menu-used="<menu name>". Search your StoreFront's files for that directive when you need to find everywhere a menu appears, for example before you delete a menu or change one that several pages might depend on.

1. Go to Main Menu → StoreFronts → (select your StoreFront host) → File Manager.
2. Click the search icon in the File Manager toolbar.

3. In the File Contains field, enter the directive with the menu's name, for example ## uc:menu-used="footer - Connect".
4. Click Search.

The results list every template and component, across all of your StoreFront's themes, that uses the menu.

Only the rows highlighted green belong to the theme currently selected for your StoreFront. The other rows are inactive themes or unused copies and don't affect what your visitors see.

warning

If a result opens with a banner reading "THIS FILE IS COMPILED. DO NOT EDIT IT DIRECTLY. YOUR CHANGES WILL BE LOST!", it's a component Visual Builder generates automatically. Don't edit it in File Manager. Instead, open Visual Builder, find the component on any page where it's used, and edit or remove the menu there. Visual Builder overwrites the compiled file the next time it republishes the page, so direct edits don't stick.

Frequently asked questions

A menu link goes to my events page, but the rendered menu jumps straight to one event. Why?

Storefront menus optimize a link that points at a page with only one item under it: instead of loading that page, the menu sends the visitor straight to the single item. If you don't want that behavior for a specific menu link, email support@ultracart.com with the details and support can turn off the redirect for that link.