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 over 11,000 brands, including some of the biggest subscriptions 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 subscription model.

Get our free ebook: 7 Subscription Models to Master

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, a take a look at them later on in this article.

“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 — and stay subscribed.

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.

But 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 making their selections — 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.

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

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

On-demand webinar: Uncover winning techniques behind top subscriptions

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.


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.

Get our free ebook: 7 Subscription Models to Master


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 example above is 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 or types of subscription models and their compatibility with the various cart modes listed below.

  • Single Product ModeTo 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

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.


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.

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.

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

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.

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 ;-)

On-demand webinar: Uncover winning techniques behind top subscriptions

Want to know what's new?

Get the knowledge and inspiration you need to build a profitable business — straight to your inbox.

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.

Related Articles