Step 2: Publish

Step 2: 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. Select display settings and publish the menu.

Step 1: Click the Publish to website button.

Step 2: Turn on toggle "Publish menu by Insert/Replace method".

Step 3: Select the correct CSS Selector and replace/insert method

In this guide, we’ll focus on 2 ways: inserting this menu below the header or replacing the default Mega Menu. You can also use this method creatively by finding and applying other CSS selectors to trigger the menu.

How to insert this menu below the header of website?

To do this, simply identify the CSS selector of your website’s header 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..

header

  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 replace the default Mega Menu?

On mobile, there’s no Mega Menu to replace, so this method is usually not feasible

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}

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

{md}https://help.shopifas.com/manual/internal/what-is/common/how-to-add-this-menu-as-a-section-block-in-the-shopify-theme.md{endmd}

PreviousStep 1: Edit the menu treeNextGrid

Last updated