Seasons Theme

In this tutorial, we will take you through how to add BookThatApp Booking Forms to the Seasons 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 add-to-cart-code.liquid file under the Snippets area of your Theme Editor.
• Copy the below code and paste it on line 25.

25. <div class="select">
 26.   {% include 'booking-form' %}
 27. </div>

• 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 the below CSS to the styles.css.liquid file found in the Assets section:

.select label {float:none;}

• The styling for select elements needs to be commented out. Comment out lines 920-942 as seen below:

920.	/*
921.	.rgba select {
922.	border: 1px solid {{ settings.textbox_border }};
923.	background: {{ settings.textbox_bg }} url({{ 'arrow_dropdown.png' | asset_url }}) 97% center no-repeat;
924.	color: {{ settings.textbox_color }};
925.	font-size: 13px;
926.	padding: 0 25px 0 5px;
927.	height: 24px;
928.	line-height: 24px;
929.	outline: none;
930.	-moz-border-radius: 0px;
931.	-webkit-border-radius: 0px;
932.	border-radius: 0px;
933.	margin: 0;
934.	box-sizing: border-box;
935.	display: block;
936.	margin-bottom: 20px;
937.	-webkit-appearance: none;
938.	-moz-appearance: none;
939.	-ms-appearance: none;
940.	appearance: none;
941.	}
942.	*/

2. jQuery UI

Include the jQuery UI CSS in theme.liquid so that it displays the datepicker properly. Access the theme.liquid file and paste the below code on line 66:

66. {{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/pepper-grinder/jquery-ui.css' | stylesheet_tag }}

3. Custom Select Element

Disable the custom select element code because it prevents BTA from detecting the current variant. Access the init.js.liquid file located in the Assets area of the Theme editor, and comment out the code on line 504 as shown below:

504. // $('.selector-wrapper select').selectBox();

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