Setup Guide: Appointment Widget - Bypass the Cart

This article will walk you through setting up the appointment widget so that you can bypass the Shopify checkout process. No-charge bookings made via the widget use a simple form to capture the name, email, and phone number of the customer. While the inline and popup versions of the widget appear on the product page the button mode can go on a page of your choosing. 

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

 

 

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 appointment widget for your store
   1. 1. Using the inline or popup mode
      2. Using the button mode

The widget provides 2 options for taking no-charge bookings: the standard display, and embedding a  Book Now button. 

The first option is to use the standard appointment widget, but instead of adding the product to the cart, the customer reaches a form where they can submit their info and place the booking. This option supports both an inline widget as well as a pop-up widget. 

The second option is to embed a Book Now button on your site. When the button is selected the widget will popup to display the datepicker and time selector. 

You can view both examples by selecting the following. 

Example: https://bookthatapp-demo.com/products/no-charge-booking 

 

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 Appointments 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 create a set of variants for Party Size. An example of this would be a booking requirement for a minimum party size of 2 and a maximum party size of 7. 

4. If you created your product in Shopify and imported it into the app choose Appointment 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. Capacity refers to how many bookings can happen at the same time and can be based on the Product, Variant, or Resource levels. For appointments, it will typically be resource-based because the staff member taking the booking could also work on different products.

6. Enter the Duration of the appointment.

In this example we want it to change depending on what variant is selected so we choose Variant as the Basis.

7. Enter the duration for each of the variants (for example 60 minutes and 90 minutes).

8. Add lead or lag time (if applicable).

9. If you have multiple locations you can assign it to the product. This will let you include the location's address in reminder emails.

10. To restrict when bookings can last be accepted you can add a cutoff date or future date

11. Choose a set of colors for the appointment.  This allows you to differentiate appointments by color on the Booking Overview Calendar.

12. Select Save. 

 

BTA Operating Hours Page

The times available for bookings across all of your appointment products are determined by the Operating Hours. You can find them at BTA Admin-> Settings-> Operating Hours.

You can find out more about Operating Hours here.

 

Widget Configuration

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

Installation

1. Access the widgets section of the app by selecting Widgets.
2. Select the Appointments:
   
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 products/services.
4. Enable the "Bypass Shopify checkout" for the widget:
   
   This widget setting requires to be enabled to allow free/no-charge bookings.
5. Configure the remaining Appointment Widget settings as desired. For a full description of the available Widget settings please visit:
   Appointment Widget settings

Standard Modes

The standard modes for the widget are the Inline and Popup options found in the Mode setting of the widget. Both options will add the booking widget to the product page like normal. 

With either the Inline or Popup mode you will need to select the option for Bypass Shopify checkout so that the widget will bypass the checkout process. 

 

Button Mode

The Button mode can be selected from the Mode setting of the widget. Once you select the Button option a segment of code will be displayed. 

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 file found in your Shopify admin Theme's section. 

Note- if some products have a price associated with them the app will use the Redirect setting to determine where to direct the customer when they select the Book Now button.