How to install Booqable on a Weebly website

Learn how to create a powerful online rental store in minutes by connecting Booqable to a Weebly website.

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

If you have ever wanted to create a powerful online store with Weebly; Booqable has the answer!

The following article will guide you through how easy it to allow customers to place online bookings through Booqable, on your Weebly website.

How it works

Installing Booqable on your Weebly site involved setting up a Weebly account, installing the Booqable plugin, and dragging and dropping the different Booqable elements onto your website pages.

This will allow customers to add their desired rental dates and times, browse through different products, and reserve and pay for an order on your Weebly website.

1. Set up a Weebly account

Before you can install Booqable onto your Weebly website to turn it into an online store for your rental business, you must first create a website with Weebly to start with.

  1. Start by signing up to a Weebly account.

  2. If you are signing up for a new account, make sure to select "I just need a website", and not "I need a website with an online store".

πŸ’‘Note: If you already have a website started that is an online store template site, you may not be able to access the app center in Weebly, or you may not be able to add an app onto that website. You will need to create a new account with the proper website type.

2. Install the Booqable plugin

  1. In your Booqable account, go to Settings > Website integration.

  2. Click Weebly App.

  3. Open another tab on your browser window, and Log in to your Weebly account.

  4. In your Weebly account, go to the App centre.

  5. Once you find Booqable in the App centre, click 'Add'.

πŸ’‘Note: Having Trouble finding the App Center or getting an error message about having no sites? Contact Weebly support about switching your account type.

6. When the pop-up appears, select the Booqable account you wish to connect to, and click Continue.

7. Once you have installed the Booqable app in your Weebly account, you will be taken to your account's Editor page, where Booqable will be highlighted in the Build tab.

8. In the Build tab, you will be able to drag and drop many different Booqable elements into your different pages of your website. Start below by adding products.

3. Add products to your page(s)

You can add products to be displayed on your Weebly website in 3 ways: as a product list, a simple 'add to cart' button, or a detailed product view.

Before you can do this, you will need to have added at least one product in your Booqable account.

1. Add a product list

The first option will allow you to display a list of your Booqable products in a catalogue view, with further details on the product appearing in a pop-up when you click each specific product card.

  1. Click the Product List element in the Build sidebar and drag it onto your webpage of choice.

2. In the pop-up, you can choose to only display products with tagged to specific categories in the same catalogue form on your page.

3. You can also set the number of products per page, or limit the number of products loaded altogether through the same pop-up.

2. Add a product button

The second option will allow you only display the "Add to cart" button beside a product that you have added manually to Weebly.

πŸ’‘Note: This is useful if you would like to, or have do so already, create your own product pages or designs on your Weebly website.

This will allow you to display larger product images or write your own product descriptions in different fonts than what is offered in Booqable's designs (like the image above).

1. When you insert a product button or detail, you'll be asked for a product ID.

In Booqable, head over to Products.

2. Hover over the 'Visible' button to find the Product ID.

3. Copy the Product ID code.

4. Back in your Weebly Editor page, under the Build heading, drag and drop the Product Button element into the position you want it to be in your webpage.

5. In the pop-up, enter this newly copied code.

6. Repeat the same steps to add all your product's button codes into your website.

3. Add a product detail

The third option will allow you to display the product similar to a product list or catalogue; while additionally displaying the product description and "Add to cart" button.

1. When you insert a product button or detail, you'll be asked for a product ID.

In Booqable, head over to Products.

2. Hover over the 'Visible' button to find the Product ID.

3. Copy the Product ID code.

4. Back in your Weebly Editor page, under the Build heading, drag and drop the Product Detail element into the position you want it to be in your webpage.

5. In the pop-up, enter this newly copied code.

6. Repeat the same steps to add all your product's button codes into your website.

You're all set!

You have now successfully learnt how to install Booqable on a Weebly website.

Did this answer your question?