Use Squarespace Commerce to manage your Foxy products

Delete

As soon as you make the following changes, they will be live, so you may want to duplicate your Squarespace site and test or have Foxy already configured.

Before getting started

  • This integration supports up to 3 types of variants. If you have more, please contact us.
  • For the product details page layout, choose Simple.
  • 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. In your Squarespace site, go to Website > Website Tools > Code Injection
  2. Go to the Sample Code page in the Foxy admin, and copy the code snippet in Step 1 (code from Step 2 is not needed for this tutorial)
  3. Back in Squarespace settings, paste the code from the previous step in the Footer text box
  4. Open this link: https://pastebin.com/raw/tE3Dez9X and copy the code there
  5. In the same Footer text box in Squarespace settings, paste the code from the previous step, after the existing code
  6. 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. Go to the Template Configurations in the Foxy admin
  2. Under the Cart section, select the Customize Cart Display option
  3. Uncheck the Show Product Code to hide the code product option
  4. In the text box beside Custom Product Options to Hide, input SKU to hide the SKU product option
  5. Scroll to the bottom of the page and click the Update button to save

Optional: Update product inventory using Make

This setup requires all products to be tracked for inventory (i.e. no products or variants are configured as "unlimited quantity" in Squarespace), or it'll result in an error and the scenario would be deactivated. 

  1. Add the webhook to Make following this tutorial: Integrating the Foxy Webhook with Make/Integromat
  2. Add a new module connected to the Foxy webhook, select Flow Control then Iterator, and choose _embed: fx:items[] for the Array field
  3. Add a new Squarespace module connected to the Iterator and select Update Stock Quantities (under the Inventory section)
  4. In the Connection field, click Add
  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. In the Decrease Stock field, click Add item
  7. Select code for the Product Variant ID field, and quantity for the Quantity field
  8. 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, expand one of the transactions. Under the Webhooks section of the transaction, check the box for your Make webhook and click the Refeed selected webhooks button
  9. If the test completes without errors, you can activate the scenario 


In This Article

Related Articles

Create a purchase button in Squarespace
Getting started with Foxy + Squarespace

Need help?

Can't find the answers you're looking for? Our team is here to help. Please click below to contact us.

Contact Us