Story Theme

In this tutorial, we will take you through how to add BookThatApp to the Story theme. Before you start we recommend you take a backup of your current theme.

Step 1 - Choose Your Booking Form

• Login to BookThatApp
• In BTA Admin, select the Install link from the left hand navigation menu
• 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-form.liquid file under the Snippets area of your Theme Editor.
• Paste {% include 'booking-form' %} just above the quantity input on or around line 69 of the file.

•  Click Save 

Step 3 - Updating the Cart Page 

• Continue with the instructions in the BTA Admin Install page. Locate the existing quantity code on or around lines 110-120 as highlighted below:

And replace with:

{% if item.product.metafields.bookthatapp.config %}
 {{ item.quantity }}
 <input type="hidden" name="updates[{{item.id}}]" id="updates_{{ item.id }}" value="{{ item.quantity }}"/>
 {% else %}
 <span class="js-qty__adjust js-qty__adjust--minus quantity__minus">{% include "icon-minus" %}</span>
 <input class="js-qty__num quantity__input" data-line-quantity
 type="text"
 value="{{ item.quantity }}"
 min="0"
 aria-label="quantity"
 pattern="[0-9]*"
 name="updates[]"
 id="updates_{{ item.key }}"
 aria-label="{{ 'cart.general.item_quantity' | t }}">
 <span class="js-qty__adjust js-qty__adjust--plus quantity__plus">{% include "icon-plus" %}</span>
 {% endif %}%}

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