Empire Theme

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

Note: Widgets are our newest type of booking form and provide a more modern look. Best of all, they are easier to implement because they do not require you to make coding changes in your theme. 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 Installation link from the left hand navigation menu 
• Select the Booking forms tab to access the install steps
• 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 {% render 'booking-form' %}  just above where it says <div class="product-form--atc"> on line 25.
  Note: the exact line for the coding placement will vary with different versions of the theme.
• Select Save 

Step 3 - Updating the Cart Page 

• Continue with Step 3 of the instructions found in the app admin install steps. There is no need to add line item properties for this theme. However, we recommend disabling the quantity on the cart page by adding the following code to the bottom of the file /sections/static-cart.liquid: https://gist.github.com/gterrill/4d4d090bc2ecbc9160c9669eb89e8bc7

Step 4 - 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:

/* BookThatApp */
.booking-form {
.booking-form-field {
margin-top: 1rem;
z-index: 2;
width: 100%; // needed for Firefox
height: 100%; // needed for IE
color: $color-text;
cursor: pointer;
background-color: transparent;
box-shadow: 0 1px 2px 0 $color-border-soft;
padding: 0.375rem 0 0.625rem 0.375rem;
border: 1px solid rgba(106,106,106,0.3);
border-radius: 3px;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

&::-ms-expand {
display: none; // Removes default arrow from IE10+
}
}

label {
margin-top: 0.5rem;
margin-bottom: 0.375rem;
font-size: 0.8125rem;
opacity: 0.6;
}

input.datepicker {
font-family: Cabin,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
background-color: transparent;
border: 0 none;


width: 100%;
background: {
image: url('{{ "calendar.png" | asset_url }}');
repeat: no-repeat;
position: right 10px center;
}
}
}

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