Publishing on Shopify
Step 2: (Shopify) Publish the menu on your website.
I) METHOD 1: INSERT (BEFORE OR AFTER) THIS MENU AT A SPECIFIC LOCATION ON YOUR WEBSITE, OR REPLACE AN EXISTING MENU, USING A CSS SELECTOR. (RECOMMENDED)
I.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.
I.2. Understanding CSS Selector
A CSS Selector is a way to target a specific HTML element on your webpage. Navi+ uses it to know exactly where to place your menu — whether to insert it before or after an element, or to replace an existing one entirely.
To find the correct CSS Selector for your website, you can use:
- Debug Mode — Navi+’s built-in tool: hover over any element and instantly copy its selector
- Browser DevTools — Manual method using your browser’s inspector
How to find the CSS selector using Browser DevTools
You can chat with a Navi+ supporter to get instant help instead of doing it yourself. However, if you want to do it on your own, follow the screenshots below.
I.3. Three publishing options
Step 1: Click the Publish to website button.
Step 2: Turn on toggle “Publish menu by Insert/Replace method”.
Step 3: Enter your CSS Selector and choose one of the three publishing options below.
Option 1: Insert Before
Inserts the Navi+ menu immediately before the selected element.
Example: CSS Selector main → the menu appears above the page’s main content area.
Common CSS selectors for Shopify themes (Dawn, Sense, Savor, Horizon):
main— most Shopify themes#MainContent— Shopify Dawn theme
Not in this list? Chat with a Navi+ supporter, or use Debug Mode or Browser DevTools.
Option 2: Insert After (most common for desktop Mega Menu)
Inserts the Navi+ menu immediately after the selected element.
Example: CSS Selector header → the menu appears just below the header.
Common CSS selectors for Shopify themes (Dawn, Sense, Savor, Horizon):
header— most Shopify themes.header-wrapper— some themes.announcement-bar— places the menu just below an announcement bar
Not in this list? Chat with a Navi+ supporter, or use Debug Mode or Browser DevTools.
Option 3: Replace
Replaces the selected element entirely with the Navi+ menu. The original element is hidden and Navi+ takes its place.
Example: CSS Selector .header-menu → the theme’s default navigation is replaced by your Navi+ Mega Menu.
Common CSS selectors for Shopify themes (Dawn, Sense, Savor, Horizon):
.header-menu— Shopify Dawn theme.header__menu— some themes
Note: A brief flash of the original menu may appear while Navi+ loads. See I.5 below to prevent this.
Not in this list? Chat with a Navi+ supporter, or use Debug Mode or Browser DevTools.
I.4. Device-specific targeting
You can control whether the CSS Selector applies on mobile, desktop, or both by adding a suffix:
| Suffix | Applies to |
|---|---|
(M) |
Mobile only |
(D) |
Desktop only |
| (none) | Both mobile and desktop |
Examples: header(D) — desktop only · header(M) — mobile only · header — both platforms.
I.5. Important! Optimize Mega Menu speed and user experience (Replace mode)
When you replace one menu with another, Navi+ waits until the old menu is displayed and then instantly swaps it with the new one. Although this happens almost immediately, there is still a brief moment where the old menu appears, which may confuse users.
With this step, you can completely hide the old menu and show a loading effect instead. This makes the website feel faster and improves the user experience.
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:
Note:
- Add the suffix (M) if you want it to apply only on mobile.
- Add the suffix (D) if you want it to apply only on desktop.
- Leave no suffix if you want it to apply on both platforms.
II) METHOD 2: ADD THIS MENU AS A SECTION/BLOCK IN THE SHOPIFY THEME
This method inserts the menu by adding a Block/Section in your Shopify theme. It’s a traditional approach, so I won’t describe it in detail. With this method, you don’t even need to “Turn on Navi+ in App Embeds” as required in Step 1 of Method 1.
Copy Embed ID of this menu, then insert to block named “Navi+ on Section” on Theme Sections. You can add a title, set up full width, and adjust the margin for this section after adding it.
Guide to add this menu as a section/block in the Shopify theme
Below is a detailed guide on inserting a Navi+ menu as a section/block in your Shopify theme. This method allows you to add the menu in a standard, Shopify-supported way, though it is not as flexible as the other methods provided by Navi+.
This method applies to Mega Menus and Grid Menus. It DOES NOT apply to Tabbar, FAB, or Slide Menus.
