Add Navi+ menus to your website directly

Sometimes, you might not be able to directly insert the Navi+ menu into your Shopify website. Some possible reasons are as follows:

• Your theme does not support Online Store 2.0. It might be that your theme was downloaded from unofficial sources or is no longer supported.
• Your theme has technical issues due to extensive code changes from various developers.
• You are using some Page Builder apps, which might take over Shopify’s sections management, making it difficult for you to proceed.

Solution from Navi+

Insert section menus (e.g., Mega menu) into detailed pages (such as Home, Product Detail, etc.).

You can directly insert the code into the theme file following the instructions below.

<!-- Navi+ insert embed code ----->
    <div class="naviMegaMenu">
    <script type="application/javascript" src="https://naviplus.b-cdn.net/naviplus/golive/uigen-v2.2.js" shop="our-domain.myshopify.com" embed_id="SF-123456789" not_sticky = "true" embed_title = "" embed_is_full = "true" embed_margin = "0 0 0 0" async></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.min.css">

    
    <div class="naviman_app section_naviman_app" id="SF-0175980077-container"></div>
    <script type="text/javascript">
    if (typeof isNaviproLoaded == 'undefined') {
        var insertNaviCode = '<div class="naviman_app" id="naviman_app"></div>';
        document.body.insertAdjacentHTML('afterbegin', insertNaviCode);
        console.log("Navi+ on Section is loaded!");
    }
    var isNaviproLoaded = true;
  </script>
  </div>
<!-- Navi+ insert embed code ----->

Insert sticky menus (Bottom Bar, FAB, Slide menus, etc.) into common components (such as header, footer, etc.)

You can directly insert the code into the theme file following the instructions below.

<!-- Navi+ insert embed code ----->
    <div class="naviMegaMenu">
    <script type="application/javascript" src="https://naviplus.b-cdn.net/naviplus/golive/uigen-v2.2.js" shop="your-domain.myshopify.com" embed_id="SF-123456789" defer></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.min.css">

    <script type="text/javascript">
    if (typeof isNaviproLoaded == 'undefined') {
        var insertNaviCode = '<div class="naviman_app" id="naviman_app"></div>';
        document.body.insertAdjacentHTML('afterbegin', insertNaviCode);
        console.log("Navi+ on All pages is loaded!");
    }
    var isNaviproLoaded = true;
  </script>
  </div>
<!-- Navi+ insert embed code ----->