Storefront Blocks (Theme Extension)

BookingItNow · All Plans

What Are Storefront Blocks?

The BookingItNow Theme Extension adds a set of blocks you can drop into any page of your Shopify store using the theme editor — no code required. Blocks let you surface your booking experience directly on your storefront: a "Book Now" button on a product page, a full service menu on your homepage, an inline booking form anywhere you like.

The extension is available on all plans.

Installing the Extension

The BookingItNow Theme Extension is installed automatically when you install the app. To start using blocks:

1. In your Shopify admin go to Online Store → Themes
2. Click Customize on your active theme
3. Open the page you want to add a block to (product page, homepage, custom page, etc.)
4. Click Add section or Add block in the left sidebar
5. Look for the BookingItNow group — all BIN blocks appear here

Available Blocks

Book Now

A configurable booking button. Can either open a Booking Form inline (using a form you created in the app) or link out to an external booking URL (Calendly, Cal.com, etc.).

Settings: - Button text — what the button says (default: "Book a Service") - Button style — solid, outline, ghost - Button colour / text colour — hex colour pickers - Form slug — the slug of a Public Booking Form you created in BookingItNow. When set, clicking the button reveals the form inline on the page. - Booking URL — an external URL (your Calendly or Cal.com link). Used only if no Form Slug is set. - Heading / Subheading — optional text shown above the button

Form vs. URL: If both a Form Slug and a Booking URL are filled in, the form takes priority. Leave Form Slug blank to use the external URL.

Services

Fetches your active services from BookingItNow and renders them as a card grid. Each card shows the service name, duration, and optional description. An optional CTA on each card links to your booking page or opens a form.

Settings: - Heading / Subheading — optional section title - Columns — 1, 2, or 3 columns - Show Book button — toggle per-card CTA - Book button label — text on the CTA (default: "Book Now") - Booking URL — external link used for the per-card CTA - Form slug — a Public Booking Form slug. When set, the per-card CTA opens the form inline instead of navigating away.

Single Service

Like the Services block but locked to one specific service. Useful on product pages where a single product maps to one service.

Settings: Service selection + same CTA options as the Services block.

Book Now (Product Badge)

A compact booking badge intended for product pages. Appears near the add-to-cart button, flagging the product as a bookable service.

Appointment Times

An inline availability widget that shows open time slots for a service. Customers can select a slot directly on the storefront page.

Request Form

An inline booking request form rendered on the page via Shadow DOM — no page navigation required. Uses the full Public Booking Form experience embedded directly in your theme.

Tips

Putting a Book Now button on a product page: Switch to the product template in the theme editor, add the Book Now block, and set the Form Slug to a form that has the relevant service selected.

Using multiple blocks on one page: You can stack blocks freely — for example, a Service List at the top, then a Request Form below.

Styling: Block colours use your theme's CSS variables by default. Override with the per-block colour settings if you need a specific look.

Mobile: All blocks are responsive. The Services grid stacks to 1 column on mobile regardless of the columns setting.

Troubleshooting

Block shows "Configure a Booking URL or Form Slug in block settings"

The Book Now block requires either a Form Slug or a Booking URL in its settings. Open the block in the theme editor and fill in at least one.

Services grid shows skeleton cards but never loads

The block fetches services from the BookingItNow app via JavaScript. Common causes: - The app is disconnected or your plan has lapsed — check the BookingItNow dashboard - A Content Security Policy on your theme is blocking the request — contact support with your shop domain

Form doesn't open inline

Check that the Form Slug matches exactly what appears in your form's settings in the app (the slug is shown under the embed snippet). Form must be set to Active.

Block doesn't appear in theme editor

The extension is installed but may not be enabled for your theme. In Shopify admin go to Online Store → Themes → Customize, click the … menu, and check App embeds or Theme extensions — make sure the BookingItNow extension is toggled on.

Last updated: April 27, 2026 · BookingItNow