For the past few years, I’ve had the opportunity to work at the forefront of subscriptions on Shopify. Everything from helping mom-and-pop retailers start selling subscriptions online, to developing core features of Bold Subscriptions that enterprise-sized businesses depend on.
This includes working on a powerful collection of APIs, webhooks, customer portals, integrating with Cashier for a better checkout experience, and creating custom subscription flows for merchants looking to enhance customer experience and increase revenue.
Our Shopify Subscription app powers 10,000+ of the largest subscription brands on Shopify. I’ve personally had the good fortune of working with a few hundred of these businesses. Through that, I’ve seen many different types of subscription flows and understand the importance of designing a flow based on a specific store’s products, customers, and type of subscription.
Today I’ll talk about ways to develop both the simple Amazon-esque subscription widget as well as multi-step subscription flows for stores with fewer, but more targeted, subscription products.
If you’d like to see some examples before I dive into it scroll to the bottom and then come back.
“What makes a good subscription flow?”
Some of the most successful businesses we’ve worked with are those who invest time into the steps their customers take before subscribing.
Rather than receiving one bag of coffee per week maybe the customer would prefer to receive four bags at the beginning of every month in a single shipment. Maybe they would also like to prepay for six shipments in advance to get a discount or for their convenience. How about allowing them to cancel or skip shipments any time? Giving the customers more control over the frequency and billing of their subscription increases the chances they’ll actually subscribe.
We developed Bold Subscriptions so you can easily build custom flows for any type of business. Whether you’re offering supplements based off recommendations from a detailed health questionnaire, or a simple monthly coffee delivery, Bold Subscriptions can provide a solution.
Before putting together fancy boxes, long pieces of text, and multi-step forms, it’s important to understand what approach is best for your store.
Knowing customers could potentially be adding several items to their cart, you don’t want them spending a long time selecting options for every product they add — this might be confusing and cause shoppers to abandon their order.
So if you offer products with lots of options, avoid distracting customers from their journey to the checkout with a complicated flow. Instead, give them a quick option to subscribe and choose their billing plan.
In contrast, businesses with fewer products like Sock Fancy (below) or FlexPro Meals do a great job of catering to their customers and allowing them to personalize their subscription. Since they only have a couple heavily customizable products, having a beautiful multi-step subscription flow helps drive their customers to buy.
Sock Fancy gives customers the power to choose a gender, style, quantity, and billing plan that works best for them, and even the ability to send subscriptions as gifts.
Elements of a Subscription Widget
Across all the different subscription widgets and forms you could create, there is a list of common elements and components that customers expect to see.
One time or subscribe
Depending on your business, offer both the option for a single purchase or subscription purchase.
Discount for subscribing
Offer an immediate discount (e.g., 10% off) for choosing to subscribe. This can help turn one-time customers into subscribers.
Compare-at price display
Displays to the customer the percentage and amount they are saving for choosing to subscribe compared to one-time purchases.
Allows the customer to choose how many days, weeks, or months there are between each order.
Enables customers to prepay for a number of orders in advance. Often times this comes with an additional discount compared to a regular subscription.
Give customers the option to order multiple quantities of the same product. If you’re building a subscription flow on an existing product form, you may already have a quantity option.
Getting started with Bold Subscriptions
We developed Bold Subscriptions to be super-flexible for eCommerce platforms like Shopify. If you’re selling subscriptions or thinking about selling them, there’s a good chance Bold Subscriptions has what you need to be successful. Tens of thousands of businesses around the world use it every day.
Ok, now for the good stuff where I’ll go through how to use Bold Subscriptions to develop custom flows for almost any kind of subscription a store can offer.
You can also pair Subscriptions with Bold Cashier, our powerful checkout app. Integrating with Cashier will expand your store’s functionality, giving you the freedom to customize your checkout, access advanced integrations with other Shopify apps, and boost conversions.
Exclusive features such as multi-currency subscription billing , one-click upselling after checkout and in email each month on subscriptions, utilizing Cashier’s one-page checkout, stored credit cards and much more…
Hire an expert in Bold Subscriptions
If you’re a merchant whose looking at building a more powerful custom subscription flow, we have a directory of approved experts ready to help you out.
If you have a developer using Bold Subscriptions or are interested in how it would all come together, here are the steps you can take to build a custom flow.
Add subscription to cart example
Here’s an example of a simple widget that will asynchronously add a product to the cart as a subscription. Modern shops and themes on Shopify will use this technique to add subscriptions to the customer’s cart without leaving the product page so customers can continue shopping.
A popular type of subscription flow allows customers to choose between a variety of billing plans.
Having your base subscription frequency (e.g., monthly) as well as the option to prepay on different intervals can be a good way to improve customer loyalty and increase capital. Offering a discount for the higher priced plans is a great incentive as well.
In the example above, you can see different functionality based on the type of subscription.
For monthly, this example calls the standard.directlyToCheckoutCashier method, making sure to pass in the click event from the form button.
For prepaid it is a little extra work but not too difficult.
It uses the widgetAPI getGroupInfo method to first fetch the subscription group data for that variant. Once obtained, we pull out the prepaid_length_id which is a required parameter to submitting to the prepaid checkout.
Finally, it calls prepaid.directlyToCheckoutCashier which will take the customer to Cashier’s checkout with the prepaid subscription.
Building Your Own
Choose the best cart mode for your subscriptions
Based on the type of subscription you’re offering, we support adding subscriptions to the cart alongside one-time purchases, subscribing to an entire cart just prior to checkout, or going directly to checkout with a single subscription product. See our list of subscription types and their compatibility with the various cart modes listed below.
- Single Product Mode
To go directly to checkout with a single subscription product, look at methods in BoldSubscriptions.js like directlyToCheckout.
- Multiple Product Mode
To add subscriptions to the cart alongside one-time products, look at methods like addToCart.
- Recurring Cart Mode
To have the customer choose to purchase the entire cart for one-time or subscription, look at recurringCartCheckout.
Give each subscription plan its own form
If you are offering multiple subscription types (e.g., standard, prepaid, convertible) on the same product page then having a separate HTML form for each can be helpful and lessen your development time.
The CodePen above goes the route of using the same form for all three subscription plans. The benefit to this is that any custom attributes and line item properties will persist no matter which button the user clicks on. If you asked for the customer’s favourite color on the product form, then using the same form for each plan will make that easy to submit later on.
The con of using the same HTML form for multiple subscription types is that you end up writing more code to manage the data you’re submitting to the API methods. This is because standard subscriptions have a separate function to call than prepaid subscriptions. For example, use standard.directlyToCheckout for standard and use prepaid.directlyToCheckout for prepaid.
By splitting each subscription plan into its own form, you have a very clear separation of form data. One form can contain all the inputs it needs for a monthly subscription, while the other form can contain all of that plus the additional prepaid inputs.
When it’s time to submit to checkout, you don’t need to worry about adding logic to call a different function based on the type of subscription.
Prevent the default widget from rendering
A common situation you may find yourself in is that in addition to your custom subscription flow you now have the default subscription widget rendering into your form.
This comes up if you’re working on a theme that also has the liquid installation for Bold Subscriptions completed. To prevent this you can add the no_ro_widget class to your custom form.
// custom elements
Get the group id using liquid
When you add a variant to a subscription group in Bold Subscriptions, it syncs up with the variant by assigning it the bold_rp.rp_group_id metafield.
Getting the group id through this variant-level metafield is more reliable than hard coding it in case the product is ever added to a different subscription group. You can access the group id in liquid like so:
Keep in mind the snippet above looks solely at the first variant. If you have multiple variants in a subscription group you need to make sure you use the appropriate group_id for the customer’s selected variant on the product form.
Bold Subscriptions is a powerful solution for subscriptions on Shopify. Beyond the default subscription widget our app provides, you can harness the power of custom subscription flows to provide customers with a more personalized experience.
To help you develop these subscription flows we have released our BoldSubscriptions.js npm package and CDN script.
Submit a request with our support team at any point with questions about using Bold Subscriptions.
We’re excited to see what you come up with! Leave a comment telling us about your plans for Bold Subscriptions or custom flows you’ve developed.
If you’d like to see a few great Shopify subscription examples and unique subscription flows using Bold Subscriptions, here are few ones I really like. Enjoy!
Nice flow that takes the customer down a journey. We see these convert really well.
Great example of product page subscription flow that reveals subscription options as needed. Click add to cart and you’ll see what I mean. First you select the subscription, then the frequency, then the payment plan. It’s laid out beautifully and doesn’t overwhelm the user.
Just a gorgeous subscription sign up page overall. Well laid out, big easy options. It really feels like you’re building a custom subscription just for you.
Beautiful site that leads to a subscription from the main call to action button on the landing page.
Nicely designed flow that reveals only the needed options as the customer goes through the subscribe flow.
Foreign Affair Winery
REALLY powerful options on this wine subscription. This is actually one of the biggest liquor companies in North America, they just launched a stand along Wine Box subscription. Make sure you checkout both the “You Decide” our “Let us Pick” options. Really powerful how they did that.
This is one of Shopify’s Top 50 shops! They have a great site all around but really nail subscriptions. Click subscribe up top and go through it. The details they lay out is really well done. Two things I like are:
- They use our Dynamic Discounts feature to give discounts on future shipments to reduce churn and they market it well.
- The other thing that they NAIL (that I wish more stores would implement) is even if you don’t subscribe on the product page, the subscribe option is still in the cart. When you’re testing it out make sure to add one of their subscription products as a “one-time” purchase and then look at the cart and you’ll see what I mean.
Great multi-page flow with a custom meal-plan box builder at the end.
I love how the subscription is built right into their home page. If subscriptions are what you do, put it front and center!
Little Wolf Coffee
Beautifully designed subscription wizard that only shows the info you need until you select an option. This doesn’t overwhelm the customer and takes them though a nice funnel.
What are some great online examples of subscription stores you’ve seen? I’d love to see them! Post them in the comments if you have any. Shameless plugs for your own site are welcome too, as long as it’s an awesome site ;-)