Taking Bookings on Any Page

By default, the Select a Time button appears on your product pages — URLs that contain /products/. If you want customers to book directly from your homepage, a landing page, or any other Shopify page, you have a few ways to make that happen.

Option 1: Popup Calendar Button (recommended)

The Popup Calendar Button is an App Block that drops a "Book now" button anywhere in your theme. When a customer clicks it, your booking calendar opens in a full-screen overlay without leaving the current page.

Step 1: Get the Event Unique ID

1. In the app, go to Events and click the event you want to embed.
2. Scroll to the Marketing section.
3. Copy the Event Unique ID — you'll need it in the next step.

Step 2: Add the block in the theme editor

1. In Shopify Admin, go to Online Store > Themes > Customize.
2. Navigate to the page where you want the button (e.g. the Homepage).
3. Click Add section (or Add block inside an existing section, depending on your theme).
4. Search for Popup Calendar Button and select it.
5. In the block settings panel on the left:
   • Choose the Product linked to your event.
   • Paste the Event Unique ID you copied.
   • Edit the Button label if needed (default is "Book now").
6. Click Save.

Option 2: Inline Calendar

The Inline Calendar block embeds the full booking calendar directly on the page — no button click required. The calendar renders inline wherever you place the block, giving customers a seamless experience without a popup.

Step 1: Get the Event Unique ID

Follow the same steps as above — go to Events > [your event] > Marketing and copy the Event Unique ID.

Step 2: Add the block in the theme editor

1. In Shopify Admin, go to Online Store > Themes > Customize.
2. Navigate to the page where you want the calendar to appear.
3. Click Add section and select Inline Calendar.
4. In the block settings panel:
   • Choose the Product linked to your event.
   • Paste the Event Unique ID.
5. Click Save.

Option 3: Custom Liquid snippet

If you prefer to paste code directly into a page's HTML or a Shopify Custom Liquid section, you can embed the calendar using a data-servicify attribute.

1. In your Shopify page editor (or the Custom Liquid section in the theme editor), paste:

   <div data-servicify="inline-calendar" data-product="PRODUCT_ID" data-event="EVENT_UNIQUE_ID"></div>
   

2. Replace PRODUCT_ID with your Shopify product ID and EVENT_UNIQUE_ID with the value from Events > [your event] > Marketing.
3. Save the page.

Adding a "Book Now" button that opens a specific service

If you want a button on your homepage hero that opens the booking modal for a specific service, use the Popup Calendar Button block described in Option 1. You can place it inside any section — including hero banners — and customize the button text to match your copy.

Use cases

• Homepage "Book Now" hero: Add a Popup Calendar Button block inside your hero section so first-time visitors can book immediately.
• Dedicated booking landing page: Create a Shopify page called "Book a Tour" and embed an Inline Calendar so the calendar is front and center.
• Promotional pages: Add a time-limited offer page with an Inline Calendar so customers can book while the promotion is still on their mind.

Next steps

• Show all your services in one calendar widget
• Show spots remaining per timeslot
• The "Select a Time" button on product pages