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 Booking Form 2 for your Shopify store.
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 Booking Form 2 (Date Range picker), and then follow the rest of the install instructions. If you need to capture a single night, please use Booking Form 1 (Date picker), and use Shopify variants to represent the duration.
(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 or Variant. 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 Resource (if applicable)
10. Add a Location (if applicable)
11. Add a cutoff date or future date (if applicable)
12. If desired, choose a set of colours for the room. This allows you to differentiate accommodations by colour on the Booking Overview Calendar.
13. Hit Save.
15. Enter the opening hours for your store.
16. To calculate a price based on a daily rate you will need to navigate to Settings -> Product Page tab -> and enable 'Date range updates quantity?'
17. You must have your theme's quantity selector enabled.
- If you do not see it on your product page then you will need to access your theme via the Shopify admin.
- Select the Customize theme button
- Access the product page
- Select to enable the quantity selector
- Optional Step- Access the code for your product page and hide the field while leaving it enabled.