How to embed different online store components

Learn how to enrich an existing website even more by easily installing the different Booqable online store components.

Ana avatar
Written by Ana
Updated over a week ago

After you installed Booqable on your third-party website, you can embed additional Booqable components to enhance your customer's experience.

Just like adding products on your third-party website, simply paste a code snippet anywhere on a page to add the component.

How it works

💡Note: This does not apply to websites made with the Booqable website builder.

The components you can embed onto your website are as follows:

1. Embeddable shopping cart

Embed a shopping cart on any page of your third-party website. The full shopping cart consists of two elements:

  • a list of the products in the cart

  • a sidebar with an order summary and checkout actions

You can also embed these elements separately.

Full embeddable shopping cart:

HTML snippet:

<div class="booqable-embeddable-cart"></div>

WordPress shortcode:


Product lines only:

HTML snippet:

<div class="booqable-embeddable-cart-lines"></div>

WordPress shortcode:


Sidebar only:

HTML snippet:

<div class="booqable-embeddable-cart-sidebar"></div>

WordPress shortcode:


2. Shopping cart button

Embed a button that navigates your customer to the shopping cart.

After you install Booqable on your third-party website, a "floating" shopping cart appears in your website's lower-right corner by default. You can replace the floating cart with a button (in the header of your website, for example).

When you embed the shopping cart button on a page, the floating cart disappears automatically.

HTML snippet:

<div class="booqable-cart-button" data-href=""></div>

WordPress shortcode:

[booqable_cart_button href=""]

Important: Replace "" with the (relative or absolute) URL of the page where you placed the Embeddable shopping cart.

Note: Some website builders and themes don't let you add the href to the embed code. When no href is present, the button links to /cart.

3. Date picker

Let your customers select their desired rental period anywhere from your third-party website, and show them real-time pricing and availability.

💡Note: Make sure to have a product added to your shopping cart before you view availability on the date picker.

HTML snippet:

<div class="booqable-datepicker"></div>

WordPress shortcode:


Note: The options available in the date picker depend on how you've set up your selectable rental period.

4. Category list

Embed a list of product categories to make it easier for customers to find what they are looking for.

HTML snippet:

<div class="booqable-categories"></div>

WordPress shortcode:


💡Note: The category list only filters through product lists that are on the same page (meaning you cannot add just the category list to a page and show the results in another).

5. The sidebar

Embed a sidebar containing a date picker and a category list.

HTML snippet:

<div class="booqable-sidebar"></div>

WordPress shortcode:


6. Search field

Add a search field that filters through product lists (filters on product names and tags).

HTML snippet:

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

WordPress shortcode:


Note: The search field only filters through product lists that are on the same page (meaning you cannot add just the search field to a page and show the results in another).

7. Product sorting

A dropdown to let customers change the sort order of product lists.

HTML snippet:

<div class="booqable-sort"></div>

WordPress shortcode:


💡Note: You can specify the default sorting method in the settings for sorting and filtering.

8. Booqable filter bar

A horizontal bar that combines a search field and a dropdown to sort products.

HTML snippet:

<div class="booqable-bar"></div>

WordPress shortcode:


You're all set!

You have now successfully learned how to embed different online store components onto your online store.

Did this answer your question?