ButcherBox increases conversion rates and accelerates development with Shopify’s headless solutions

ButcherBox is one of the most beloved direct-to-consumer meat brands on the planet. What once began as a business with a simple mission to make high-quality meat more accessible, ButcherBox now generates nine figures in annual revenue without any outside funding.

But as their customer base grew, ButcherBox knew they needed to deliver a faster and more seamless ecommerce experience. David House, principal engineer at ButcherBox, told us that the company gained several key benefits by migrating to a headless architecture on Shopify, including:

Read on to learn more about ButcherBox’s migration to a headless architecture on Shopify—and the tangible benefits it had on the business.

Watch the full conversation here

The challenge: Create a more cohesive brand experience

ButcherBox has been in business for nearly a decade, but they recently identified a need to create a more consistent brand experience across its website. “We didn’t want customers to feel like they were having one experience in the signup flow and a completely different one on the membership side, which are both huge growth drivers for us,” David tells us.

ButcherBox initially consolidated around a static-first framework. David says that while they gained some performance benefits by hosting their front end on the CDN layer, his team quickly realized it was virtually impossible to make anything dynamic.

“Moving to static presented some unique challenges,” David continues. “If we ever wanted to add A/B testing or personalization, we lost all of the benefits of a statically rendered and hosted page.”

Contact a Shopify Plus expert today 

The solution: A higher-performing and more reliable headless architecture on Shopify

Before migrating to Shopify, David’s primary goal was simply to build a good checkout experience, which he says is a much bigger challenge than it appears on paper.

“Customers will find every way to navigate through your interaction paths, some of which you could never have imagined.” David continues. “Plus, there’s a lot of complexity when it comes to collecting payment from your customers.”

Over the past year, ButcherBox began what David calls an incremental migration to Shopify’s headless solutions. Their first step was tackling the checkout experience, which the team migrated to a webhook-based flow earlier this year.

ButcherBox also used Shopify’s official development stack, which consists of Hydrogen and Oxygen. Hydrogen is an opinionated but modular stack built on top of the React-based Remix framework. It provides commerce-optimized components, hooks, and utilities preconfigured for Shopify’s APIs. When retailers are ready to launch, Oxygen is Shopify’s globally distributed hosting solution that gives you the fastest path to deploying a Hydrogen store. According to David, this combination of tools helped ButcherBox create faster and more personalized online shopping experiences on a variety of its pages.

“The caching layer has been critical because we make requests to Shopify, our A/B test provider, and our headless CMS to resolve feature flags and experiments before the page is rendered,” David continues. “Prior to migrating to Hydrogen, customers would have seen a loading spinner any time they visited a page with dynamic content or an A/B test.”

The result: Increased conversion rates on a powerful and more flexible headless platform

David tells us that going headless on Shopify has helped ButcherBox increase conversion rates and simplicity.

David says that he’s eager to see how features such as Checkout Extensibility will impact ButcherBox over the years to come. He adds, “I'm excited that Shopify will be a catalyst for us to revisit a lot of beliefs that we've built up over time about how we need to run as a business.”