Selling on Squarespace using the Embedded Storefront

We often recommend our merchants to start with the Moonbase Embedded Storefront as a way to add customer authentication, shopping cart, license management and more to their websites easily. This can also be done to Squarespace websites, and this article shows you how.

Add the Embedded Storefront

The first thing you have to do is to add the Moonbase script to all the pages of your website. In Squarespace, this is done using the Code Injection feature, available on Business plans and higher tiers, which you can find by going to Website > Pages > Website Tools > Code Injection.

On this page, you should paste the Moonbase script as explained in the docs:

This is also where you can tweak the configuration of your Embedded Storefront, to control toolbar behavior, styling, etc. All that is left is adding buttons for your products.

Making the store interactive

When designing your storefront website, you usually want clear call to action buttons for the smoothest customer journey towards purchases. So for each product you want to sell, you should add either an "Add to cart" or "Purchase" button depending on preference.

While Squarespace does not support adding buttons with JavaScript handlers, you can add code blocks with button markup that imitates the Squarespace buttons. To do that, add a Code block to your website:

In the code block, paste the following button HTML code, making sure to update the product ID for a product on your account:

<div class="sqs-block-button-container">
  <button 
    class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" 
    onclick="Moonbase.add_to_cart({ product_id: 'example-product' });"
  >
    Add to cart
  </button>
</div>

You may of course style the button yourself using the `style` attribute or custom classes. If you want to open a checkout directly on click, you may update the Moonbase call by changing `add_to_cart` to `purchase`.

Configure your Moonbase account

If your Squarespace website is on a domain that has not been registered on your Moonbase account before, make sure to whitelist it in your Moonbase account settings:

This is important for the security of your customers, to only allow integrations from domains you control.

Once your Squarespace is live, and the domain has been whitelisted and set on your account, you can toggle the storefront mode to use the Embedded Storefront:

Toggling the storefront mode makes sure all links in emails coming from Moonbase directs customers straight to your website, triggering the Embedded Storefront automatically.