Providence Theme

In this tutorial, we’ll guide you through adding BookThatApp Booking Forms to the Providence theme. Before making any changes, we strongly recommend taking 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.

Widgets vs Classic Booking Forms ✨

Widgets are our newest type of booking form and are highly recommended over classic booking forms. They are available for all plans and offer several advantages:

• No coding changes required 🖥️

• Modern appearance that integrates smoothly with your theme 🎨

• Ability to have multiple widgets in your store for different booking scenarios 🗂️

If you haven’t tried a widget yet, check out our guide here:

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

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 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 – Update the Cart Page 🛍️

• Continue with the instructions from Developer Guide section. 
•  

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 – Update Email Templates ✉️

• Continue with the instructions from Developer Guide section. 

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.

Completion ✅

The app should now be successfully installed in the Providence theme. If you encounter any issues or the booking form is not appearing, please create a ticket and our team will be happy to assist 💬