The key elements of high-converting subscriptions for Shopify
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, 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.
Subscription frequency
Allows the customer to choose how many days, weeks, or months there are between each order.
Prepaid option
Enables customers to prepay for a number of orders in advance. Often times this comes with an additional discount compared to a regular subscription.
Quantity
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.
Learn more and install Bold Subscriptions
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.
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.
View our trained agency partners
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.
BoldSubscriptions.js
A new addition to the Bold Subscriptions developer suite is the official bold-subscriptions-js npm package.
This package can save you time developing and provide a clear path to a finished product, helping you avoid errors and saving you hours of debugging time. It includes detailed exceptions and error messages to help you quickly and reliably develop custom subscription flows.
You can install it as a dependency of any node application (e.g., a React app) or include it as a script on your Shopify theme. It is a lightweight, 30kb addition to your theme or application.
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.
Building Your Own
The two examples above are a great starting point to understand how the BoldSubscriptions.js Javascript API works. For your own implementation there are a few improvements I would recommend.
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.
<form class="no_ro_widget">
// custom elements
</form>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.
Learn more about metafields on Shopify
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:
<script>{% assign product = all_products['product-handle'] %}
{% assign group_id = product.variants.first.metafields.bold_rp.rp_groupd_id | default: false %}
const groupId = {{ group_id }};
// use groupId</script>
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.
Summary
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.
Further Examples
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!
Perfectly Peckish
Nice flow that takes the customer down a journey. We see these convert really well.
Hemper
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.
Sock Fancy
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.
DRINK METTA
Beautiful site that leads to a subscription from the main call to action button on the landing page.
Scratch Coffee
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.
Vital Proteins
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.
Kathy’s Table
Great multi-page flow with a custom meal-plan box builder at the end.
Beantown Roasters
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.
A couple other nice site I like are Real Eats, Nutri-Rich.
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 ;-)
