Setup Guide: Multiple Product selector Appointment Widget

This guide walks you through setting up the Multiple Product Selector Appointment widget. Unlike other appointment widgets, this one is built to be embedded on a custom page and includes a service selector, so customers can choose from all of your appointment services in one place.

Note: With this mode, the product selector is always shown outside product pages.

Before you start ✅

Make sure the Booking Widgets App Embed is enabled in your Shopify theme (see: Enabling the BTA Booking Widgets App Embed). 

Note: The widget currently may open to the current month instead of the first available date for appointment products. This happens because it only searches within the current calendar year.
 

There are 4 parts we will be covering:

1. Creating the product in Shopify
2. Configuring the product in BookThatApp
3. Configuring the schedule
4. Setting up the inline appointment widget for your store

Example: https://bookthatapp-demo-store.myshopify.com/pages/custom-page-for-stand-alone-booking-form

You can create your appointment product in one of two ways:

Option A: Create the product directly in BookThatApp

In the app admin, create the product from within BookThatApp. You will proceed to BTA -> Services -> Create Service as seen below. Then set the booking type to "Appointment" and save it first.

Option B: Create the product in Shopify first, then import it

Create your appointment product in Shopify first, then import it into BookThatApp:

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

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 — you will create a schedule in the app instead.
• If you have a minimum party size requirement for your bookings, you will want to create a set of variants for Party Size. For example, a booking requirement for a minimum party size of 2 and a maximum party size of 7.

2. Configuring the product in BookThatApp

The remaining configuration steps are the same regardless of which option you used to create your product.

1. Enter the Capacity. Capacity refers to how many bookings can happen at the same time and can be based on the Product, Variant, or Resource. 
   
   
2. Enter the Duration of the appointment. If you want duration to change depending on which variant is selected, choose Variant as the Basis, then enter the duration for each variant (for example, 60 minutes and 90 minutes).
   
   
3. Add lead or lag time (if applicable).
4. Assign a location, if you have multiple locations. This lets you include the location's address in reminder emails.
5. Restrict when bookings can last be accepted by adding a cutoff date or future date, if needed.
6. Choose a set of colors for the appointment. This allows you to differentiate appointments by color on the Booking Overview Calendar.
7. Select Save. 

BTA Operating Hours Page

Available times for appointment products are based on your Operating Hours.

Go to: BTA Admin → Settings → Operating Hours
You can learn more here Operating Hours here.

Widget Configuration

The Inline 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. 

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. 

Implementation

1. Access the widgets section of the app by selecting Widgets.
2. Click Appointments under "Add more widgets to your store":
   
3. In the Services tab of the widget you can choose to use this widget configuration for all your Appointment products/services, or you can specify specific services.

4. ---

   Widget settings (what each option does)

   • Name: You can have multiple Appointment widgets with different settings so you can use the name field to describe what this widget is for.
   • Type (static): Displays the widget type.
   • ID (static): Displays the app widget's unique internal identifier.
   • Design Widget: Select this option to quickly access the app's Branding Configuration section of the app to customize the appearance of the Widget. 
   • Display Mode: Determines how the widget appears on the product page. 
   • Booking Fields: When selected the additional fields created in the Booking Fields section of the app will display. 
   • Swatches: Display variants using swatches instead of a drop-down selector. 
   • Make another booking: Enable to allow customers to quickly create another free-charge booking. This option is valid only if the "Bypass Shopify checkout" option is enabled and if the service follows the conditions to Bypass the checkout.
   • Remaining Places: When checked the number of available spaces will be shown.
   • Redirect: Specifies what will happen when the product is added to the cart: Cart Page, Checkout, and Continue Shopping options. 
   • Bypass Shopify checkout: This setting is used to tell the widget to bypass the Shopify checkout process. 
   • Waitlist: Enables/disables the waitlist feature.
   • Time Format: Choose between 'Casual' (ie. 2 pm) or '24 Hours' (ie. 14:00). 
   • Time Slot Generation: Choose to base the time slots off of the duration specified when you configured the product, or base them off of the interval value you can specify below. 
   • Interval: Enter a value that will be used to set the interval of the time slots, in terms of minutes,  while the duration value will determine the actual duration of the booking. 
   • Time Range: When enabled, the widget will show time slots as a range. (ie. 1:00 PM - 2:00 PM)
   • Booked-out time slots: Display/hide unavailable booking timeslots.
   • Show Remaining Places: When checked the number of available spaces will be shown.
   • Timezone Helper: Includes a timezone selector at the bottom of the widget.
   • Location picker: Allow the customer to select a configured location.
   • Location map: Shows location details on the booking confirmation step.
   • Price: Display/hide the price in the widget.
   • Price Format: Choose to include the abbreviated currency from the Shopify settings or not. (ie. USD)
   • Resource: Allow the customer to select a Resource (Staff, Room and/or Equipment resources).
   • 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 to place a booking. 

App Block Mode

The app block mode for this widget allows you to implement the widget as an app block. 

Please get more details on the guide here: Using App Blocks For Your BookThatApp Widgets

Once you implement this on your theme, you will choose the product page mode to be inline mode of display.

If you have products where the price is set at $0 you can enable the setting for Bypass Shopify checkout? so that the widget will bypass the checkout process. 

Legacy Embed Mode

The legacy Embed mode is the Mode setting for when you want to embed the widget on a specific page.  

You will need to select the Copy button to copy the code snippet so that you can add it to the preferred location of your theme via a theme custom liquid found in your Shopify admin Theme's section.