The Book Now block is how customers see your timeslots and book on your experience landing pages. You add it in the Shopify theme editor, so you can place it anywhere on the page and change its look without touching code.

This article covers setting up the block, what each setting does, and how to style it.

Using the older Experiences template?

If your experiences were set up a while ago, they may use our older template (product.experiences.liquid). It still works, but we recommend switching to the Book Now block. It's easier to customize, it works with your theme's own layout, and new features are added to the block first.

To check, open one of your experience products in Shopify and look at Theme template in the right column at the bottom. If it says experiences and you signed up before October 31, 2026, you're likely on the older template. Follow the steps below to create a new template, then switch your products over. Try it on one product first.

Step 1: Create a template for your experiences

In your Shopify admin, go to Online Store > Themes.
Click Customize on your current theme.
In the dropdown at the top of the editor, choose Products > Create template.
Name it something you'll recognize, like "Experiences," and base it on your default product template.

Step 2: Add the Book Now block

In the left sidebar, under Product information, click Add block.
Go to the Apps tab and choose Book Now Button (Experiences App).
Drag the block to where you want it. Most merchants place it just under the title.
Hide the theme blocks customers don't need for a booking: Price, Variant picker, Quantity selector, and Buy buttons. Click the eye icon next to each one. The Book Now block shows the price for you.
Click Save.

Tip: You can also add the Experience Summary and Experience Host blocks to show a short description and your host. See Add a short description and host to your experience.

Step 3: Assign the template to your experiences

In your Shopify admin, open an experience product.
In Theme template, choose the template you created.
Click Save, then view the landing page to check it.

Repeat for each experience.

Book Now block settings

Click the Book Now Button block in the theme editor to see its settings.

Note: Settings marked with an asterisk (*) only work once your store is on the new Experiences.

General

Use Simple Styling Mode: [CONFIRM: what this does]
Hide the theme's Add to cart and Buy now buttons: customers book through the widget instead. This only applies to experience products.
Primary Color and On Primary Color: the color of your buttons and the text on them.
*Theme type: [CONFIRM: what the options are and when to change it]

Call to Action Area

Button text: the text on the button that opens the full list of dates, for example "View more timeslots."
Preview timeslots: how many upcoming timeslots show on the page before customers click the button.

Dates and times

*Show timezone: shows your timezone next to the details.
*Show spots remaining: shows how many spaces are left, for example "10 spaces left."
*Show sold-out timeslots: keeps full timeslots visible but unbookable, instead of hiding them.

Buttons

Button corner radius: how rounded the buttons are, in pixels. Use 0 for square corners.

Labels and languages

To change the wording customers see in the widget, click Open Labels & Languages. This opens the settings in Experiences.

Custom styling with CSS

For anything the settings don't cover, add CSS in Advanced Settings > Custom Style Overrides.

The new Book Now block is styled with CSS variables (settings that start with --expapp-). You set a variable once, and the widget uses it everywhere.

Start with this snippet

:root {
  --expapp-font: Georgia, serif;
  --expapp-timeslot-radius: 12px;
  --expapp-surface-bg: #fdf8f0;
  --expapp-muted-text-color: #6b6b6b;
}

Use :root so your styles reach both the block on the page and the booking pop-up, which opens at the bottom of the page.

Good to know

Set colors and corner radius in the block settings, not CSS. Primary Color, On Primary Color, and Button corner radius override any CSS you write for them.
CSS from the older template won't work. Styles that target classes like .expapp-button or .expapp-booknow-button no longer reach the widget. Replace them with the variables above, or send us your old CSS and we'll help convert it.
Custom Style Overrides applies to the whole page, not just this block, even though the box sits in the Book Now settings.

A full list of the variables will be published soon.

Don't see the Apps tab?

Canvas, Shopify's new theme editor, doesn't support app blocks yet. That includes the Book Now block and every other app's blocks. Shopify has said app support is coming.

Until then, set up your Book Now block in Shopify's regular theme editor (Online Store > Themes > Customize). If you've already moved your theme into Canvas, keep publishing from your original theme for now so your booking pages keep working.

Need help? Send us a message and we'll help you get your booking pages set up.

Set up and customize the Book Now block