RuffRuff Order Bonus now lets you place the floating button at “Center Left” or “Center Right” and adjust its position separately for mobile and desktop.
Key points
- What you can do: Place the button at the vertical center of the left or right edge. You can adjust the distance from the edges and the vertical position in px
- Applies to: Store owners who use the floating button
- Action required: None. Set it up in the theme editor only if you want to change the position
Before and after
| Item | Before | After |
|---|---|---|
| Position options | Bottom Right / Bottom Left | Bottom Right / Bottom Left / Center Left / Center Right |
| Fine-tuning the button position | Not available | Adjust the distance from the edges and the vertical position from the center for each device |
How to use
- In the theme editor, open “RuffRuff Order Bonus” under “App embeds” and go to “Floating Button”
- In “Position”, choose Bottom Left, Bottom Right, Center Left, or Center Right
- Adjust the distances and the vertical position for mobile and desktop, then save
For setup details, see the help article "Adjust the floating button position."
Adjustable settings
The position is shared by mobile and desktop. The values are set for each device. The input fields shown depend on the position you choose.
| Setting | Range and step | Default (mobile / desktop) |
|---|---|---|
| Distance from bottom (Bottom Left / Bottom Right) | 0 to 200px, in 2px steps | 12px / 24px |
| Vertical offset from center (Center Left / Center Right) | −200 to 200px, in 4px steps (negative moves up, positive moves down) | 0px / 0px |
| Distance from side | 0 to 200px, in 2px steps | 12px / 24px |
- The distance from the bottom is shown for Bottom Left and Bottom Right
- The vertical offset from the center is shown for Center Left and Center Right
- The distance from the side is shown for every position
- The mobile values are used when the screen width is under 640px, and the desktop values are used at 640px or wider
How the panel is displayed
- On desktop with a bottom position, the panel opens above the button and lines up with the side you selected
- On desktop with a center position, the panel opens to the right of the left button or to the left of the right button
- On mobile, the panel always appears at the bottom of the screen at full width, regardless of the position
Eligible stores
- Applies to: Stores that display the floating button
- Does not apply to: Stores that set the floating button to “Hidden” (the position settings have no effect)
Impact on existing settings
Your current position (Bottom Right or Bottom Left) and other floating button settings, such as the icon and colors, are kept. The numeric fields are new settings and start with their default values.
Action required from store owners
No changes are required. Follow the steps above only if you want to change the position.
Effective date
September 29, 2026
Limitations
- Values are rounded to the steps in the table above. For example, you cannot set the distance from the bottom to 71px
- When the button is close to the right edge of the screen, the distance is set to at least 4px so the badge is not cut off. A right-edge distance of 0 is treated as 4px
- On desktop screens with a low height, the panel may appear at the bottom of the screen at full width
