Articles on: Appointment Bookings

📅 How to Embed the Appointment Booking Calendar on Your Store

Hoppy Appointments gives you two ways to display the booking calendar on your storefront:


  1. Automatic Book Now button — replaces the Add to Cart button on product pages connected to your services.
  2. Manual Appointment Calendar block — place a booking card or inline calendar on any page using Shopify’s theme editor.


This guide walks you through both methods so customers can start booking directly from your store.



⚠️ Before You Begin


Before embedding the calendar, make sure you have:


  • The Hoppy Appointments app installed on your Shopify store
  • At least one service created and connected to a Shopify product
  • A clear idea of whether you want a popup calendar or an inline calendar on the page


If you haven’t created a service yet, start with How to Set Up Appointment Booking Services first.



🛠️ Step 1 — Enable the Appointment Bookings App Embed


The app embed is the main switch that makes the booking widget work. It must be enabled for both automatic and manual embedding.


Option A: Enable from inside the app


  1. Open the Hoppy Appointments app
  2. In the dashboard, Find the App Status card
  3. Click Activate


This opens your Shopify theme editor directly to the app embed section.


Option B: Enable manually from Shopify Admin


  1. Go to Shopify Admin → Online Store → Themes
  2. Click Customize on your live theme
  3. Click the App embeds icon at the top
  4. Find Appointment Bookings
  5. Toggle it ON
  6. Click Save


Once enabled, the App Status card inside Hoppy Appointments shows Active.



🛠️ Step 2 — Make Sure Your Service Is Active and Saved


The booking widget only appears for services that are saved and turned on.


  1. In the app, go to My services
  2. Check the badge next to your service:
    • Active ✅ — the service is live
    • Inactive — open the More menu and click Turn on
    • Archived — open the More menu and click Unarchive, then turn it on
  4. Open the service and click Save


Saving re-syncs your service with the storefront. This is important after changing product variants, pricing, or availability.



🛠️ Step 3 — Check the Book Now Button on Your Product Page


Once the app embed is active and the service is saved, the product page connected to your service will automatically show a Book Now button instead of Add to Cart.


  1. Open your live storefront
  2. Go to the product connected to your service
  3. Confirm the Book Now button appears
  4. Click it to open the booking popup


If your product has multiple variants, switch between them. The Book Now button appears only for variants that are part of the service.


💡 The quantity selector is disabled for bookable products because each booking is for one slot at a time.



🛠️ Step 4 — Add the Appointment Calendar Block Manually (Optional)


Use this method if:


  • Your theme uses a page builder or custom product form
  • You want the calendar on a page that is not a product page
  • You want a styled booking card with service details
  • You want the full calendar embedded directly on the page


Add the block


  1. Go to Shopify Admin → Online Store → Themes
  2. Click Customize on your live theme
  3. Navigate to the page where you want the calendar
  4. Click Add block or Add section
  5. Find Apps → Appointment Calendar
  6. Paste your Service ID
  7. Choose an Embed mode


Find your Service ID


  • Open the service edit page — the Service ID is shown near the top
  • Or go to My services → More → Copy Service ID


Choose an embed mode


  • Modal — shows a booking card with the service image, title, description, price, and a Book Now button that opens the calendar in a popup
  • Direct — embeds the full booking calendar directly on the page so customers can pick dates and times without opening a popup


Configure basic styling


The block lets you customize:


  • Background color
  • Title color and font size
  • Price color and font size
  • Option label color and font size
  • Book Now button color, background, and font size
  • View Details link color, background, font size, and visibility


For deeper styling options, see Appointment Bookings — Design & Styling Options.


Save the theme


Click Save in the theme editor, then view the live page.


⚠️ The Appointment Calendar block still requires the Appointment Bookings app embed to be enabled. If it is not, the block shows an "App Embed Not Enabled" message.



👀 What Customers See


Automatic Book Now button


  1. Customer visits the product page
  2. They see a Book Now button instead of Add to Cart
  3. They click it and a popup calendar opens
  4. They select a date, time, and fill out the booking form
  5. If payment is enabled, the product is added to cart and they check out
  6. If payment is not enabled, the booking is confirmed immediately


Manual Modal block


  1. Customer visits the page where you placed the block
  2. They see a card with service details, price, and variant or duration options
  3. They click Book Now to open the popup calendar
  4. They complete the booking flow


Manual Direct block


  1. Customer visits the page where you placed the block
  2. The full calendar loads inline as they scroll into view
  3. They select a date and time directly on the page
  4. They complete the booking form and checkout



⚠️ Important Notes


  • App embed is required for both methods. Even if you use the manual block, the Appointment Bookings app embed must be turned on.
  • Use your live, published theme. The calendar will not appear on draft or unpublished themes.
  • One active service per product variant. If a variant is connected to more than one active service, behavior can be unpredictable.
  • Save after every change. Product variants, pricing, availability, and service settings only reach the storefront after you click Save.
  • The Book Now button hides the original Add to Cart and dynamic checkout buttons for bookable variants only. Other products remain unchanged.
  • Quantity selectors are disabled for bookable products because bookings are single-slot purchases.



🐞 Troubleshooting


The Book Now button does not appear


  • Confirm the App Status shows Active
  • Make sure the service is saved and active
  • Check that you are viewing the correct product page and variant
  • Make sure you are testing on the live theme, not a draft
  • Hard refresh the page or test in an Incognito window


The manual block shows "App Embed Not Enabled"


Go back to Step 1 and enable the Appointment Bookings app embed.


The manual block shows "Appointment service configuration not found"


Double-check the Service ID you pasted. You can copy it again from My services → More → Copy Service ID.


The calendar opens but no dates are available


Check your service Availability tab. Make sure working days are enabled, look-ahead and minimum scheduling notice are reasonable, and blocked dates are not covering everything.


For a complete troubleshooting walkthrough, see Appointment Booking Calendar is Not Showing on My Store [Fixed].



🎉 Final Result


Once configured:


✅ The Appointment Bookings app embed is enabled in your theme
✅ Your service is saved, active, and connected to the right product
✅ The Book Now button appears automatically on the product page
✅ Optionally, an Appointment Calendar block is placed on any page you choose
✅ Customers can book directly from your storefront



📚 Related Articles


  • How to Set Up Appointment Booking Services
  • Appointment Booking Calendar is Not Showing on My Store [Fixed]
  • Appointment Bookings — Design & Styling Options
  • How to Set Custom CSS for Appointment Bookings App
  • How to Set Up Floating Action Button Like Calendly for Appointment Bookings
  • Appointment Bookings — All Payment Options Explained
  • Appointment Bookings — Types of Bookings Explained

Updated on: 20/08/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!