Expo Theme

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

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-form.liquid file under the Snippets area of your Theme Editor.
• Paste {% include 'booking-form' %}  below the </select> element on line 75.
• Click Save 

Step 3 - Updating the Cart Page 

• Continue with the instructions in the BTA Admin Install page. There is no need to add line item properties for this theme, however we recommend disabling the quantity in the cart page. To do this, please follow the instructions under Step 3 on the install page. 

Step 4 - Updating the Email Templates

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

Step 5 - Additional Code Changes

1. CSS Changes

We recommend adding CSS to the theme.scss.liquid file found in the Assets section. Below you will find an example on modifying it:

.booking-form {margin-bottom:20px}
.booking-form label {width:80px; margin-right: 5px;}
.booking-form input.bta.datepicker, .booking-form select.bta-time, .booking-form select.bta-load-enable {min-width:185px; margin-bottom:10px}

2. jQuery Upgrade

Some versions of this theme use an older version of jQuery. Upgrade it to at least version 1.7.2 in the theme.liquid file. It also has an older version of jQuery UI that must be updated it in theme.liquid file on line 64:

64. {{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css' | stylesheet_tag }}
 65. {{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js' | script_tag }}

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