Step 2: Publish

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: Turn on toggle "Publish menu (visible only when opened by the user)".

Step 3: Select display method

Method 1: Open this menu from another Navi+ menu item using the syntax open:NaviMenu

This method allows you to open a slide menu when the user clicks or taps a menu item from another Navi+ menu (for example: on a tab bar, a FAB in the bottom corner of the screen, or a mega menu). Main purposes of this method:

Purpose 1: Improved visibility and user experience by showing the full site map in the slide menu while keeping it easy to access.

The slide menu is ideal for displaying your full site map thanks to its large space and flexible layout, making it perfect for showing the entire product catalog, links to key pages, blogs, support tools, etc. However, the slide menu is often less visible by default. To improve discoverability, you can use another Navi+ menu (such as a tab bar) to present your most important and recognizable links, and place a highlighted menu item that triggers the slide menu. This ensures better visibility and user engagement for the slide menu.

Purpose 2: Unlimited menu depth with a large, flexible menu structure (Only Navi+)

Instead of showing a popup with limited space when a menu item is clicked, you can open another slide menu with three levels and multiple ways to present information. This can be repeated for other menu items—or even for the same slide menu—allowing you to create virtually unlimited depth for your Navi+ menus.

Method 2: When a UI element (defined by a CSS selector such as #id_of_element or .class_name) is clicked or tapped, this menu will be displayed.

This is arguably the best and most commonly used method with the Slide Menu. In this guide, we’ll focus on replacing the website’s default hamburger menu on mobile. You can also apply this method creatively by finding and using other CSS selectors to trigger the menu.

How to replace your website’s default hambuger menu with the Navi+ Slide Menu (Popular guide)?

On most Shopify websites, the default hamburger menu is generated from the desktop version via responsive design. As a result, it’s usually very simple, has shallow depth, and lacks support for icons, images, or advanced layouts. Replacing it with a Navi+ Slide Menu is a common and practical choice to take advantage of Navi+’s advanced features.

To do this, simply identify the CSS selector of your website’s hamburger menu icon and enter it into the textbox. We’ve already found the CSS selectors for some of the most popular themes for you, listed below.

  1. CSS selectors for some popular, free themes.. from Shopify as Dawn, Sense, Savor, Horizon..

#Details-menu-drawer-container

  1. Not in this list, don't worry

- You can chat with a Navi+ supporter for instant help—this only takes a few minutes to find the CSS selector.

- Or, you can follow the self-help guide in next topics (Right after this topic).
How to find the CSS selector on your website?

You can chat with a Navi+ supporter to get instant help instead of doing it yourself. However, (1) this will help you understand the core idea, and (2) if you want to do it on your own, follow the instructions below.

{md}https://help.shopifas.com/manual/internal/what-is/common/how-to-find-css-selector.md{endmd}

PreviousStep 1: Edit the menu treeNextMega Desktop

Last updated