This past year, ButcherBox, a leading direct-to-consumer meat brand, made a significant move to Shopify, adopting a headless architecture using Hydrogen and Oxygen. This transition wasn’t just a simple platform switch; it involved a carefully planned, phased approach to integrate their existing custom systems and enhance their customer experience. David House, Principal Engineer at ButcherBox, sat down to discuss the journey, the challenges, and the wins.
The Incremental Approach to Shopify
ButcherBox didn’t jump headfirst into a full migration. Instead, they opted for a phased strategy, starting with integrating Shopify’s checkout into their existing signup flow, which was built on Gatsby. This allowed them to leverage Shopify’s robust checkout system while keeping their current member frontend intact. "Our first big deliverable was, okay, customers should be able to purchase subscriptions in Shopify," David explained. This initial step was crucial for testing the waters and ensuring a smooth transition before moving the entire acquisition funnel to Hydrogen and Remix.
Why Shopify and Hydrogen?
David expressed excitement about Shopify’s embrace of edge execution and co-located data, particularly with the Storefront API. This was a key factor in their decision, as it addresses a major challenge in running frontends at the edge. The reliability of Shopify’s checkout was also a major draw. "Checkouts are really hard to get right," David noted, highlighting the complexity of handling edge cases and payment processing.
Before the migration, ButcherBox utilized a custom, bespoke system. While this offered flexibility, it also presented challenges, especially when trying to implement dynamic features like A/B testing and personalization. Static site generation, while good for performance, made these dynamic elements difficult to manage. "Static is really hard to make dynamic," David said. This led them to embrace Remix, a framework that allows for dynamic rendering by default, which is critical for their A/B testing strategy across nearly every page.
Mastering Subscriptions and Merchandising
ButcherBox’s subscription model is complex, involving custom boxes with individual picks and bundles. They decided to bring their existing custom subscription app over to Shopify rather than using a third-party solution. This was a strategic move, as their app had evolved over years to handle intricate technical debt and specific business logic. "In many ways, we already had a custom subscription app," David shared. This allowed them to maintain a consistent brand experience across their signup and member flows, optimizing for user experience and load speed.
When it came to modeling their products, Shopify provided an opportunity to start fresh. They simplified their product model to "boxes," "bundles," and "picks," making it easier to manage pricing and product variations. This streamlined approach fed into their subscription API and ultimately into their cart, ensuring a cohesive customer journey.
The Impact of Hydrogen and Oxygen
The combination of Hydrogen and Oxygen was key for ButcherBox. "Having the co-located execution and data is really important to us," David stated. The caching layer provided by Hydrogen, specifically the "stale-while-revalidate" tools, was also a significant benefit. This allowed them to serve dynamic content, including A/B test results, without the user seeing loading spinners, thus improving the overall user experience and performance.
They found that Remix, built on web standards, simplified development by reducing the need for vendor-specific abstractions. "The majority of the time we’re spending our time in Mozilla docs, looking up web APIs, not in how does this vendor do this thing?" David remarked. This focus on core web technologies made their development process more intuitive and scalable across their teams.
Key Takeaways
- Phased Migration: A gradual approach to adopting Shopify, starting with critical components like checkout, minimizes risk and allows for learning.
- Headless Benefits: Embracing a headless architecture with Hydrogen and Oxygen provides flexibility, edge execution, and co-located data.
- Custom App Integration: Successfully migrating existing custom applications, like ButcherBox’s subscription app, is possible and can preserve valuable business logic.
- Dynamic Content: Frameworks like Remix are crucial for managing dynamic content, A/B testing, and personalization, which are vital for customer acquisition.
- Developer Experience: Shopify’s well-architected APIs, infrastructure, and developer tools like Hydrogen and Oxygen significantly improve the developer experience.
- Simplicity and Conversion: The migration led to increased simplicity in their tech stack and a notable increase in conversion rates, even without changing the core user experience.
Lessons Learned
David emphasized the importance of embracing TypeScript and generating types from GraphQL APIs from the start. He also highlighted the value of tools like Vanilla Extract for writing type-safe CSS, which aids in creating a consistent component library. For integrating custom software, thinking of the system as a distributed system with clear API interfaces is key. This allows for gradual migration and interoperability, replacing discrete parts of the application while maintaining working systems.
Ultimately, the move to Shopify allowed ButcherBox to offload infrastructure concerns and focus on their core business: providing high-quality meat and a great subscription experience. "Shopify allows us to do that with less risk," David concluded, looking forward to experimenting with new merchandising patterns with greater agility.