Slot booking

With Booking, customers pick a time slot from a calendar you design in Webflow. The same calendar works three ways: an appointment booked with a form and no payment, an appointment paid with a product, or a pickup or delivery window chosen in the cart. You set the opening hours and the places of each slot on the product, in the Shopify admin, and you see and manage the bookings there. Smootify counts the places, so two customers never get the last one.

1. Set the schedule in Shopify

Every bookable thing is a product: a haircut, a consultation, a pickup at your shop. Open the product in the Shopify admin. The Smootify booking block on its page shows the next bookings; on a product that is not bookable yet it says so, with a Set up booking button. Edit schedule opens the schedule, the Booking schedule action, which is also in the product’s More actions menu:

• Mode: appointment, pickup or delivery. It also names the slot on the order: “Appointment”, “Pickup” or “Delivery”.
• Weekly hours, and the closed days or days with special hours, such as a holiday.
• Slot length and places per slot: how long a slot lasts and how many customers it takes.
• Notice: how long before a slot it can still be booked. Days ahead: how far in the future customers can book.
• Hold time, from 5 to 120 minutes: how long a slot stays held for a customer, after a paid appointment is added to the cart or while a pickup or delivery window goes through checkout.

From the same block you cancel a booking with Cancel next to it. Book by hand opens the Book a slot by hand action, also under More actions: it books a slot for a phone call or a customer at the counter, even beyond the places, with a warning. A paid booking that found its slot already full shows as a conflict in the block. Every booking is an entry of the Booking metaobject, under Content › Metaobjects.

Then turn on the checkout rule: in Settings › Checkout › Checkout rules, add Smootify booking. It stops the checkout of a bookable product that has no slot, or a slot already past. It needs no new permission.

2. Design the calendar

booking-calendar shows the slots of one product for a number of days. Add a Custom element with the tag booking-calendar. Outside a product, give it the custom attribute data-product-id with the Shopify ID of the bookable product; inside a smootify-product it takes that product. days sets how many days it shows at once (7 by default).

What Smootify needs inside it:

• a day template, with the custom attribute booking="day": Smootify repeats it for each day of the range;
• inside the day, a slot template with booking="slot", repeated for each slot of the day. Make it a Custom element with the tag button: a full slot is then disabled for the keyboard too.

Everything else is up to the design:

• On the day: booking="weekday" (Mon), booking="day-number" (12), booking="month" (October) or booking="date" (Monday 12 October), in the site’s language.
• On the slot: booking="time", its time in the time zone of the store’s location; booking="left", the places left; booking="capacity", its places.
• Anywhere in the calendar: booking="range" (the days shown), booking="selection" (the slot picked), booking="error" (why a slot could not be held, such as a window someone else took before checkout), and two Custom elements with the tag button and data-action="prev" or "next" to move by a range of days.

Style the states with combo classes. On a day: is-today, is-closed (no slot that day) and is-full (every slot taken). On a slot: is-selected when picked and is-full when it has no place left; a full slot is also disabled. A click picks a slot, a second click lets it go. prev is disabled, with is-disabled, on the range that starts today. On the calendar: is-loading, is-error, has-selection, and is-not-bookable on a product without a booking schedule.

One product template for bookable and other products. Put the calendar in a block shown only on bookable products, such as one with tagged="bookable". While the block is hidden, the calendar asks for nothing.

A service with its own page. A visit or a consultation is often kept out of the shop: hidden from search with seo.hidden and left out of the CMS sync, so it has no product page. Book it from a static page, such as /book-a-visit: put a smootify-product with data-id set to the service’s Shopify ID, and the calendar, the price and Add to cart inside it. Link the page from the navbar or the footer. Every link to /products/<handle> of the hidden product goes to a 404.

The availability is kept for a minute, so moving between weeks or opening the page again asks Shopify nothing. A customer’s own booking updates the places at once.

3. Choose where the slot goes

The calendar books the slot according to what is around it.

An appointment without payment

Put the calendar and a Form Block inside a Custom element with the tag booking-form. The form books the slot picked; without one it answers “Choose a slot”. The fields whose Name is name, email, phone or note, in any case (Webflow’s own Name and Email fields work), are saved with the booking; other fields are not sent, and a field is required when you make it Required in Webflow. When the customer is logged in, the booking is linked to them as well. Webflow’s Success and Error messages show the answer. When the slot fills up in the meantime, the Error message shows and the calendar shows its places again.

A paid appointment

Put the calendar inside the product’s add to cart, in its form. When the customer adds the product, the slot is held for the quantity and written on the product’s lines, named “Appointment” or as the property attribute of the calendar says. Without a slot, or with a full one, the product is not added and the calendar shows why. If Shopify refuses the addition, or the network fails, the slot is given back right away, so it does not stay held for nobody.

A pickup or delivery window

Put the calendar inside smootify-cart, with data-product-id set to the product that holds your pickup or delivery schedule. Picking a slot writes it on the cart, as “Pickup” or “Delivery” with the day and time, next to the cart attributes already there. It holds no place yet, so a customer who tries a few windows blocks none of them. At checkout Smootify holds the picked window for the payment. If someone else took it in the meantime, the checkout stops: the calendar shows the reason in booking="error", shows its free places again and comes into view, and the cart form says the slot is no longer available.

Make the window required with the custom attribute data-required on the calendar, as a delivery usually needs: the checkout stops until the cart has a window of that product. A picked window is enough, and the calendar comes into view with its first free slot when it is missing. The message shows in booking="error" and in the cart form’s error, and the calendar gets is-error. It is “Choose a slot” unless you write your own in data-error-required, such as “Choose a delivery window”. Without data-required, or with data-required="false" as a Webflow boolean property turned off writes it, the customer can check out with no window.

4. Confirm the bookings with Shopify Flow

A paid slot becomes a booking when the order is placed. Smootify’s app gives Shopify Flow two templates; install both from Flow’s templates, on any Shopify plan, Basic included:

• Confirm the slots booked with Smootify, on Order created;
• Give back the slots of a cancelled order, on Order cancelled.

When a slow payment finds its slot already full, Flow’s trigger Smootify booking conflict starts: use it to tell your staff, so they can move the booking or refund the order.

Every attribute and element is in the Reference: booking-calendar and booking-form.

Before you publish

Book a slot on your published site in each place you use the calendar, then check the booking on the product’s Smootify booking block.