Setup Guide: Accommodations

This article will walk you through the process of configuring products in BookThatApp (BTA) that represent accommodations. The customer will be able to select a start and end date which will be captured by the app. The cost will then be calculated based on the specified daily rate.

In this tutorial, we'll take you through how to set up a rental widget for your Shopify store.

EXAMPLE: https://bookthatapp-demo.com/collections/hotel-rooms/products/hotel 

 

Shopify Product Page

1. Create a product to represent the accommodation in Shopify.  In the example below, the shop has 4 types of rooms that are represented by Shopify variants:  King Size Bed (Smoking), King Size Bed (Non Smoking),  Two Doubles (Smoking), and Two Doubles Non Smoking. You can also use Shopify variants to capture the duration of nights if you choose.

2. Enter the price for each variant and set the inventory to Do Not Track.

 

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 import the product into BTA and take you to the BTA product configuration page.

If you have previously set up products in BTA you will be prompted to copy the settings from one of them at this time. Go ahead and choose an existing Event product if you have set one up otherwise follow these steps:

1. In the install page, choose the Accommodation widget type when you create a widget

(Note: If  you get stuck on an installation step, please create a ticket and we'll help you out)

2. Import the product into BTA

3. Set product profile to "Room"

 

4. Enter the capacity of the rooms (max amount of rooms available at any given time)

5. Choose to base capacity on Product, Variant, or Resource.  In this example, we want the capacity to be based on variants as there are different types of standard rooms offered.  

6. Set the "Check In Time" and "Check Out Time".

7. Enter the minimum and maximum values for the Date Range. 

 

8. Select to hide any variants you do not want the booking calendar to appear on.

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

10. Add a cutoff date or future date (if applicable)

 

 

11. If desired, choose a set of colors for the room. This allows you to differentiate accommodations by color on the Booking Overview Calendar.

12. Hit Save.

 

13. Enter the opening hours for your store.

14. To calculate a price based on a daily rate you will need to navigate to Advanced Settings -> Product Page tab -> and enable 'Date range updates quantity?' 

 

Widget Configuration

The accommodation configuration currently uses the same widget as product rentals. The widget provides a sleeker look and feel compared to the classic booking form. There are several settings that you can choose from and 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. Click Add Widget and select the Rental widget to enable it.

3. In the Products tab of the widget you can choose to use this widget configuration for all your products using the Product profile, or you can specify specific products.

Widget Settings

• Name: You can have multiple rental widgets with different settings so you can use the name field to describe what this widget is for.
• Redirect: Specifies what will happen when the product is added to the cart: Cart Page, Checkout, and Continue Shopping options. 
• Mode: Determines how the widget appears on the product page. Inline or Popup option.
• Headline: Specify a headline for your widget.
• Display Legend: Enable to display the legend.
• Hide Start Date: Removes the start date field when selected. 
• Include Return Date: Enable to show the end date of the booking period. 
• Allow Choosing Date Range: When enabled along with the Date range updates quantity? setting found in the Orders section of the app the widget will allow a start and end date to be selected. 
• Show Time Pickers: When enabled a start time and an end time selector will be added to the widget.
  Note: the selection of time does not play a role in tracking the duration of the booking. For instance, a booking starting at 11 am on May 1st and ending at 11 am on May 2nd will count as the same duration as a booking ranging from 11 am May 1st to 8 am, or even 4 pm, on May 2nd. 

• Time Format: 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. 

• 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. 
• Show Booking Fields: When selected the additional fields created in the Booking Fields section of the app will display. 
• Allow Choosing Resource: Allow the customer to select the resource.
• Allow Choosing Location: Allow the customer to select the location.
• Allow Choosing Quantity: Allow the customer to book more than 1 of the product 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: When selected the price will be displayed above the Book Now button as well as with the variants if they are present. 
• Use Swatches: Display variants using swatches instead of a drop-down selector. 
• Header Background Color: Set the background color for the widget's header. 
• Legend Background Color: Set the background color for the legend.