Install the calendar with the app block

Add the calendar and cart guard

1. Add the Booking Calendar app block. In the theme editor, open a product template and add the Booking Calendar app block where you want the calendar to appear.
2. Choose what happens after add to cart. On the app block itself, under After add to cart, pick what happens once a booking is added: go to the cart page (the default), stay on the page, or run custom code. Custom code is JavaScript that runs after the booking is added, for example to open your theme cart drawer; enter the code only, with no script tags. It receives cart (the updated cart) and items (the lines just added) and runs on the storefront only. This setting lives on the Booking Calendar block itself, not in Appearance, and applies on every plan.
3. Turn on the Booking Cart Guard app embed. In the theme editor under App embeds, turn on the Booking Cart Guard. This runs on the cart so held slots stay valid through checkout.
4. Hide the native buy controls. For bookable products, hide the theme native add to cart, buy it now, price, quantity and variant pickers. The calendar replaces them.
5. Trigger from your own button (optional). The calendar has its own Book button. If you want a different button to book instead, such as a sticky add to cart bar, add the data-booking-book attribute to it. Booker mirrors the calendar Book button onto it: it stays disabled until a time is chosen and books that time when clicked. A standalone Book Button app block is also available if you would rather place the button on its own, and a standalone Price app block can show the running total anywhere on the product page, staying in sync with the current rate, add-ons and deposit. The Price block shows nothing useful unless the Booking Calendar block is also on the page.

Why hide the native controls

The calendar handles the price, the quantity and adding the booking to the cart. Leaving the theme native add to cart, buy it now, price, quantity and variant pickers on a bookable product lets a customer buy without picking a time, so hide them for those products.

Good to know