Setup Guide: The Class Widget

Storefront

This guide walks you through setting up online class bookings using BookThatApp's Class Widget. By the end, you'll have a class product created in Shopify, configured as a service in BTA, scheduled, and live on your storefront.

Before You Begin

Enable the Booking Widgets App Embed in your Shopify theme before proceeding. See: Enabling the BTA Booking Widgets App Embed

Class vs. Course A Class is a single event that spans one day or less. A Course consists of multiple class events that can span several days. You can use this guide to configure courses.

Overview

There are four parts to this setup:

1. Create your Shopify product
2. Configure the product as a service in BookThatApp
3. Set up the class schedule
4. Set up the Class Widget for your store

Example storefront: https://bookthatapp-demo-store.myshopify.com/products/classes-economics-101

Part 1: Create Your Shopify Product

1. In the Shopify admin, create a product to represent your class.
2. Under Inventory, disable Track quantity — BookThatApp manages availability through Capacity.
3. Add variants if applicable (e.g., ticket types).
4. Set the pricing for the class.
5. Click Save.

Notes:

• Do not enter dates or times as variants — you'll create a schedule in BTA instead.
• If you require a minimum party size per booking, you can enable the Minimum Quantity setting in the widget later.

Part 2: Configure the Product as a Service in BookThatApp

Once the product is saved in Shopify, open it and select More Actions → BookThatApp Configuration to open the service configuration page in BTA.

If this is your first service, close the Import Product Settings window. You can use that option later to copy settings from an existing service.

Configure the following fields:

Click Save when done.

Part 3: Set Up the Class Schedule

On the schedule page, choose how your class recurs:

• One-off Dates — Use + Add Dates for irregular dates (e.g., Jan 1, Feb 5, Mar 12).
• Repeating — Use this option for regular recurring classes (e.g., every Monday at 6:00 PM).
  
  

Click Save.

Part 4: Set Up the Class Widget

The Class Widget controls how the booking experience appears on your product page. The widget preview updates in real time as you make changes, and you can add multiple widgets of the same or different types.

Add a Class Widget

1. In BTA, go to Widgets.
2. Click Classes, then select Add Widget.
   
   
    
3. In the Services tab, choose to apply this widget to all scheduled event products (recommended) or select specific products.
   
   
4. Adjust the widget settings as needed.

For a full list of available settings, see: Class Widget Settings

Storefront

Once setup is complete, visit your product page to confirm the widget appears. Your class will also show on the Store Calendar — consider adding a link to the Calendar Page in your storefront navigation.