Subscriptions give you the flexibility to sell recurring memberships to free or gated content on your site, or to physical subscription services, like meal deliveries, or other tangible products that are delivered regularly. Users who purchase subscriptions from you can view and cancel their subscriptions, too.
Note: Discounts don't work with subscription products, only one-time payment products. Subscriptions also require Stripe. You will need to activate and connect a Stripe account before you can use subscriptions and publish your site. Learn how to connect a Stripe account.
In this lesson you’ll learn:
- How to create a subscription-based product
- How to add the Subscriptions element to your User account page
- How to understand the subscription purchase flow for users
- How to customize subscriptions emails
- How to manage subscriptions
How to create a subscription-based product
If you’re just getting started with Webflow Ecommerce, you can start from scratch or choose a template. Learn more about Webflow Ecommerce.
Important: If you’re interested in selling subscription-based products, you must first enable Ecommerce and Memberships on your site, purchase an Ecommerce Site plan, connect your Stripe account, and enable checkout. Please keep in mind that once you’ve enabled Memberships, you cannot deactivate or remove it. You can’t delete Memberships User pages or Collections after activating Memberships. Additionally, you can’t reuse the reserved URL slugs (e.g., /log-in, /sign-up, etc.) used for Memberships User pages. You should only enable Memberships if you’re sure you want to add user support to your site. If you’re only looking to test out the feature, we recommend creating a test site to do so. Learn more about Memberships.
Good to know: Membership products count towards Ecommerce limits.
Once Ecommerce and Memberships is enabled, you can create a product with a subscription billing method in the Designer of your site. The subscription billing method lets you set up a recurring charge for products or services, and the users who purchase a subscription-based product can view or cancel their subscriptions in their unique user account on the User account page if the Subscription element is present.
To create a subscription-based product:
- Click the Ecommerce “cart” icon in the left panel
- Click the Products option in the Ecommerce section
- Select an available product, or create a new one by clicking New Product
- Choose any Product type (e.g., physical, digital, etc.)
- Scroll to the Billing section and choose subscription as the billing method
- Set the Billing period (e.g., day, week, month, or year)
- Fill in any other pertinent fields for the product
- Click Create to create your new product, or click Save to update an existing product
- Publish your site to push your changes live
Note: If you don’t see a Billing method option for your product, it may have product variants in place. To adjust the billing method for product variants, scroll down to the Variants section and press the settings “cog” icon for the variant you want to edit. Set your Billing method to “subscription,” and choose your Billing period.
Add a “subscribe now” button to your site
Note: If you’ve set the Billing method to “subscription” for any of your products, at site publish Webflow automatically hides the “Add to cart” and “Buy now” buttons in the Add to cart element for those subscription products.
You can add an Add to cart element to Collection lists that are connected to your “products” Collection. This allows shoppers to quickly purchase subscriptions from any of your product collection lists on your homepage and other pages.
You can also place an Add to cart element on your products template page. Learn more about the Add to cart element.
If you’ve set the Billing method to “subscription” on any of your products, when you publish your site, Webflow automatically changes the default button text (e.g., “Buy now”) to subscription text (e.g., “Subscribe now”) for those subscription products. Non-subscription products retain the default “Buy now” text.
To customize the default subscription text:
- Select the “Buy now” button on the Webflow canvas
- Open Element settings panel > Buy now button settings
- Choose “Subscription text” and click the “pencil” icon
- Edit the text and Save your changes
If you’d prefer to revert to the default button text, click “Restore default” at the bottom of the “Edit text” modal window.
Important: Because the “Add to cart” button is automatically hidden on site publish, do not also hide the “Subscribe now” button, or your customers will not be able to purchase subscription products.
How to add the Subscriptions element to your User account page
Note: If you enabled Ecommerce on your site before enabling Memberships, the Subscription element is automatically added to the User account page.
The Subscriptions element can only be added to the User account page. You can use it to show your users which (if any) subscriptions are active for their account, the purchase date, and the next billing date. Users can also cancel active subscriptions and are provided with a record of that change in their account.
If a user cancels a subscription, that subscription cancels immediately, and any content managed via an access group, will not be accessible through the end of their last billing date. For instance, a user could subscribe to content on June 1 with a billing period of a month, essentially granting them subscriber access from June 1 through June 30. If the user chooses to cancel their subscription on June 3, their subscription immediately cancels, and they no longer have access to their content through the end of June.
To add the Subscriptions element to the User account page (if it’s not already on the page):
- Go to Pages panel > User pages and open the User account page
- Open Add panel > Ecommerce
- Drag the Subscriptions element onto the User account page
Style the Subscriptions element and its child elements as you’d like, and publish your site.
While you can delete the Subscriptions element from the User account page, we recommend leaving it to ensure your users can view or cancel their subscriptions, and we recommend providing your visitors a clear way to access the user account page (e.g., via a button or a link).
Note: You must have the User account page open in the Designer to access the Subscriptions element. Only 1 Subscriptions element can be added to the User account page.
How to understand the subscription purchase flow for users
Note: Customers can only purchase 1 of each subscription that you sell. (The “Subscribe now” button will not be clickable if they’ve already purchased that subscription and it’s actively billed in their account.)
When a site visitor wants to purchase a subscription from you, they’ll need to go through a few steps after they click the “Subscribe now” button:
The checkout flow behaves differently depending on whether:
- The user is logged in to your site
- The user has an account but is not logged in to your site
- The user has not yet signed up for an account on your site
The user is logged in to your site
After clicking the “Subscribe now” button, if the user is logged in to your site, they will enter the checkout flow to complete their purchase.
The user has an account but is not logged in to your site
After clicking the “Subscribe now” button, if the user has an account, but has not logged into your site, they’ll be redirected to the “sign up” page. Here, they can choose to log in to their account.
After they’ve logged in, they’ll be returned to the page that displayed the subscription product they wanted to purchase.
They’ll need to click “Subscribe now” again to purchase the subscription, and will enter the checkout flow to complete their purchase.
The user has not yet signed up for an account on your site
After clicking the “Subscribe now” button, if the user does not yet have an account on your site, they’ll be redirected to the “sign up” page.
Before they can make their subscription purchase, they’ll need to sign up for an account. To sign up they should:
- Add their information into all required fields on the “Sign up” page
- Click “Sign up”
After they’ve signed up for an account with your site, they’ll be prompted to verify their account via the verification email that is automatically sent to them. Learn more about customizing User accounts emails.
Once they’ve verified their email by activating their account, they’ll be notified their account was created successfully, and will be automatically logged in.
After they’re automatically logged in, they’ll be returned to the page that displayed the subscription product they wanted to purchase. They’ll need to click “Subscribe now” again to purchase the subscription, and will enter the checkout flow to complete their purchase.
Good to know: Users cannot purchase a subscription alongside other products. A subscription purchase must be made alone.
How to customize subscriptions emails
To edit the email sent to your customers for subscriptions:
- Click the Settings “cog” icon in the left panel
- Choose Email in the Settings panel
- Scroll to Ecommerce emails > Subscription in the Email panel
- Click Payment failed, Payment successful, or Subscription canceled and make your edits
You can also edit the labels and other text strings in Subscription email templates so you can customize what will be received by users. Depending on the email template you’re editing, you can use the following dynamic fields to populate your email subject and other variables:
- Customer name
- Store name
- Subscription name
- Subscription price
- Purchased on
- Subscription canceled on
- Current billing date
- Next billing date
- Credit card failed date
Note: The Payment successful email will be sent to the user separately from the Order Confirmation email (located under Ecommerce emails > Order), and will only be sent after the subscription has renewed and payment has been applied successfully.
How to manage subscriptions
You can track and manage subscriptions and their corresponding orders from within the Designer.
Note: Subscriptions cannot be viewed or managed from the Editor.
With each successful subscription purchase, an “order received” email is sent to the store manager(s). Orders live in the Orders tab of the Designer and Editor. Here, store managers can learn about the total number of orders received, the total sales revenue, the average order value, and average order size. Learn more about Webflow’s Orders tab.
When you’re working in the Designer, open Ecommerce panel > Subscriptions to view a list of purchased subscriptions. Here you’ll be presented with an overview of each subscription’s details, including the:
- Order number
- Purchased on
- Last billing
- Next billing
You can filter your view by subscription status, including:
- Past due
To further narrow down the subscription list, you can search subscriptions by order number.
Cancel a subscription
You may need to cancel subscriptions at a member’s request, after deleting an access group, or after changing an access group from paid to free. You can cancel subscriptions, either individually or in bulk.
To cancel an individual subscription:
- Open Ecommerce panel > Subscriptions
- Click the subscription you want to cancel
- Click “Cancel subscription” and confirm your choice
To cancel subscriptions in bulk:
- Open Ecommerce panel > Subscriptions
- Click Select and check the checkbox next to each subscription you’d like to cancel, or check the checkbox next to Order Number to select all subscriptions
- Click “Cancel subscriptions” and confirm your choice
Note: Canceling a subscription does not automatically generate a refund for the user. Instead, you will need to manually issue a refund. Learn more about refunding customers.
Your users can also cancel their memberships if you’ve added a Subscriptions element to the User account page.
Good to know: If you delete a subscription-based product from your products Collection, that change will not also delete a user’s actively billed subscription that’s tied to that product. Existing subscriptions continue even after the product has been deleted and you republish the site. This allows for situations where you may want to honor existing subscriptions, but don’t want to continue accepting any new ones. To remove actual subscriptions, you need to explicitly cancel them. You cannot, however, disconnect Stripe if you have actively billed subscriptions.