User guide

Welcome! You've successfully created a menu with Navi+. This menu will not appear on your website until you publish it in the final step of this guide.

This guide will stay with you throughout the menu editing process. You can turn it off anytime to focus on editing, then turn it back on by clicking the Help button in the bottom-right corner.

Step 1: Edit the menu tree

1.1. Understanding the Menu Tree

The menu tree is the most important part of any menu—it defines the structure.

Here’s an example of a menu tree:

Home  
Catalog 
- All Mountain  
   - Cruise Flex  
   - Balance Ride
- Freestyle  
   - Park Board  
   - Jib Board  
- Freeride  
Support  
More  

This is a 3-level menu tree. Level 1 includes Home, Catalog, Support and More. All-Mountain is a level 2 menu item, with two child items: Cruise Flex and Balance Ride.

You’ll spend most of your time building this menu tree for your website, helping customers find the content they’re looking for.

1.2. Basic Interactions with the Menu Tree

You can drag and drop menu items up and down or left and right to change their position and parent-child relationships in the menu tree.

When you hover over any menu item, you’ll see additional options: edit the item’s details, delete it from the menu tree, or copy and paste it elsewhere.

1.3. IMPORTANT! Delete the sample menu items and keep only the structure you want.

This is a common situation when creating a menu with Navi+. When you create a new menu, we include a full example with popular menu items to show layout ideas and let you copy/paste as needed. However, if you're new to Navi+ and using the Starter plan, you’ll see many red (i) warnings for features that are not available, such as uploading images or using advanced interactions.

If you like these advanced features, consider upgrading to a Business or Elite plan. But if you want to continue with the Starter plan, please find and delete the menu items with red (i) warnings.

1.4. Add menu items to the Menu Tree

To add a menu item, you have two options:

Option 1 (Not recommended if you're new to Navi+): Click “Add menu” to insert a blank menu item at the end of the menu tree. This method requires a good understanding of menu item settings, which we’ll cover below. It might feel overwhelming at first, so you can explore this later.

Option 2 (Recommended): We've already prepared many well-designed menu item templates for you. Simply copy and paste them into the right place. After finishing your menu tree, just delete the unused templates.

1.5. Learn the key properties of a menu item

Each menu item has many properties. Below are the most basic and important ones. You can explore the others later in the table below when needed.

• Menu Item Kind: A set of pre-made menu templates to help you quickly define your menu items.

• Media: A menu item can use an icon or image (available in Pro and Elite plans). If you upload an image, the icon will be ignored.

• Text: The name of the menu item. This helps you identify it in the menu tree and is shown as the main label.

• Link To: Not just for linking to a page inside or outside your website. You can also use it to open a chat box, scroll the page, trigger a JS function, or open another Navi+ menu.

• Description: A small line of text below the main text. You can use it flexibly—for example, to show a product price, sale info, or blog summary.

*Note: Depending on the use case, a menu item might not need Media (like a plain text link) or Text (like a visual image-only item). However, it’s recommended to set both to help identify menu items clearly in the menu tree.

{md}https://help.shopifas.com/manual/internal/what-is/bottombar/user-guide/other-properties-of-menu-item.md{endmd}

Step 2: Publish the menu on your website.

2.1. Turn on Navi+ on App Embeds

Step 1: Click Online Store, then click Themes. Tips: Right-click on Online Store and select “Open Link in New Tab” to save time.

Step 2: Select the theme where you want to publish the menu.

Click: Customize

• If your website is new and has no users yet, feel free to publish the menu without worry—you can easily turn it on or off at any time without affecting visitors.

• If your website already has regular traffic, be more careful. The best practice is to create a duplicate Theme and test Navi+ on that version first.

Step 3: Go to App embeds, find “Navi+ on All pages”, and turn it on.

Step 4: Don’t forget to click “Save” to apply the changes.

After these 4 steps, Navi+ has been installed on your website and is ready to display. However, the process is not yet complete. Go back to the Navi+ app tab to actually turn on Publish Menu.

2.2. Select display settings and publish the menu.

Step 1: Click the Publish to website button.

Step 2: Choose display settings then PUBLISH THE MENU.

{md}https://help.shopifas.com/manual/internal/what-is/bottombar/user-guide/faq-publish.md{endmd}

{md}https://help.shopifas.com/manual/internal/what-is/common/step-3-handle-issues-after-publishing-the-menu.md{endmd}

{md}https://help.shopifas.com/manual/internal/what-is/common/step-4-go-live-monitor-and-optimize.md{endmd}