Dawn Theme

In this tutorial, we will take you through how to add BookThatApp Booking Forms (available for the Business or higher app subscriptions) to the Dawn 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

There are also embedded solutions available. 

https://support.zetya.com/hc/en-us/articles/4412693736847-BookThatApp-Embed-Solution

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 to be 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 buy-buttons.liquid file under the Snippets area of your Theme Editor.
• Paste {% render 'booking-form' %} just above the code for the submit button on or around line 58.
  Note: the exact line for the coding placement will vary with different versions of the theme.

• Select Save

Step 3 - CSS Changes:

The following provides sample code that can be used to style the booking form. You can create custom styling as needed or hire a third-party developer for more styling options. The styling code should be added to the base.css file found in the Assets section of the theme.

.booking-form input, .bta-time {
  display: block;
  height: 40px;
  width: 60%;
  padding-left: 5px;
  margin-bottom: 5%;
}

.booking-form input.datepicker {
  background-image: url(//cdn.shopify.com/s/files/1/0031/0882/t/34/assets/calendar.png);
  background-repeat: no-repeat;
  background-position: right 10px center;
}

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