Venture Theme

In this tutorial, we will take you through how to add BookThatApp Booking Forms to the Venture theme. Before you start, we recommend you take a backup of your current theme.

⚠️ Note: If your theme has recently been updated, some steps may require adjustment. 💾.

Please note that the booking form are available on the Business plans and above. Please write in to our support team to assist with the implementation.

⚡ Note on Widgets

Widgets are our newest type of booking form. We highly recommend using a widget over a classic booking form.

Our booking forms are available in the app for Business or higher subscriptions. Besides requiring no coding changes and having a more modern look that flows better with the theme, widgets also have more settings and better app performance compared to classic forms.

Since widgets require no coding changes, you can easily have many different types of widgets in your store to handle all types of booking scenarios.

If you have not tried out a widget yet, please see the following:
Widgets Article 🔗

Step 1 – Choose Your Booking Form 🔍

• Login to BookThatApp
• Read our help desk article to determine which booking form is most applicable for your store. 
• Write in to our support team for assistance.
• Once you have chosen a booking form, in the app admin, select Developer Guide ->Product Page. Please refer to our article how to choose the booking form if you need help with this step.  

Step 2 – Add Booking Form to the Shopify Product Page 🛒 

• In Shopify Admin, open your current theme.
• Open the product-template.liquid file under the Sections area of your Theme Editor.
• Paste {% include 'booking-form' %}  below the </select> element on line 149 as shown below.

• Click Save 

Step 3 – Update the Cart Page 🛍️ 

• Continue with Step here: Disabling Quantity on the Cart Page. This step makes the cart quantity read only to prevent overbookings. The quantity code is at line 51 of the cart-template.liquid file in the Sections area of the Theme Editor.

Step 4 - Updating the Email Templates

• Continue with the instructions in the BTA Admin -> Developer Guide -> Email Notifications page.

Step 5 – Additional Code Changes ⚙️

1. CSS Changes

We recommend adding the below CSS to the theme.scss.liquid file found in the Assets section:

.booking-form {
 display: flex;
 flex: 1 0 100%; 
 
 input.datepicker {
   background: {
     image: url('{{ "calendar.png" | asset_url }}');
     repeat: no-repeat;
     position: right 10px center;
     color: #f4f4f4;
   }
 }
}

• Next make the variant selector the same length as the booking form fields. Find 'product-form__input' on line 3619. Change the width value from 100% to 240px as shown below:

3617. .product-form__input {
 3618.    display: block;
 3619.    width: 240px;
 3620.  }

2. Booking Form 

To further style the date and time pickers we need to put them inside a <div class="selector-wrapper product-form__item"> element.

• Access the booking-form.liquid file located in the Snippets area of the Theme Editor. Change the <div> elements as shown below:

...
<div class="booking-form">
  <div class="selector-wrapper product-form__item">
    {% capture attribute %}booking-start{% endcapture %}
    <label for="{{ attribute }}-{{ product.handle }}">Start date</label>
    <input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[Date]" size="12"
...
<div class="selector-wrapper product-form__item">
  {% capture attribute %}booking-time{% endcapture %}
  <label for="{{ attribute }}">Time:</label>
  <select id="{{ attribute }}" name="properties[{{ attribute }}]" class="bta-load-enable" data-datepicker="booking-start">
...

The app should now be successfully installed in the Venture theme. If you have any questions or the booking form is not appearing, please create a ticket and we'll be happy to help.