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 mobile 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
On mobile, there's no Mega Menu to replace, so this method is usually not feasible. Use Insert Before or Insert After instead.
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(M) — mobile only · header(D) — desktop only · header — both platforms.
For mobile menus, using the (M) suffix ensures the menu only appears on mobile and does not affect desktop layout.
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.
