This article is a reference for the lower half of the Floating button window: the two panels Mobile and Desktop. Each panel has a Display switch, a position grid, a Margin (px) field and a Scroll effects section. The look of the button (icon, text, color, image) is covered in Mobile Menu open button.
The floating button only exists for Mobile Menu. To get there:
- Open the Mobile Menu and click the Publish step on the left step bar. The Publish panel slides in from the right.
- Under Where can shoppers open this menu?, click the Floating button card, then switch on Show a floating button on this site.
- Click Customize floating button. The Floating button window opens, with the Mobile and Desktop panels at the bottom.
Every change shows right away in the preview. When you’re done, click Done and save. The menu needs to be ON before the button appears on your store.
Each panel only applies to its own screen type. Navi+ treats screens 768 px wide or narrower as “phones” and wider screens as “computers”. When a shopper rotates the device or resizes the browser across this line, the button switches to the position and margin of the other panel.
For all 10 fields below, the plan required is: none, every plan can use them. All the fields apply to Mobile Menu, not split by level or item type.
Show or hide the button on each device
Display (Mobile)
The Display switch is at the top of the Mobile panel. Turn it off and the floating button no longer shows on phones. This is the quickest way to use the button on computers only.
- Default for a new menu: on.
- When off: the position, margin and scroll effect fields of the Mobile panel collapse, but the values you chose are kept. Turn it back on and everything returns as before. The scroll effects on phones also stop running.
- Only shows when: the Show a floating button on this site switch is on.
What shoppers see: when on, phones show the floating button. When off, they don’t. Shoppers can still open the menu with the other ways you chose in the Publish panel (the ≡ icon next to the logo, the theme’s ☰ button…).
Display (Desktop)
The Display switch at the top of the Desktop panel works exactly like the phone one, but for computers.
- Default for a new menu: on.
- When off: the Desktop panel collapses, keeps its old settings, and the scroll effects on computers stop running.
- Only shows when: the Show a floating button on this site switch is on.
What shoppers see: many stores want the floating button only on phones, because computers already have a horizontal menu bar. In that case, turn off this field and keep the Display of Mobile on.
Other platforms
The steps above are for Shopify — the default way.
On Wix, both Display switches are in the same Floating button window of Method 4, exactly like Shopify.
On other websites, both Display switches are also in Method 4, used in the same way.
Position of the button
Each panel has a grid of buttons, one for each position. Click a position and that cell lights up, and the floating button moves there right away in the preview.
| Group | Position (label in the app) | Where the button sits |
|---|---|---|
| At the bottom | Bottom-left, Bottom-center, Bottom-right | Floats above the bottom edge, at the left, center or right |
| Stuck to an edge | Left edge, Right edge | Stuck to the left or right edge, in the middle of the screen height, with vertical text |
| Top edge, Bottom edge | Stuck to the top or bottom edge, in the middle of the screen width | |
| At a corner | Corner top-left, Corner top-right, Corner bottom-left, Corner bottom-right | The button becomes a 60 px triangle stuck into the exact screen corner |
| Phone only | Top-left overlay | Covers the default ☰ button at the top left of the theme |
Position on Mobile
The position grid is below the Display switch of the Mobile panel and has no separate label. Choose exactly 1 of the 12 positions in the table above.
- Default for a new menu: Bottom-right.
- Only shows when: the Display switch of Mobile is on.
- Top-left overlay: this position only exists on phones. It suits a theme that has a ☰ button at the top left which you want to replace with the Navi+ button. The floating button covers that spot, so when the shopper taps ☰, the Mobile Menu opens. If the Margin is left empty, the button sits 8 px from the top edge and 16 px from the left edge.
What shoppers see when you change it:
- At the 3 Bottom-… positions and the 2 Top edge / Bottom edge positions, the button is a rounded pill shape. For Top edge / Bottom edge, if the edge margin is 0, the side touching the edge is cut flat, so the button looks like a tab attached to the edge.
- At Left edge and Right edge, the button turns into a vertical tab: the icon on top, and the text running down. If the margin on that edge is 0, the two corners touching the edge are square.
- At the 4 Corner positions, the button becomes a 60 px triangle, with the icon and text inside the corner. The text is tilted 45 degrees along the diagonal. The Curve (px) field has no effect at these positions.
- With the Image type, the picture is placed at the chosen position with no background or border.
Other platforms
The steps above are for Shopify — the default way.
On Wix, the 12-position grid is exactly the same as Shopify, and the default is also Bottom-right.
On other websites, the position grid is exactly the same as Shopify. If your theme has its ☰ button in a different place, use the Margin field to line up the button.
Position on Desktop
The position grid is below the Display switch of the Desktop panel. It’s the same as the phone grid but without Top-left overlay, so there are 11 positions.
- Default for a new menu: Bottom-right.
- Only shows when: the Display switch of Desktop is on.
What shoppers see when you change it: the shape of the button at each position is exactly the same as in the phone section above. Because the two panels are independent, you can place the button at Bottom-right on phones and at Right edge on computers.
Distance from the screen edge
Margin (px) — Mobile
The Margin (px) field of the Mobile panel sets how many pixels the button sits from the phone screen edges.
- Default for a new menu: empty, the box shows the faded hint
Inherit. Navi+ then uses 16 px for buttons at the bottom and for Top-left overlay (only the top edge of Top-left overlay uses 8 px), and positions stuck to an edge or corner use 0 px so the button sits flush with the edge. - How to enter: pixel numbers in the order Top, Right, Bottom, Left, written with spaces between, the same as writing margins in CSS. Enter 1 number and all 4 sides use it. 2 numbers are top-bottom then left-right. 3 numbers are top, left-right, bottom. Each number must be 0 or more. An invalid or negative number is ignored and the default is used.
- Only shows when: the Display switch of Mobile is on.
Only the sides related to the chosen position take effect:
| Position | Sides used |
|---|---|
| Bottom-left, Corner bottom-left | Bottom, left |
| Bottom-right, Corner bottom-right | Bottom, right |
| Bottom-center, Bottom edge | Bottom |
| Top edge | Top |
| Left edge | Left |
| Right edge | Right |
| Corner top-left, Top-left overlay | Top, left |
| Corner top-right | Top, right |
What shoppers see when you change it: the button moves away from or closer to the screen edge by exactly the number of pixels you enter. For example, a button at Bottom-right with 80 sits higher and 80 px from the right edge, so it avoids a chat widget or a Tab Bar placed below. For edge positions, any margin above 0 pulls the button off the edge, and it gets all four corners rounded like a standalone floating button.
Margin (px) — Desktop
The Margin (px) field of the Desktop panel uses the same way of entering values and the same table of sides as the phone field, but it only applies to computer screens.
- Default for a new menu: empty (
Inherit): 16 px for buttons at the bottom, 0 px for edge and corner positions. - Only shows when: the Display switch of Desktop is on.
What shoppers see when you change it: the button moves away from or closer to the browser window edge. The two Margin fields are independent, so changing the computer setting doesn’t change the phone setting.
Scroll effects
The Scroll effects section is at the bottom of each panel and has 2 switches. The two switches work in opposite ways, so turn on only one of them for each device.
All 4 switches work the same way: the button fades out and slides down about 16 px in 0.1 seconds when it hides, and it comes back just as smoothly. While the button is hidden, shoppers can’t tap it. The shopper has to scroll more than about 20 px before the button changes state, so it doesn’t flicker constantly.
Hide when scrolling down on Mobile screen
The button hides when the shopper scrolls down and shows again when they scroll up, on phones only. This suits long product pages, so the button doesn’t cover the content.
- Default for a new menu: off.
- Only shows when: the Display switch of Mobile is on. If Display is off, this switch has no effect.
What shoppers see when on: the button shows when the page first opens. Scrolling down hides it, and scrolling up brings it back. Near the top of the page, the button always shows. When the shopper reaches the bottom of the page, the button always hides so it doesn’t cover the footer.
Only show after scrolling down on Mobile
The button only appears after the shopper starts scrolling down, on phones only. This suits pages with a large banner at the top, when you don’t want the button to show right away.
- Default for a new menu: off.
- Only shows when: the Display switch of Mobile is on.
What shoppers see when on: the button is hidden when the page first opens. Scrolling down shows it, and scrolling up hides it again. Near the top of the page, the button is always hidden. When the shopper reaches the bottom of the page, the button always shows.
Hide when scrolling down on desktop screen
The same as the phone hide-on-scroll switch, but for computers.
- Default for a new menu: off.
- Only shows when: the Display switch of Desktop is on.
What shoppers see when on: on computers, scrolling down hides the button and scrolling up shows it again. Near the top of the page it always shows. At the bottom of the page it always hides.
Only show after scrolling down on Desktop
The same as the phone only-show-after-scroll switch, but for computers.
- Default for a new menu: off.
- Only shows when: the Display switch of Desktop is on.
What shoppers see when on: on computers, the button is hidden when the page first opens. Scrolling down shows it, and scrolling up hides it again. Near the top of the page it’s always hidden. At the bottom of the page it always shows.
The scroll effects are attached once when the page finishes loading, based on the screen size at that moment. If you change this setting and then test by dragging the browser window, reload the page to see the correct result.
Other platforms
The steps above are for Shopify — the default way.
On Wix, all 4 Scroll effects switches are in the same Floating button window (Method 4) and work the same as Shopify.
On other websites, the 4 Scroll effects switches also work the same as Shopify, based on scrolling of the whole page.