How to embed products on Squarespace

Learn how to put your inventory on display by easily adding Booqable products to a Squarespace website.

Igor avatar
Written by Igor
Updated over a week ago

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.

How it works

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

1. Embed a list of products

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

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

2. 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:

1. 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.

2. 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.

3. Buttons

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).

There are two ways to get the embed codes for individual products:

Option 1.

  • Go to Inventory page.

  • Hover over the 'Visible' button.

  • Copy the desired embed code.

Option 2.

  1. Go to a specific product.

  2. Click on the Online store tab.

  3. Scroll down and choose the desired embed code.

You're all set!

You have now successfully learned how to embed products on a Squarespace website.

Did this answer your question?