You can choose where the RuffRuff Order Bonus floating button appears in the theme editor, and adjust its distance from the edges and its vertical position separately for mobile and desktop.
The default position is bottom right. The default distance from the edge is 12px on mobile and 24px on desktop, which matches the previous placement.
Choose the position from "Bottom Left," "Bottom Right," "Center Left," or "Center Right"
Adjust the distance from the bottom or side edges and the vertical offset from the center in px
Set different distances for mobile and desktop
Prerequisite: Enable the app embed "RuffRuff Order Bonus" in the theme editor. If it is not enabled, the floating button does not appear.
To enable it, see "Step 1 Enable the app embed" in Widget.
(1) Open "Floating Button" in the theme editor
Open Shopify admin → Online Store → Themes → Customize. Select the App embeds icon, expand "RuffRuff Order Bonus," and open the "Floating Button" section.
(2) Select "Position"
In "Position," select "Bottom Left," "Bottom Right," "Center Left," or "Center Right." The distance fields change to match the position you select.
(3) Adjust the distances
In the mobile and desktop fields, adjust the distance and the vertical offset. You can drag the slider or enter a number directly.
(4) Save the settings
Select "Save" in the upper-right corner. Open your online store and check the button position at mobile and desktop widths.
The fields that appear depend on the position you select.
Position | Button location | Fields shown |
|---|---|---|
Bottom Left, Bottom Right | At the bottom of the screen, on the left or right edge | Distance from bottom, distance from side |
Center Left, Center Right | On the left or right edge of the screen, vertically centered | Vertical offset from center, distance from side |
Position, visibility, icon, and badge color are separate settings.
Field names begin with "Mobile" or "Desktop" (for example, "Mobile distance from bottom"). The mobile values apply when the screen width is under 640px, and the desktop values apply at 640px or wider.
Setting | Range and step | Default (mobile / desktop) |
|---|---|---|
Distance from bottom | 0 to 200px, in 2px steps | 12px / 24px |
Vertical offset from center | −200 to 200px, in 4px steps | 0px / 0px |
Distance from side | 0 to 200px, in 2px steps | 12px / 24px |
Vertical offset from center: Negative values move the button up, and positive values move it down. 0px is the vertical center of the screen.
Steps: Values are adjusted to the step. For example, you cannot set the distance from the bottom to 71px.
Default: The value used if you do not change the setting. It is the same as the previous placement.
Saved values: "Distance from bottom" and "Vertical offset from center" are saved separately. Switching the position keeps the other value.
The widget that opens when you select the button is placed according to the device and the position.
Desktop (Bottom Left, Bottom Right): The widget opens above the button and aligns with the side you selected.
Desktop (Center Left, Center Right): The widget opens to the right of the left button or to the left of the right button.
Mobile: The widget always appears at the bottom of the screen at full width, regardless of the position.
Small screens: On desktop, if there is not at least 160px of space above the button or 320px beside it, the widget appears at the bottom of the screen at full width.
Warning: The button is automatically adjusted so it stays on the screen. On the right side (Bottom Right, Center Right), the button is placed at least 4px from the right edge so the badge is not cut off, so a distance from the side of 0px is displayed as 4px. On devices with safe areas, such as smartphone notches, the button appears inside them.