A round floating button in the corner of the screen, also called a FAB. Shoppers tap it and quick links fan out: chat, call, WhatsApp, email, back to top. One tidy spot instead of several buttons overlapping each other.
Before you start: Navi+ is installed and you have turned on Store Connector in your theme.
1Choose a menu type
In Navi+ click Add menu, then choose the Floating Button card.
2Two ways to start
Step-by-step wizard
Click Create from your website > Build it step by step. The Design your FAB button column: choose an icon or image, Curve, background color, icon color, Position (Left, Center, Right) and Bottom spacing. The List & tools column: choose existing links and switch on the contact buttons under Support and Share. Click Generate menu and you're done.
Build it yourself
Click Create from a template > Browse templates, then choose the Blank card to get an empty button. Add each sub-button with Add item, then set its link yourself. To start with a ready-made design, pick another template from the library.
3Fine-tune by hand
Whether you use the wizard or build by hand, you still fine-tune in Build Menu: each tool you switch on is its own item. Drag to reorder, and click an item to rename it or change its icon or link. In Design, the Main menu tab adjusts the round button and the Sub menu tab adjusts the list that fans out.
Limit: a Floating Button has up to 2 levels (the floating button and its sub-buttons). Enter the WhatsApp number with the full country code and without the + or the leading 0: a Vietnamese 0901 234 567 becomes 84901234567.
4Typical item patterns
Click + ITEM to open the Add item popup, then choose a pattern. These are the most common buttons on a Floating Button.
Contact buttons: one tap to reach the store
The most used group on a FAB. In the wizard, switch them on under Support: Shopify Inbox (opens the chat window and hides the store's built-in chat bubble to keep the corner tidy), Call, SMS, WhatsApp, Zalo, Messenger and Email. Each button takes one piece of information (a phone number, a Messenger name or an email address), and a tap opens the right app on the shopper's device.
To add: switch on the tool in the wizard, or in the Add item popup choose a contact pattern and enter the details. Link a menu item
Share: share the page
Under Share: the Facebook and X buttons let shoppers share the page they're viewing.
Open a Mobile Menu from the floating button
Make a button with only one item and set that item's link to Open another Navi+ Mobile menu. A tap slides the Mobile Menu drawer out, with no need for the theme's ☰ button.
Typed links: call, email, WhatsApp
Any item accepts a typed link: tel:+84901234567 to call, mailto:[email protected] to send an email, https://wa.me/84901234567 to open WhatsApp.
/pages/size-guide5Publish: turn the button on for your store
Open Publish and click Turn on. The Floating Button floats over every page, so you don't need to choose a placement in the theme. You only need Store Connector turned on.
Turn on and the button appears right away
Off leaves the corner empty; on shows the button in the chosen corner. Shoppers tap it and the sub-buttons fan out. Choose whether it shows on phones or desktops under Configure (Show menu on mobile, Show menu on desktop). The corner and spacing are set separately for each device, for example the right corner on phones but the left corner on desktop.
The floating button covers a chat widget
The simplest fix is to turn on Shopify Inbox inside the button, then turn off the separate chat widget. To keep both, move the Navi+ button to the opposite corner, or raise it with Bottom spacing to push it higher.
See how to fix itOther platforms
The steps above are for Shopify — the default way.
The same on every platform. On Wix, WordPress and other websites, Add menu opens the template library directly instead of the wizard above; choose Floating Button and a template, then edit the buttons in the menu item tree. Turn it on with the Publish this menu switch, then Save; there is no Turn on button.
The same on every platform. On Wix, WordPress and other websites, Add menu opens the template library directly instead of the wizard above; choose Floating Button and a template, then edit the buttons in the menu item tree. Turn it on with the Publish this menu switch, then Save; there is no Turn on button.