Dawn Theme

In this tutorial, we will take you through how to add BookThatApp 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 main-product.liquid file under the Sections area of your Theme Editor.
• Paste {% render 'booking-form' %} just above the code for the submit button on or around line 290.
  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.