🧭 How to Add BookThatApp Booking Forms to the Dawn Theme

This tutorial walks you through how to install BookThatApp (BTA) Booking Forms on the Dawn Shopify theme.

⚠️ Important: Booking Forms are available on Business or higher BTA subscriptions.
Before you begin, we strongly recommend backing up your current Shopify theme.

💡 Prefer an Easier Option?

Widgets are our latest and most modern type of booking form.
They’re easier to use, require no coding, and blend seamlessly with your store design.

👉 Check out the guide here:
BookThatApp Widgets Setup

We also offer embedded booking solutions if you prefer a custom integration:
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.