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 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.
Comments
0 comments
Please sign in to leave a comment.