Skip to main content
Use the Floating Action Buttons screen to control the two buttons that float over your store: the chat button and the cart button.

​
Where to find it

In the admin, click the Settings gear in the top bar. In the Settings sidebar, under Commerce, select Floating Action Buttons. To open the screen, your role needs the Company Settings switch that starts with View global company configuration, in the Settings category. To save any change, even to only one button, your role also needs all of these switches (see Roles):
  • Under Company Settings, in the Settings category: the switch that starts with Edit company-wide settings.
  • Under Popups, in the Content & Website category: View popup campaigns and Edit popup content and triggers.
  • Under Chat Widget, in the Settings category: View live chat widget configuration and Edit chat widget settings.
The Popups and Chat Widget switches don’t mention this screen, but it uses them.

​
What’s on the screen

On a wide screen, the Preview is on the left and the settings panel is on the right. The settings panel has two sections, Chat Button and Cart Button. Both start collapsed. Click a section’s title to open it. Opening one section closes the other. Save is at the top of the screen and saves both buttons at once.

​
Preview

Click Desktop or Mobile to switch between a desktop view and a phone view. The preview updates as soon as you change a setting, before you save. In the preview, a button’s primary color fills the button and its secondary color colors the icon. A button with Hide Button turned on doesn’t appear in the preview.

​
Chat Button

  • Hide Button: turn it on to hide the chat button on your store.
  • Style and Content tabs. Style is selected when the screen opens.
On the Style tab:
  • A size selector with Small, Medium and Large.
  • Position: choose Left or Right to place the button in the bottom-left or bottom-right corner.
  • Use brand settings: a checkbox, checked by default. When it’s checked, the button uses the primary and secondary colors from your Brand Guidelines screen.
  • Primary Color and Secondary Color: color pickers that appear only when Use brand settings is cleared. Each has a swatch and a text field for a hex value.
The Content tab has four fields for the text of the chat button’s form: Form Title, Form Description, Button Text and Success Text. Each label shows a red asterisk while Hide Button is off.

​
Cart Button

  • Hide Button: turn it on to hide the cart button on your store.
  • A size selector with Small, Medium and Large.
  • Position: choose Left or Right to place the button in the bottom-left or bottom-right corner.
  • Use brand settings, Primary Color and Secondary Color: these work the same way as on the chat button’s Style tab.
Saving this screen also sets the Cart screen’s Cart Drawer Position to match the cart button’s Position, and replaces the cart’s colors and brand setting. Saving the Cart screen replaces the cart button’s colors and brand setting here, but not its Position.

​
Tasks

​
Hide or show a button

1

Open the button's section

In the settings panel, click Chat Button or Cart Button.
2

Set Hide Button

Turn on Hide Button to hide the button on your store. Turn it off to show the button. To show the chat button, first fill in its four Content fields.
3

Save

Click Save at the top of the screen. Settings saved! appears when the save succeeds.

​
Style a button

Each button has its own size, position and colors. To change both buttons, repeat these steps for the other one.
1

Open the button's section

Click Chat Button or Cart Button. For the chat button, make sure the Style tab is selected.
2

Set the size and position

Click Small, Medium or Large. Under Position, click Left or Right.
3

Set the colors

To use your brand colors, check Use brand settings. To pick your own, clear Use brand settings, then set Primary Color and Secondary Color. For each color, click the swatch and choose a color, or type a hex value in the text field.
4

Save

Check the Desktop and Mobile previews, then click Save.

​
Set the chat button’s form text

1

Open the Content tab

Click Chat Button, then click the Content tab.
2

Fill in the fields

Enter the Form Title, Form Description, Button Text and Success Text.
3

Save

Click Save.

​
FAQ

If you see Missing required fields, the chat button is visible and one of its four Content fields is empty. The Content tab opens for you. If the Chat Button section is closed, click it, then fill in the empty fields. Or turn on the chat button’s Hide Button.If Save isn’t there, your role doesn’t have the Company Settings switch that starts with Edit company-wide settings. You can still see the preview, but you can’t open the Chat Button or Cart Button sections.If you see Failed to save settings, some of your changes may still have been saved, so reload the screen to check. Then ask an admin to check that your role has every switch listed under Where to find it, and try again. If saving keeps failing, contact support.
Email Fluid support at help@fluid.app. The Getting help page lists what to include in your request.
The checkbox is unavailable until your brand colors load. While it’s checked and unavailable, Primary Color and Secondary Color don’t appear, so you can’t pick your own colors. Reload the screen. If it stays unavailable, contact support.
Saving Brand Guidelines updates a button’s colors only if the button was saved with Use brand settings checked. If a button with Use brand settings checked hasn’t picked up your new colors, open this screen and click Save. A button with Use brand settings cleared keeps its own colors.