Use Squarespace Commerce to manage your Foxy products

Before getting started

Some Squarespace features are not supported, please disable them:

• Quick View - more details here

• Express Checkout - steps to disable here

• Ajax loading - not all themes support this feature. Steps to disable this feature can be found here

Add Foxy code snippet

1. 1

   From your Squarespace website editor, go to Website > Pages > Website Tools (under Utilities) > Code Injection (under Custom Code)

2. 2

   In the Footer text box, add the following two code snippets:

   Foxy loader.js
   From your Foxy Admin, go to Settings > Website & Products. Copy and paste the Foxy loader.js code snippet
   

   Foxy + Squarespace script
   Copy the code below and paste after the Foxy loader.js snippet

   <!-- FOXY + SQUARESPACE -->
   <script src="https://foxy-integrations.netlify.app/foxy-squarespace.js"></script>

3. 3

   Save the changes and test

When a product is added to cart, you'll also see the SKU and code product options listed under the product. If you wish to hide them, follow the steps below: 

1. 1

   From your Foxy Admin, go to Settings > Cart

2. 2

   Under Cart Display, toggle off Use default layout

3. 3

   To hide the product option of code, toggle off Show item code

4. 4

   To hide the product option of SKU, in the Hidden custom item options field, enter SKU

5. 5

   Save the settings

Optional: Update product inventory using Make

This setup requires all products to be tracked for inventory. In other words, no products or variants are configured as "unlimited quantity" in Squarespace. Otherwise, it'll result in an error and the scenario may be deactivated. 

1. 1

   Add the Foxy JSON webhook to Make following this tutorial: Integrating the Foxy Webhook with Make

2. 2

   Add a new module connected to the Foxy webhook, select Flow Control then Iterator, and choose _embedded: fx:items[] for the Array field

3. 3

   Add a new Squarespace module connected to the Iterator module and select Update Stock Quantities (under the Inventory section) for the action

4. 4

   In the Connection field, click Add

5. 5

   Enter a name for the connection then click Continue, a window will pop up to authenticate your Squarespace account and select a site

6. 6

   In the Decrease Stock field, click Add item

7. 7

   In the Product Variant ID field, select code

8. 8

   In the Quantity field, select quantity

9. 9

   Test the scenario by clicking Run once. You can then complete a new transaction or refeed the webhook for a completed transaction from the Foxy Admin: in the Transactions page, choose one of the transactions. In the Webhooks section of the transaction, click the Select button and check the box for your Make webhook. Then click the Refeed button

10. 10

    If the test completes without errors, you can activate the scenario