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.

 

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

Class versus Course? A class has a single occurrence and spans 1 day or less while a course has multiple occurrences and spans more than 1 day. You can use this guide to configure courses. 

There are 2 ways to create your products: via the Shopify admin product page, or through the app installation process. We recommend using the app installation method as it streamlines the process and walks you through each of the steps from product creation to implementing your booking widget. 

If you opt to create your product in Shopify first please select the following link.

https://support.zetya.com/hc/en-us/articles/115003355866-Adding-Removing-Products

 

BookThatApp (BTA) Setup Wizard

The BTA setup wizard walks you through creating a product and configuring the widget that will allow the booking form to display on the product page of your storefront.  

1. In the app admin select Installation to begin the process. 

2. After selecting the option for the type of bookings you will take you will select the Next button to continue the process. For this example, we selected the Classes option.

3. Here are a few brief notes regarding variants.

• Any option representing pricing should be done through variants.
• 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 your bookings you will want to enable the widget setting for Set Minimum Quantity.

4. If you created your product in Shopify and imported it into the app choose Class as the Profile. This is automatically done if you are creating your product through the app's Setup Wizard. 

The remaining configuration steps are the same regardless of the method you used to create your products.

5. 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 or Variant level. In most cases, it will be product-based.

6. Enter how long the class is in the Duration section.

7. If you want to prevent people from signing up for the class 1 day before the class starts you can set a cutoff date or future date

8. Add a Location (if applicable). This will let you schedule by location and include the location's address in reminder emails.

9. If desired, choose a set of colors for the class. This allows you to differentiate classes by colour on the Booking Overview Calendar.

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 this 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.

 

Widget Configuration

BookThatApp has a number of 'widgets' that allow you to choose how you would like customers to be able to book classes in your store. Each 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. 

If you are using the Setup Wizard it will automatically walk you through the steps to configure and customize the widget. If you imported your product from Shopify you will need to complete the following steps. 

Add a class widget

1. Access the widgets section of the app by selecting Widgets.
2. Click Create Widget and select the Class Widget.
3. Settings
   • Name: You can have multiple Class widgets with different settings so you can use the name field to describe what this widget is for.
   • Mode: Determines how the widget appears on the product page. Inline or Popup option.
   • Price Format: Choose to include the abbreviated currency from the Shopify settings or not. (ie. USD)
   • Display Time Range: When clicked, the widget will show time slots as a range. (ie. 1:00 PM - 2:00 PM)
   • Show Remaining Places: When checked the number of available spaces will be shown.
   • Show Booking Fields: When selected the additional fields created in the Booking Fields section of the app will display. 
   • Allow Choosing Location: Allow the customer to select the location.
   • Show Timezone Helper: DIsplays a timezone converter tool when enabled. This option will just be present if the customer is in a region different than the one specified for the store in the Shopify admin Settings. 
   • Allow Choosing Location: Shows a drop-down with the locations assigned to the product. Note that the widget will only show the location chooser if there are multiple locations assigned to the product.
   • Show Timezone Helper: Includes a timezone selector at the bottom of the widget.
   • Allow Choosing Quantity: Allow the customer to book more than 1 space at a time. 
   • Set Minimum Quantity: After selecting this option you will be able to set a minimum quantity that must be met in order to place a booking. 
   • Show Price: Option to control if the price is shown or omitted within the widget.
   • Use Swatches: Display variants using swatches instead of a drop-down selector. 
   • Allow Waitlist: Enables/disables the waitlist feature.                              

 

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.