Paste the calendar into the product template
In your product template, add this where the calendar should appear:
<booking-calendar data-proxy="/apps/booking" data-product-id="gid://shopify/Product/{{ product.id }}"></booking-calendar>
<script src="/apps/booking/embed.js" defer></script>Add the script to theme.liquid
Add the same script tag to theme.liquid as well, so the cart guard runs on the cart and not only on the product page:
<script src="/apps/booking/embed.js" defer></script>Styling is set in the app
The snippet only places the calendar. Colours, the book button and everything else are set in the app under Appearance.
Good to know
When should I use the snippet?
On older themes that do not support app blocks, or when you want to place the calendar by hand.
Do I need the script in two places?
Yes. On the product template so the calendar loads, and in theme.liquid so the cart guard runs on the cart.