> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 📅 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  
3. 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**