Fast-growing drinks ecommerce 31Dover was planning to launch a new brand, Off The Still, to sell a new subscription box for spirits directly to consumer online. 31Dover had some experience with subscriptions. They had already launched two subscription sites, The Gin Club and Clara Wine, using Shopify and an app extension called Bold Commerce. During this time, the customer base has grown from zero to thousands of subscribers.

This growth meant 31Dover started hitting limitations with Shopify. They were limited by Shopify’s templates, preventing marketers and designers to work together to create innovative, flexible customer experiences. Not being a native subscription platform meant that it was not possible to create variations of the same product page for different marketing efforts or audiences. There were operational issues having to work across two vendors like Shopify and Bold Commerce, like needing to manually adjust billing dates, not having reporting on discounts used by customers, and difficulty in calculating churn.

For Off The Still, 31Dover decided to do things differently to have more freedom in the design of the subscription shop and have more resilient subscription operations. Limio, a headless subscription commerce platform, helped with the implementation of the Limio Shop which included designing, building, and launching the website www.offthestill.com in only 4 weeks. End of August 2019, a new, blazing-fast site launched using Gatsby.

Customer goals

31Dover wanted to move to a platform that allowed them more freedom and flexibility without worrying about being locked in a template or facing operational issues down the line. They wanted a new site with a creative, differentiating design and to be able to innovate on the customer experience longer-term.

With monolithic applications like Shopify, customers have no flexibility outside of the template options - or they need to involve specialised developers in Shopify’s proprietary programming language. They are locked in the same template for the shop, checkout and manage my account, or need to hire expensive specialised developers. And because Shopify is not built for subscriptions, add-ons and plug-ins are necessary, which muddles the analytics and makes it hard to answer the most important questions such as 'where did my subscriber comes from?', 'what's my cost of acquisition?', or 'what's the lifetime value of subscribers?'.

Limio goals

After agreeing on 31Dover’s goals, we defined some of our own. Speed and performance were key since speed impacts conversion rate. A mobile-friendly design was also important as up to 80% of traffic from previous 31Dover sites was on mobile. We also wanted to make sure that the React components we created were flexible, so that 31Dover could change their mind and edit the components’ props directly in the Limio app without touching the code.

Most developers struggle with the steep learning curve associated with Shopify. The codebase is 15 years old. Limio relies on React, the most popular JavaScript framework in use today on over 90,000 websites. Our team wanted for anyone to ultimately pick up the React components we created and improve on them.

Tools

We implemented the following tech stack:

• Gatsby
• Limio
• Stripe
• Amazon CloudFront

Gatsby

Gatsby provides us with a superior developer experience and a fast site. This includes:

• Server-side rendering at build time
• Code splitting
• Image optimisation
• XSS Protection
• Easy SEO

Limio

Limio is our headless subscription commerce platform with a flexible API. The Content Management System (CMS) features in Limio allow for shops to be built with only using React components. React components are built in developer’s native tools, then imported in Limio as an asset and added to the Page Builder.

React’s component architecture simplifies building large websites by encouraging modularity, reusability, and clear abstractions. Marketers can drag & drop re-usable React components that developers created for them, and build their shop pages in Limio without needing to code.

Stripe is a payment provider that also provides some logic to manage subscription payments. We used Stripe to offer cards, Apple Pay and Google Pay on the Off The Still checkout, as well as managing the recurring payments post-order.

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment. Since Gatsby provides a build payload, we can host the site directly on Amazon CloudFront, which is both cheaper and more secure.

Our project plan was the following:

1. Design
2. Launch a coming soon page
3. Create a launch page
4. Launch site

After design approval, we set out to create React components that reproduced the design mockups. We didn’t work off any templates like a typical Shopify theme. While Limio has a set of existing components on Bit, it made more sense to start building a React component from scratch. Working without the constraint of templates meant that we could reproduce rapidly and exactly the design mockups.

After completing the coming soon page React component, we moved onto building the launch site. The launch site was structured as a series of full-height page with a scroll hijack between sections . The key element was a ‘navigate the journey’ map element where the user scrolls from one point to another alongside the map. The design was different on mobile - for example the map is stacked vertically and the various offers are available via an offer slider.

A particular challenge was the accordion FAQ which if closed fitted well on a full-height screen, but extended beyond the full screen once opened - breaking the scroll hijack on that element. We decided to create the page as a single React component, so we could define the interplay between different sections with the scroll.

To show the components live, we used Gatsby to put together the shop which included multiple landing pages as well as a checkout. Gatsby’s Node APIs made it possible to query the Limio API and create these landing pages based off of our simple page template. With the data & components retrieved from the Limio API, all we had to do was pass the data into our template, but to deal with the components it was a little more complex. We temporarily wrote our components to disk for the duration of the build and referenced them in our template so the build would treat them just like any other React component. Once the build was complete we had an easily deployable package for us to host which we did so using Amazon S3 & CloudFront.

Separately to building and deploying the shop, we used Limio’s native integration with Stripe to activate payment gateways such as Apple Pay and Google Pay as well as post-order billing capabilities.

Launch

Launch was very smooth. The site lives on a password protected URL of www.offthestill.com so we were able to conduct thorough testing of customer experience, analytics tracking, billing, and payments processes in live conditions.

Filip Nilsson, the head of subscription at 31Dover, had this to say about launch:

“Limio has done a really great job. They delivered the launch on time and on budget, and sweated the details.”

The website went well live within 4 weeks of receiving the initial design specs. The launch went well with orders being successfully created across Limio and Stripe. One month after launch, Off The Still has hundreds of subscribers with a conversion rate 0.5 basis points higher than the eCommerce site - an amazing 33% in relative terms. 

The Off The Still team now had a subscription shop that is fast, secure, can handle rapid design iterations, and ready to scale for the holiday season and beyond 🚀

How do I know if Limio is right for me?

If you're happy with cookie-cutter experiences and you just want an out-of-the-box solution, then a headless subscription commerce platform like Limio may not be for you.

However, if you value flexibility, speed and control, then Limio can be a good fit for you. It doesn't matter at what stage you are in launching. You could be launching a new box but wanting full flexibility over the design of your shop. Or you may be operating at scale, have outgrown your current platform and your marketers are clamouring for more control. Either way, you will need the appetite to build and create something new, to separate yourself from the crowd.

If that's you, get in touch at 👉 hello@limio.com.