SquareSpace SF App

Contents

• Before You Start
• Step 1 — Connect Your Squarespace Site
• Step 2 — Complete the Onboarding Form
• Step 3 — Add Product Subscription Options
• Step 4 — Add the App's Code to Your Site
• Step 5 — The Subscription Widget on Product Pages
• Step 6 — The Customer Portal (Manage Subscriptions)
• Step 7 — Renewal Orders
• How Billing Works
• Removing Subscriptions and Disconnecting the App

The SubscriptionFlow App lets you sell your Squarespace products on subscription. Open the app at squarespace.subscriptionflow.com (or from Extensions in your Squarespace account), then follow the steps below.

---

Before You Start

Make sure your Squarespace site has:

• A Core, Plus or Advanced plan. The app adds a small piece of code to your site through Code Injection, which isn't available on the Basic plan.
• Physical or service products you want to sell on subscription.
• Customer Accounts turned on. Customers sign in to manage their subscriptions with their store account (see Step 6).

---

Step 1 -Connect Your Squarespace Site

1. Open the app and click Connect with Squarespace.
2. Sign in to Squarespace if asked, choose the site you want to connect, and click Allow. The app asks for access to your products, orders and inventory.
3. You're brought back to the app. The first time, it opens the Onboarding page.

Figure 1: Connecting your Squarespace site to the app

---

Step 2 -Complete the Onboarding Form

Completing this one-time form creates your SubscriptionFlow workspace automatically.

2.1 Fill in the Onboarding Form

The onboarding form collects the following information:

• Company Name: Your business name. This is used to generate your workspace domain (e.g., "My Company" becomes "mycompany.subscriptionflow.com").
• Full Name: Your personal name for the account.
• Email: Your email address for notifications and account access.
• Phone Number: A number we can reach you on.
• Password: Your account password (must be at least 8 characters).
• Currency: Your primary business currency.
• Country: Your business country location.
• Preferred Payment Processor (optional): The payment provider you plan to use for renewals.

Figure 2: Onboarding form showing all required fields for account setup

2.2 Submit — Your Workspace Is Created

After filling in all required fields, click Create My Account. The system will:

• Validate your information
• Create your workspace account
• Generate your workspace domain
• Provision your subscription management environment

You'll then see a success screen with your unique workspace link. Once it's ready, copy your workspace URL and log in using the email address and password you provided during onboarding. After logging in, you'll be taken to your dashboard.

---

Step 3 -Add Product Subscription Options

Now turn your products into subscription products by adding a subscription option (a plan) to them from inside the app.

1. In the app, open the Products with Subscriptions tab.
2. Under Squarespace Product, search for and select the product you want to sell on subscription.
3. Choose a Discount Type — Percentage off, Amount off, or Flat rate (a fixed subscription price, for products without variants).
4. Under Subscription Frequencies, add one or more delivery frequencies (for example, every 2 weeks or every 1 month) and set the discount for each.
5. For a product with variants, each variant is priced from its own price. You can also untick any variant to leave it as a one-time-only option (no subscription for that variant).
6. Click Save Subscription. The app creates the matching plans in SubscriptionFlow and adds a Purchase Option to the product in Squarespace, with a "One-time purchase" choice and one "Subscribe & Save" choice per frequency at the discounted price. Saving can take a minute for products with many variants; keep the window open.

Figure 3: Configuring a subscription option (discount type, frequencies, and variants) inside the app

---

Step 4 -Add the App's Code to Your Site

Squarespace doesn't let apps add code to your site automatically, so you paste it once yourself.

1. In the app, open Settings and scroll to Storefront setup.
2. Copy the code from 1. Subscribe & Save widget and the code from 2. Customer portal.
3. In Squarespace, open the Pages panel and go to Website Tools → Code Injection (at the bottom of the Pages panel).
4. Paste both codes into the Footer box, one below the other, and click Save.

Figure 4: The app's code pasted into Code Injection → Footer

---

Step 5 -The Subscription Widget on Product Pages

The SubscriptionFlow Widget displays subscription options directly on your product pages, so customers can choose a subscription plan and delivery frequency while viewing a product.

5.1 Verify the Widget

1. Open the storefront page of a product you set up in Step 3. Use your live site, not the Squarespace editor, which turns custom code off while you edit.
2. You should see a Purchase Option block with a One-time purchase choice, a Subscribe & Save choice and the delivery frequencies you set up.
3. Select a frequency and add the product to the cart — the discounted subscription price is applied automatically.

Figure 5: The SubscriptionFlow Widget showing Subscribe & Save options on a product page

---

Step 6 -The Customer Portal (Manage Subscriptions)

The SubscriptionFlow customer portal lets your customers manage their subscriptions — pause, cancel, update, and view invoices — directly from your site after they log in to their store account.

6.1 Create the Manage Subscriptions Page

1. In Squarespace, add a new page and name it, for example, Manage Subscriptions.
2. Add a Code block to the page and paste only this line:

   <div id="sf-portal-mount"></div>

3. Save and publish the page. Add it to your navigation (or footer) so customers can find it.

6.2 How Customers Get In

• Customers who are logged in to their account on your store see their subscriptions straight away.
• Customers who aren't see a Log in button. After they log in, the portal opens automatically.
• Customers need to log in with the same email address they used at checkout. Customers who checked out as guests can create an account with that email.

Figure 6: The Manage Subscriptions page where customers manage their subscriptions

---

Step 7 -Renewal Orders

Each time a subscription renews and is paid in SubscriptionFlow, the app adds the renewal to your Squarespace orders so you can ship it like any other order.

1. In the app, open Settings → Storefront setup → 3. Renewal orders and copy the URL.
2. In your SubscriptionFlow workspace, add a webhook for the invoice paid event and paste that URL.

Renewal orders then appear in Squarespace under Orders, marked as coming from SubscriptionFlow and waiting to be fulfilled. The payment was already collected by SubscriptionFlow, so Squarespace doesn't charge the customer again, and stock is updated automatically.

---

How Billing Works

Two systems are involved, and it is worth knowing which one does what.

• The first payment is taken by Squarespace at checkout, through the payment provider connected to your Squarespace site. The order completes exactly like any other Squarespace order.
• The app then creates a matching subscription in SubscriptionFlow, with the first term already marked as paid and auto-renew switched on.
• Every renewal after that is billed by SubscriptionFlow, not by Squarespace, using the payment processor connected to your SubscriptionFlow workspace. Each paid renewal becomes a Squarespace order to fulfil (Step 7).

---

Removing Subscriptions and Disconnecting the App

Stop selling one product on subscription

In the app, open Products with Subscriptions and remove that product from the list. The app takes the Purchase Option off the product in Squarespace and restores it to how it was.

Disconnect the app

1. First, in the app open Settings and click Remove from all products. Once the app is disconnected it can no longer clean up your products, so do this before disconnecting.
2. Remove the app's code from Code Injection → Footer, and delete the Manage Subscriptions page if you no longer need it.
3. Disconnect SubscriptionFlow from your Squarespace site's connected extensions. The app's data for your site is then deleted.

---

Support

If you need help at any step, email onboarding@subscriptionflow.com or reach out to the SubscriptionFlow App support team from your account dashboard.

---

SquarespaceSubscriptionsSubscriptionFlowQuick Start

End of document.

Back to top