A Tab Bar and a Floating Button are the only two menu types that float above the page without you choosing a place to attach them. Just turn one on and the menu shows straight away.
Before you start
- You’ve finished creating a Tab Bar or a Floating Button.
- You’ve turned on the Navi+ app embed in your theme. If not, follow Turn on the Navi+ app embed in your theme. You only need to do this once for the whole store.
How to put the menu live
-
Open the menu in the Navi+ app, then click Publish.
1Build Menu2Design3Configure4Preview & Test5PublishOFF1MoreMenu itemsHome/AutoShopcollections/allAutoSearchsearchAutoWishlistpages/wishlistAutoCartcartAutoITEMMobileDesktopPreview only9:41•••yourshop.comSTORE -
In the Publish window, check that the app embed line says it’s turned on. Then click Turn on to change Status from OFF to ON.
PublishPut the menu on your storeNo code needed — a Tab Bar sticks to the bottom of the screen, there is no menu placement to pick.STATUS:OFFTurn on3STEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.2STEP 2Test this menuOpen the Test panel to preview this menu on your store. Open Test -
Clicking Turn on saves the ON status automatically, so you don’t need to click any other save button. Now open your store on a phone to see the menu.
9:41•••yourshop.comSTOREThe Tab Bar shows at the bottom of the phone screen
The Publish window also has an Open Test button to preview the menu on your store. To turn the menu off, click Turn off.
Choose the devices and pages where the menu shows
These two parts are optional. These settings are in the Configure step, not in the Publish window. Open the menu, go to the Configure step, find Display on mobile, Display on desktop and Display on pages, change what you need, then save.
Choose whether it shows on phones or computers
In the Configure step there are two boxes: Show menu on mobile and Show menu on desktop.
- By default the menu is on for phones only, and off for computers.
- If you want shoppers on computers to see the menu too, turn on Show menu on desktop.
You can set a separate position for each device. The option that hides the menu when the shopper scrolls down, Hide when scrolling down on Mobile screen, is also in the Configure step. Whether this box is on or off by default depends on the menu template you chose at the start.
Choose the pages that show the menu
The Display on pages section lets you choose the page groups where the menu shows: Home (Index), Products Detail, Product categories, Pages, Blogs and Others. By default the menu shows on all pages. If you need finer filtering by customer or market, read Choose which pages, devices and shoppers see the menu.
Fix a menu that doesn’t show as expected
The menu is on but doesn’t show
Check these in order, from the top:
- Is the app embed turned on? This is the most common cause.
- Has Status changed to ON?
- Which device are you opening the store on? By default, a Tab Bar only shows on phones.
- Is the page you’re viewing in a page group you turned on under Display on pages?
- Try reloading the page with Ctrl + Shift + R on Windows, or Cmd + Shift + R on Mac.
If you still don’t see the menu, read Menu not showing on your store.
The Tab Bar shows on computers too
Go to the Configure step, turn off Show menu on desktop, then save.
The menu overlaps the chat widget
The chat widget and the Tab Bar both sit at the bottom of the screen, so they can easily overlap. See how to adjust this in Menu overlaps the chat widget, cookie banner or header.
Other platforms
The steps above are for Shopify — the default way.
On Wix there’s no app embed step. When you install Navi+ from the Wix App Market, the app attaches itself to the site. Skip the app embed check; the other steps are the same as on Shopify.
Other websites (dash.naviplus.app) have no app embed. Instead, paste the Navi+ code snippet into the head of the website. On WordPress, activate the Naviplus Menu Builder plugin. On these platforms, instead of the Turn on button, the Publish window has a Publish this menu switch: turn it on, then save.