Booqable has made it possible for you to install Booqable on your existing Shopify store.
To install the add-on you will have to make some changes to your Shopify theme. Some basic knowledge of HTML comes in handy, but the process should be relatively easy with the following steps:
How it works
1. Find the code
1. Go to your Booqable account and go to Settings > Online Reservations > Installation.
2. Click JavaScript snippet from the other websites option.
3. Copy the code to your clipboard.
2. Adding the Booqable code to your Shopify theme
1. From the Main Menu in Shopify, click Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. Next, look for the file named theme.liquid, and paste your code into the <head> section of your theme:
4. Click Save.
3. Replace the add-to-cart button
Now that the add-on is installed, you will want to replace Shopify's Add to cart buttons with Booqable's buttons.
Step one. Create a new product template
To replace the Add to cart buttons for products, you will need to create a custom product template for those products.
1. In the code editor, click Add a new template from the Templates directory.
2. Create the product template:
a. From the drop-down menu, select product.
b. Name your template booqable .
c. Click Create template.
5. Find this code:
{% section 'product-template' %}And replace it with:
{% section 'product-template-booqable' %}This links your new template with a new product section that we'll create in the following steps.
6. Click Save.
Step two. Create a new product section
1. From the Sections directory, click Add a new section.
2. Create the section:
a. Name your new section product-template-booqable .
b. Click Create section.
3. Empty the file by deleting all of the default code.
4. From the Sections directory, click product-template.liquid. Copy all the content of the file to your clipboard. Return to your new product-template-booqable.liquid section, and paste the code into the file.
5. Click Save.
4. 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 Debut, the code for the Add to cart button looks like this:
<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>2. Wrap the code in {% comment %} and {% endcomment %} tags. This will hide the code on your store.
For Debut, 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.
5. 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.
6. 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 that on 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're all set!
You have now successfully learned how to embed products on Shopify website with Booqable.