Want customers to be able to book from anywhere in your store — not just the product page? A floating action button works like the Calendly widget: a small "Book Now" button stays fixed in the corner of every page, ready to open your booking modal with one click.

Hoppy Appointments lets you add this button per service, customize its text and colors, and choose where it appears on the screen.

This guide walks you through setting it up.

⚠️ Before You Begin

Before setting up the floating action button, make sure you have:

• The Hoppy Appointments app installed on your Shopify store
• At least one active service already created
• The Hoppy Appointments app embed enabled in your theme

💡 The floating button only appears on pages where the app embed is active. If you haven’t enabled the embed yet, go to Shopify Admin → Online Store → Themes → Customize → App Embeds and turn on the Hoppy Appointments embed.

🛠️ Step 1 — Open the Service’s General Tab

The floating action button is configured per service, inside the General tab — not the Design tab.

1. Open the Hoppy Appointments app
2. Go to Services
3. Click the service you want to add the button to
4. Click the General tab
5. Scroll down to the Floating Action Button card

🛠️ Step 2 — Enable the Floating Action Button

Inside the Floating Action Button card:

1. Turn on the Enable floating button toggle

Once enabled, the configuration fields appear below the toggle.

🛠️ Step 3 — Configure the Button

Set up the button to match your store’s style and booking flow.

Button Text

Enter the label customers will see on the button. The default text is Book Now, but you can use anything that fits your brand — for example:

• Book a Call
• Schedule Appointment
• Reserve a Spot

Position

Choose where the button appears on the screen:

• Bottom Right — appears in the lower-right corner
• Bottom Left — appears in the lower-left corner
• Bottom Center — appears centered at the bottom

Background Color

Pick the button background color. The default is black.

Text Color

Pick the button label color. The default is white.

💡 Choose colors with strong contrast so the button is easy to read against your store background.

💾 Step 4 — Save and Preview

1. Click Save at the top of the service page
2. Wait for the confirmation message
3. Visit your storefront and check different pages — home, product, collection, cart, etc.

The button should stay fixed in the chosen corner and open the booking modal when clicked.

⚠️ Important Notes

• Per-service setting — each service has its own floating button. Configure it separately for every service you want to display it on.
• Appears on all pages — once enabled, the button shows on every page where the Hoppy Appointments app embed is active. There are no page-specific visibility rules.
• Multiple services = multiple buttons — if you enable the floating button for several services, each one will render its own button. For a cleaner experience, enable it only on the service you want to promote most.
• Opens the booking modal — clicking the button opens the booking flow for that service directly, without leaving the current page.
• Translations require Advanced Configuration — if you want the button text to change per language, enable Use Advanced Configuration on the service and set the translation under Settings → Translations → Service Translations. See the Translation guide for details.

🐞 Troubleshooting

The button is not showing on my store

1. Make sure Enable floating button is turned on for the service
2. Make sure you clicked Save
3. Confirm the Hoppy Appointments app embed is enabled in your theme
4. Clear your browser cache or test in an incognito window
5. Check that the service is active and properly connected to a product

The button text is wrong or not translated

• If Use Advanced Configuration is off, the button uses the text from the Button Text field directly.
• If Use Advanced Configuration is on, the button text is pulled from Settings → Translations → Service Translations → Floating Button Label.

The button color doesn’t look right

Use the color pickers in the FAB card for basic styling. For more advanced visual changes, you can target the .futureblink-fab class with Custom CSS. See the Custom CSS guide for details.

🎉 Final Result

Once configured:

✅ A floating "Book Now" button appears on every page of your store
✅ Customers can start booking from anywhere without navigating to a product page
✅ The button opens your service’s booking modal instantly
✅ The text, position, and colors match your brand

📚 Related Articles

• Appointment Bookings — Design & Styling Options
• How to set Custom CSS for Appointment Bookings App
• Appointment Bookings — Translation
• How to Set Up Appointment Booking Services

Updated on: 20/08/2026