Setup Guide: The Appointment Widget 📅

This guide walks you through configuring a product in BookThatApp (BTA) to represent an appointment or service. You'll set up operating hours and an Appointment Widget so customers can select an available date and time at checkout based on the duration of the service they choose.

💡 Before you begin: Enable the BTA Booking Widgets App Embed in your Shopify theme before following the steps below. See: Enabling the BTA Booking Widgets App Embed.

Taking no-charge appointments? See this separate tutorial instead.

Example: https://bookthatapp-demo-store.myshopify.com/products/nail-salon-with-consent-form
 

What This Guide Covers 

1. Creating your Shopify product
2. Configuring the product in BookThatApp
3. Configuring Operating Hours
4. Setting up the Appointment widget for your store

Part 1: Create the Product in Shopify

1. In the Shopify admin, create a Shopify product to represent your booking service.
2. Under Inventory, disable the option "Track quantity" as the app will manage this through Capacity later on.
3. Add variants for your Service if applicable i.e.: Basic Consultation,  Extended Consultation
4. Set the pricing for your booking service.
5. Hit Save at the end to keep the changes for the Shopify product configuration

After creating and saving the new product in Shopify you can import the product into BookThatApp to start your service configuration in the app.

To do so, select More Actions ► BookThatApp Configuration on the product configuration page in Shopify:

Some relevant notes when setting up your product in Shopify:

• Make sure to disable the "Track quantity" option as the app will manage this through
• Do not enter the dates or times of the event as variants because you will create a schedule in the app.
• If the service holds different durations, these are required to be represented as product variants.
• If you have a minimum party size requirement for your bookings you will want to create a set of variants for Party Size. An example of this would be a booking requirement for a minimum party size of 2 and a maximum party size of 7.

Part 2: Configure the Service in BookThatApp ⚙️

After selecting the BookThatApp configuration from the Shopify product configuration page, you will be redirected to the Service configuration page in the BTA app.

1. If this is your first configured service, you can close the Import Product Settings window. This option can be used later on to copy and apply the service settings from another existing service and ignore the remaining steps below.

2. Under Booking type, choose "Appointment" to set the service booking type. 

3. Enter the Capacity for the Service:

Note: Capacity refers to how many bookings can happen at the same time. Capacity can be based on the following: the Product, Variant, or Resource levels. For appointments, it will typically be resource-based because the staff member taking the booking could also work on different products. For a resource-based capacity, please see the examples in the Resources section.

4. Enter the Duration for the appointment:

4.a  Fixed duration - If the service has a fixed duration, keep the duration basis set to a "Product" level and add a duration to the service: 

4.b  Variable durations - If the services have multiple durations depending on variant options, adjust the Duration basis to a "Variant" level and select the representative variant Option for the Duration configured for the product in Shopify:

7. If you are subscribed to the Premium or higher app subscription you can enable the Multiple Appointments feature. 

8. Add Lead or Lag times (if applicable).
 

9. If you have multiple locations you can assign it to the service. This will let you include the location's address in reminder emails. Locations must be configured first in the app under Settings ► Locations.

10. To restrict when bookings can last be accepted you can add a cutoff date or future date

11. Choose a set of colors for all the bookings for the service. This allows you to differentiate appointments by color on the Calendar Overview in the app.

12. Select Save to keep the service configuration changes.

Part 3: Configure Operating Hours 🔗

The times available for bookings across all of your appointment products are determined by the Operating Hours. You can find them in the BTA admin under Settings ► Operating Hours.

You can find out more about Operating Hours here.

Part 4: Set Up the Appointment Widget

The Appointment widget can be used to allow your customers to choose the appointment date and time, and there are several settings available to change the way it works. The widget preview updates in real time so you can see the effect of the changes. 

Installation

1. Access the widgets section of the app by selecting Widgets.
2. Click "Appointments" and select "Add Widget" in the pop-up window to create the Appointment Widget.
   
   
    
3. In the Services tab of the widget, you can choose to use this widget configuration for all your Appointment types of services (recommended), or you can apply it to specific Appointments from your services list.
   
    
4. Configure the Appointment Widget Settings as desired. For a full description of the available Widget settings please visit:
   Appointment Widget Settings