The key elements of high-converting subscriptions for Shopify

November 15, 2019

medium

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.

Snapshot of the custom subscription flow for Sock Fancy’s monthly sock subscription
Snapshot of the custom subscription flow for Sock Fancy’s monthly sock subscription

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.

Depending on your business, offer both the option for a single purchase or subscription purchase.

Offer an immediate discount (e.g., 10% off) for choosing to subscribe. This can help turn one-time customers into subscribers.

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.

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.

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.

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.

Multi-Plan Example

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

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.

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.

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.

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>

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:

Screen Shot 2019-11-21 at 2.24.17 PM

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.

https://perfectlypeckish.com/pages/get-started

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.

https://www.hemper.co/products/the-glassentials-box

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.

Snapshot of the custom subscription flow for Sock Fancy’s monthly sock subscription
https://sockfancy.com/products/sock-subscription

DRINK METTA
Beautiful site that leads to a subscription from the main call to action button on the landing page.

https://drinkmetta.com/

Scratch Coffee
Nicely designed flow that reveals only the needed options as the customer goes through the subscribe flow.

https://www.scratchcoffee.com/products/coffee-subscription

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.

https://foreignaffairwinery.com/products/wine-club

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:

  1. They use our Dynamic Discounts feature to give discounts on future shipments to reduce churn and they market it well.
  2. 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 ;-)

Morgan Wowk

Written by Morgan Wowk

Software Developer at Bold Commerce in the heart of Canada. Love writing code and making a difference every day.

Search the blog!
Winter graphic with text Sleigh the season
  • Kickbooster-affiliate-marketing
  • Start a drop shipping store on Shopify
  • Choosing
  • How product photos can make you more money
  • How to strategically price your products
upsell-after-checkout