Step 2: Publish

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.

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.

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.

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

#Details-menu-drawer-container

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}

It’s not something you need to fix right away, but in the long run it’s important for the slide menu experience created by Navi+. Before Navi+ fully replaces the old slide menu, the theme’s original menu is still active. For a brief moment—about half a second—if a user loads the menu and quickly taps the hamburger button (a rare case, but still possible), the old theme menu may appear and cause a visual glitch.

Navi+ provides a simple solution to optimize the user experience and speed as follows steps

Why do you need to do this? Isn’t Navi+ already fast?

Navi+ is very fast. It is fully deployed on a leading CDN with very low latency (around 100ms) and can serve millions of customers without slowing down.

However, Navi+ still runs within the Shopify ecosystem. Shopify has its own loading rules:

Shopify prioritizes loading its own resources first.
Then Shopify loads the theme content.
Finally, Shopify loads app content, but not in any specific order.

This means if you are using multiple apps, Navi+ may sometimes be loaded later than expected. That’s why it can feel slower in certain cases.

What is my solution?

Currently, Navi+ has high priority when loading on Shopify websites. However, there is still a certain delay. We will address these issues one by one here:

Very simple: just enter the CSS selector you use for the Slide Menu into the embed section of the Navi+ app (see image below).