Take Bookings on a Headless Store

If your store runs on Hydrogen, Next.js, or another custom site, the booking calendar can't go on it directly. It needs a Shopify theme. So you keep a theme just for booking, and your Book now buttons link to it.

1. Your headless siteCustomer clicks Book now
2. Booking page on a Shopify themeCustomer picks a time
3. Shopify checkoutCustomer pays, booking is saved

Before you start#

You need the Online Store sales channel with a published theme. Any theme works, including Shopify's free Dawn theme. Step 4 changes links on your headless site, so you may need your developer for that part.

1. Set up a booking theme#

1. In your Shopify admin, go to Online Store > Themes.
2. If you don't have a published theme, add Dawn from the Theme library and click Publish.
3. Go to Online Store > Preferences. If your store has a password page, turn it off. Otherwise customers can't open the booking page.

2. Enable the App Embed#

1. Go to Online Store > Themes and click Customize next to your theme.
2. Click the App embeds icon and switch on Appointment Booking. Click Save.
3. Make sure each service's product is Active and that Online Store is one of its Sales channels.

For the full steps, see Turn on the Select a time button.

If you can't use the app embed#

If app embeds aren't available on your theme, add the app's script to the theme by hand:

1. Go to Online Store > Themes. Next to your theme, click ⋯ > Edit code.

2. Open layout/theme.liquid.

3. Paste this line just before </body>:

   <script src="https://app.getservicify.com/public/frontend-v1.0.0.js" defer></script>
   

4. Click Save.

3. Find your booking page address#

1. In your Shopify admin's left menu, click the eye icon next to Online Store. This opens your theme.
2. Open a service's product page. You should see Select a time under the price.
3. Copy the address from your browser. It looks like https://your-store.myshopify.com/products/wine-tasting.

If you see Add to cart instead, see The calendar is not showing on my store.

4. Link to it from your headless site#

Point your site's Book now buttons at that address, with ?open_calendar=true on the end:

https://your-store.myshopify.com/products/wine-tasting?open_calendar=true

This opens the booking calendar as soon as the page loads, so your customer goes straight to picking a time. They then check out with Shopify as normal.

You can use your myshopify.com address, or connect a subdomain such as book.yourstore.com to your Online Store in Settings > Domains.

5. Test a booking#

1. Click a Book now link on your headless site.
2. Pick a time and go through checkout. You can use a 100% discount code to test without paying.
3. In Easy Appointment Booking, open Bookings. The new booking should be there.

Why can't I just add the app's script to my site?#

The booking calendar needs things that only a Shopify theme has: the theme's product form, its Add to cart button, and the theme's cart. A headless site has none of these, so the calendar either doesn't show or can't add the booking to the cart. Building your own cart line with the booking details isn't supported either, and it can create wrong or duplicate bookings.

Free bookings with the API (Ultimate plan)#

If your services are free and you'd rather keep everything on your own site, a developer can use the app's API instead:

1. Make an API key with the events:read, bookings:create, and bookings:read permissions. See Webhooks and API.
2. From your server, list open times for a service with GET /api/public/v1/events/{eventId}/slots.
3. When a customer picks a time, create the booking with POST /api/public/v1/bookings.

The full reference is at app.getservicify.com/api/public/v1/docs.

If you get stuck, click Support in the app menu to chat with us, and send us your headless site's address.