District Theme

In this tutorial, we will take you through how to add BookThatApp Booking Forms to the District 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 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-template.liquid file under the Sections area of your Theme Editor.
• Paste the code below just above the Quantity field on or around line 165.
  Note: the exact line for the coding placement will vary with different versions of the theme. While the following image uses an include statement you will instead use the render statement as seen above.

<div class="selection-wrapper variant js">
<div class="variant-grid">
{% render 'booking-form' %}
</div>
</div>

 

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 as detailed in the instructions from Step 3 of the install steps. Replace the code on line 103-116, highlighted in the Before screenshot below, with the following code:

<div class="quantity-select">
{% if item.product.metafields.bookthatapp.config %}
<input type="input" size="4" name="updates[{{item.id}}]" id="updates_{{ item.id }}" value="{{ item.quantity }}" readonly="readonly"/>
{% else %}
<div class="button-wrapper">
<button class="adjust adjust-minus">-</button>
</div>
<div class="input-wrapper">
<input type="text" size="4" name="updates[{{item.id}}]" id="updates_{{ item.id }}" value="{{ item.quantity }}"/>
<div class="button-wrapper">
<button class="adjust adjust-plus">+</button>
</div>
</div>
{% endif %}
</div>
</span>

BEFORE:

 AFTER

 

Step 4 - CSS Changes 

• Open the theme.scss.liquid file under the Assets section of your Theme Editor.  
• Paste the code below at the bottom of the file.

/* BookThatApp */
.purchase-box {
.booking-form {
input.datepicker {
outline: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 40%);
background: {
image: url('{{ "calendar.png" | asset_url }}');
repeat: no-repeat;
position: right 10px center;
}
}

select.bta-time {
width: 174px;
}
}
}

 

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