This article will outline the steps needed to install Booqable on your existing Shopify website. Installing the add-on will require some changes made to your Shopify theme. While some basic knowledge of HTML will come in handy, the process should be relatively easy with the following steps:

Step 1: Make a copy of your theme.

Before modifying your theme, it will be handy to have a copy of the existing Shopify theme by making a duplicate in your Shopify account. A few changes will be made to this theme throughout the process, so it is wise to have a clean copy of the original theme in case an error occurs.

1 - In your sidebar navigate to Online Store > Themes, and scroll down to Theme Library.

2 - Click the triangle inside the Actions button of your current theme and select the Duplicate option.

3 - Rename the duplicate theme from the Actions menu, for example ‘Dawn with Booqable.’

3 - Activate your theme copy from the Actions button by clicking publish. Your new theme should show up now in the Current theme section of that page.

Step 2: Get the Code

1 - In your Booqable account, go to Settings > Online Reservations > Installation.

2 - Under the ‘Other websites’ section, click the JavaScript snippet button.

3 - Copy the code to your clipboard.

Step 3: Edit your theme.

1 - Click the Actions button of your current theme, and select the Edit code option.

2 - Look for the file named theme.liquid, and paste your code before the </head> tag.

3 - Click Save and close the document.

Step 4: Replace the Add to cart button.

Now that the add-on is installed, you will still need to replace Shopify's Add to cart buttons with Booqable's buttons.

1 - Create a new product template.

To replace the Add to cart buttons for your products, you will need to create a custom product template for those products.


2 - In the code editor, click Add a new template from the Templates directory.

3 - Set the template type to product and the filename to product.Booqable.json.

4 - Copy the contents of the products.json file and replace the contents of the file completely.

5 - Delete the price, variant_picker, quantity_selector and buy_buttons sections.

6 - Delete the price, variant_picker, quantity_selector and buy_buttons lines from the block_order section.

7 - Click Add a new section from the Sections directory. Click Save.

8 - Name the new section product-template-booqable.


9 - Delete all the contents of the newly created template and replace it with a

copy of the contents of the main-product.liquid file. Click Save.

5. Hide the Add to cart button

1 - In your new product-template-booqable.liquid section file, find the code for the Add to cart button by searching for the word cart.

The code varies from theme to theme. Look for an <input> or <button> tag with text like Add to cart, AddToCart, or add-to-cart.

For Dawn, the code for the Add to cart button looks like this:

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
<div class="product-form__buttons">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
>
<span>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}

2 - Wrap the code in {% comment %} and {% endcomment %} tags. This will hide the code in your online store.

For Dawn, the modified code would look like this:

{% comment %}

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available
%}disabled="disabled"{% endunless %} class="btn product-form cart-submit{% if product.options.size
== 1 and product.variants[0].title == 'Default Title' %} product-form cart-submit--small{% endif %}">

<span id="AddToCartText-{{ section.id }}">

{% unless current_variant.available %}

{{ 'products.product.sold_out' | t }}

{% else %}

{{ 'products.product.add_to_cart' | t }}

{% endunless %}

</span>

</button>

{% endcomment %}

3 - Click Save.


Note: You may also want to comment out the code that displays pricing and

availability, as this information is included with Booqable's Add to Cart button.

6. Assign your new template

Now you can assign your template to all of the products for which you want to replace the Add to cart button.

1 - From your Shopify admin, go to Products.


2 - Click a product that on which you want to hide the Add to cart button.

3 - Next, under Theme templates, choose your new booqable template from the Template suffix drop-down.

4 - Click Save.

7. Add Booqable's Add to cart button

1 - From your Booqable admin, go to Products.


2 - Click a product for which you want to add the Add to cart button.

3 - From the Settings sections, scroll down to Embed details and copy the HTML code for the product button to your clipboard.

4 - From your Shopify admin, go to Products.


5 - Click a product in which you want to add Booqable's Add to cart button.

6 - In the Description of your product, click the Show editor button and paste in the code for Booqable's Add to Cart button:

7 - Click Save.

You have now completed the steps required to install Booqable onto your existing Shopify website! Now, anytime you change any of the product details or store settings within Booqable, your Shopify store will automatically be updated.

Did this answer your question?