Prestige Theme

In this tutorial, we will take you through how to add BookThatApp to the Prestige 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 correct booking form if you need help with this step. 

Step 2 - Add the booking form to the Shopify product page 

Part 1.

• In Shopify Admin, open your current theme.  Click on the Theme Editor.
• In the Snippets section, open the product-form.liquid file
• Paste {% include 'booking-form' %} below the </select> element in or around line 183.

• 

• Click Save 

Part 2.

Open booking-form snippet and add class="ProductForm__Item" above the line

{% capture attribute %}booking-start{% endcapture %}and save:

Step 3 - Updating the Cart Page 

• Continue with the instructions in the BTA Admin Install page. The quantity input code is at line 73 of the cart-items.liquid file in the Snippets area of the Theme Editor.

BEFORE

AFTER:

Please note: this theme calls the current line item line_item (most other themes call simply this item).

Step 4: CSS Changes:

We recommend adding the following CSS to the end of the "theme.scss.liquid" file in the Assets section:

/* BookThatApp */
.booking-form {
  flex: 1 0 100%;
  display: flex;
  
  .ProductForm__Item {
    display: flex;
    padding-right: 5px;    
  }
  
  label {
    margin-right: 5px;
  }

  input.datepicker {
    flex-grow: 1;
    background: {
      image: url('{{ "calendar.png" | asset_url }}');
      repeat: no-repeat;
      position: right 10px center;
    };
    border: 0 none;
  }
}
 

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