How to install Booqable on Squarespace

Learn how to integrate Booqable with an existing Squarespace website in under 20 minutes, to attract more online customers and bookings.

Catrin Donnelly avatar
Written by Catrin Donnelly
Updated over a week ago

If you manage your rental business through Booqable, and plan to host a beautifully designed online store with Squarespace, this article is for you.

Continue with the steps outlined below to learn how simple it is to install Booqable on a Squarespace website, to streamline the entire booking process of your online customers.

How it works

It only takes a few minutes to install Booqable on your Squarespace website. Once installed, you’ll be able to embed your rental items and start accepting rental reservations.

1. Find the JavaScript code

After starting a Booqable trial, you can find the code in your account settings. This snippet is pre-populated with your unique company ID, so it’s ready to go:

  1. Go to Settings > Website Integration > Javascript snippet

  2. Copy the code to your clipboard

There are two ways to install the Booqable shopping cart on Squarespace:

  1. Show the shopping cart on every page of your website

  2. Show the shopping cart only on specific pages

Option 1: Show the cart on every page:

If you want to add your Booqable cart and products to every page of your Squarespace website, you can use the Code Injection area in Advanced Settings of Squarespace.

In the Home menu in the Squarespace sidebar:

  1. Click on Website > Website Tools > Code Injection

  2. Paste the JavaScript snippet into the Header section

  3. Click Save

Option two: Showing the cart on specific pages.

If you want to add the cart and products on specific pages of your Squarespace site, you can add the code to the Page's Settings in Squarespace.

From the Home menu in the Squarespace sidebar:

  1. Go to Website

  2. Hover over the page title and click the Settings icon

  3. A Page Settings window will appear

  4. Click Advanced

  5. Paste your code in the Page Header Code Injection area

2. Add a product list to your website

After you installed Booqable on your Squarespace website, you can add your products in a few different ways by copy-pasting a simple code.

On Squarespace, you'll want to add a Code content block to the section where you want to add your Booqable products.

In this section, you can paste any of the following HTML codes to add your Booqable products and other embeddable components.

Option 1: Embed a list of products

To embed a list of Booqable products, use this code:

<div class="booqable-product-list"> </div>

Additional options:

Add a search field that filters the product list

<div class="booqable-product-search"> </div>

Only show items with specific tags (useful to display different categories)

<div class="booqable-product-list" data-tags="tag,tag 2,tag 3"> </div>

Set the maximum number of products per page

<div class="booqable-product-list" data-per="3"> </div>

Limit the number of products altogether

<div class="booqable-product-list" data-limit="6"> </div>

Optionally, you can add any or all of these options in a single line of code:

<div class="booqable-product-list" data-show-search="true" data-tags="tag,tag 2,tag 3" data-per="3" data-limit="6"> </div>

3. Embed single products

There are three different embed codes for individual Booqable products, allowing you to add them as either a product card, a product detailed view, or an add-to-cart button.

  1. Go to a specific product

  2. Click on the Online store tab

  3. Scroll down and choose the desired embed code

Product cards

Due to the compact size, product cards are perfect for showing multiple Booqable products on a single page while still displaying availability and pricing.

The product description for product cards will open in a pop-up when clicked upon.

Detailed view

A detailed view will have the product name, image(s), description, variations, pricing, availability, and an add-to-cart button without a pop-up.

Product button

The button option only includes the availability, pricing, and add-to-cart button from the detailed view, without the image(s) and product description.

This is best used when adding Booqable to an existing e-commerce website (where you use the website builder’s images and product descriptions).

You're all set!

You have now successfully learned how to install Booqable on a Squarespace website.

Did this answer your question?