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 to all your customers to complete purchases online.

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. 

An example of how the widget could look in your store (depending on what theme you are using) is available here: https://pragmaticinsights.myshopify.com/collections/widgets/products/world-geography

Shopify Product Page

The first step is to create a product in Shopify Admin:

1. Go to Shopify Admin and create a new product to represent your class. In this example we created a "World geography" product.
2. If you offer different options for the class, for example "class only" or "class + textbook", you can set them up as variants when you create the product. You can read more on adding and editing variants in this article from Shopify.
3. Enter the price for each variant and set the inventory to Do Not Track.

Tip: do not enter the dates of the classes as variants - we will set these up in BookThatApp. 

BookThatApp (BTA) Product Page

After you have saved the product in Shopify select BookThatApp Configuration from the More actions menu at the top of the page: 

This will open BookThatApp and take you to the product configuration page.

If you have already set up a class you can copy the settings from it at this time. Go ahead and choose an existing Class product if you have set one up otherwise follow these settings:

1. Choose Class as the Profile
2. 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.
3. Enter how long the class is in the Duration section.
4. 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

 

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:
   1. One-off Dates: Use this option if your dates are random (ie. Jan 1, Feb 5, Mar 12).
   2. Repeating: Use this option if the class recurs on a regular basis (ie.  Every Monday at 6pm).

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

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 in the product page. Inline or Popup option.
   • 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. 
   • Use Swatches: Display variants using swatches instead of a drop-down selector. 

                             

 

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.