Providence Theme

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

 

Note: 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 the Business or higher app subscriptions. Besides requiring no coding changes and having a more modern look that flows better with the theme, the widgets have more settings and greater app performance in comparison to the classic forms. Since the 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:

https://support.zetya.com/hc/en-us/articles/360000984495-Widgets

 

Step 1 - Choose Your Booking Form

• Login to BookThatApp
• In BTA Admin, select the Install link from the left hand navigation menu
• Click on the Install button next to the form that you want installed. Clicking the Install button creates a booking-form snippet in your current theme. Please refer to our article how to choose the booking form if you need help with this step.  

Step 2 - Add the booking form to the Shopify product page 

• In Shopify Admin, open your current theme.
• Open the product-template file under the Templates area of your Theme Editor.
• Copy the below section of code: 

{% include 'booking-form' %}

• Paste the code on or around line 209 as shown below:

• Click Save

Step 3 - Updating the Cart Page 

• Continue with the instructions from Step 3 the BTA Admin Install page. 
•  

Locate the cart-template file in the Snippets area of your Theme editor. 

Disable the quantity on the cart page by completing Step 3.  You can find the quantity input on or around line 102 in the cart page.

 

Step 4 - Updating the Email Templates

• Continue with the instructions in the BTA Admin Install page.

Step 5 - Additional Code Changes:

This theme uses Foundation to modify <select> elements. If you are using time pickers you will need to let Foundation know the options have changed after a date is selected.

• Locate the booking-form.liquid file in the Snippets area of your Theme editor. Scroll towards the end of the file until you see the below code:

...
<script>
    var bta = {
        productId: {{ product.id }}
    }
...

• Paste the below code so that it is included in the <script> area and looks as shown below:

...
<script>
    var bta = {
        productId: {{ product.id }}
    }

    $('#add-to-cart').on("bta.timeslotsLoaded", function(event) {
        Foundation.libs.forms.refresh_custom_select($('select.bta-opening-hours'), true);
    });
...

Please note that you can add CSS to your booking form, but it is not recommended for this theme since formatting is inherited from the row, large-4, & columns classes.

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