Setup Guide: The Class Widget

This article will walk you through the process of using the class widget to book classes online. By the end of the article, you will have learned how to create a class product, specify the class schedule, and set up your storefront for all your customers to complete purchases online.

Before completing this setup guide configuration steps please make sure to enable the Booking Widgets App Embed option for the Shopify Theme according to the following help article: Enabling the BTA Booking Widgets App Embed

Class versus Course? A Class relates to a single event and spans 1 day or less while a Course can have multiple class events that can be spread across multiple days. You can use this guide to configure courses. 

There are 4 parts we will be covering:

1. Creating your Shopify product;
2. Configuring the product as a service in BookThatApp;
3. Setting up the class schedule;
4. Setting up the Class Widget for your store.

 

Example: https://bookthatapp-demo.com/products/economics-101 

 

Creating your Shopify product

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;
4. Set the pricing for your booking service.
5. Hit Save at the end to keep the changes for the Shopify product configuration

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 you have a minimum party size requirement for each of your bookings you will want to enable the widget setting for Minimum Quantity later on.

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:

 

 

Configuring the product as a 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 "Class" to set the service booking type.
   
   
3. Enter the Capacity of the class. The capacity is the maximum number of people permitted per class. You can choose to base capacity at the Product, Variant or Resource level. In most cases, it will be product-based.
   
   
4. Enter the Duration of each class.
   
   
5. (Optional) Set the Cutoff Days to configure a deadline to create a reservation for each class/event. The Cutoff Days help to prevent people from enrolling too close to the start time of the event. If you want to prevent people from signing up for the class within 24 hours. You can set 1 day for the Cutoff, for example. 
6. (Optional) Set the Future Days for the maximum number of days that customers can book in advance. If Future Days are not required, leave the field empty.
   
   
   
7. If desired, choose a set of colors for the class. This allows you to differentiate classes by color on the Booking Overview Calendar.
   
8. Hit Save to keep the configuration

 

Setting up the class schedule

We are now ready to create the schedule for the class.

1. Create the schedule for your class. There are two choices:
   
   ►  One-off Dates: Use the "+ Add Dates" option if your dates are random (ie. Jan 1, Feb 5, Mar 12).
   ►  Repeating: Use this option if the class recurs on a regular basis (ie.  Every Monday at 6 pm).
   
   
2. Select Save.

 

Setting up the Class Widget for your store

The Class Widget has several settings available to change the way it works, and you can add multiple widgets of the same or different types. The widget preview updates in real time so you can see the effect of the changes. 

 

Add a Class widget

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

 

Storefront

If you've completed the steps above, you should now be able to visit the product page in your storefront and see the widget appear.

You will also see the product appear in your Store Calendar. We recommend adding a link to your storefront navigation to show the Calendar Page.