Operations

Choosing Between Headless Commerce vs Traditional Commerce

choosing-between-headless-commerce-vs-traditional-commerce

In this post, we illustrate how complex retailers integrate headless and traditional commerce to:

  • Offer unique customer experiences that create competitive advantages
  • Streamline operations so developers can focus on higher-value tasks
  • Leverage the strengths of each solution to grow sales

You’re given the illusion of choice. When evaluating the appropriate architecture on which to build your omnichannel business, the content often pits headless commerce against traditional commerce. It’s one versus the other.

But the truth is: Alternative combinations exist.

Rather than an either-or decision, it’s about selecting the platforms, systems, and tools to deliver custom commerce experiences anywhere in the world, which often requires marrying both headless and traditional commerce.

The complexity of platforms

Here’s a revelation: Sometimes an out-of-the-box solution can’t provide all of the functionality a complex business needs. Consider Babylist, a platform for expecting parents to create online registries for gift-givers. In an age when seemingly everyone claims they’re a platform, Babylist truly is.

Expecting parents can add items to their registry from any online store. This includes Babylist’s online store and their competitors’. If a product has a URL, parents can add it to their registry. This means parents and gift-givers can:

  • Compare product quality
  • Shop the internet for the best price
  • Leverage age-appropriate content
  • Get guidance on the fit

Importantly, Babylist must optimize for two distinct customer journeys; one that allows expecting parents to easily create a registry, and another so friends and family can purchase items on the registry from anywhere on the web.

Babylist has a unique user flow: The shopping isn’t done from a product catalog as is generally the case on a traditional ecommerce site. Rather, gift-givers using Babylist are shopping the expecting parents’ registry, which must pull products from all over the web. Further complicating matters, Babylist lets shoppers choose to buy their gift online or pick it up in-store.

Traditional ecommerce solutions weren’t engineered to simultaneously accommodate multiple user journeys that seamlessly pull items from outside a brand’s own product catalog, so a headless architecture seems in order. But you’re wrong if you think traditional commerce solutions don’t have a key role to play.

Customized chaos

Natalie Gordon was pregnant with her first child when she learned that the online registry experience was sorely lacking. “As a former software engineer at Amazon, I expected ease and simplicity,” Gordon recalls. “What I found was the opposite. My choices were to stick with a single retailer or manage multiple registries.”

Two weeks before giving birth to her first son Max, Gordon launched Babylist to create the ultimate baby registry experience. In the years that followed, Babylist would grow to include a variety of SaaS tools: payment processing software, a sales tax solution, address validation functionality, fraud detection, and order status customer correspondence.

Gordon had built her own custom end-to-end ecommerce architecture, neither wholly headless nor traditional. It had worked well during Babylist’s infancy, but now that Gordon had filled a niche in the market, the business was scaling quickly.

To keep up, Babylist engineers were increasingly investing time building the platform’s capacity and functionality. “We couldn’t keep up,” says TJ Moretto, Babylist’s Director of Engineering.

Integrations with warehouses were breaking, and returns were a nightmare. As Babylist grew, the demands became greater. The company had to expand its capabilities including the ability to accurately collect sales tax in all 50 states. “We were writing thousands of lines of code [on tax calculations and fulfillment integrations] instead of focusing on building a better registry experience,” Moretto says.

“That was the inflection point. It was ridiculous that we spent six weeks working to fix something that had already been invented.”

How headless commerce works

Headless commerce decouples the front-end customer experience from the back-end technology infrastructure. Generally, headless positions brands to push content to the front end via a content management system (CMS) instead of through their commerce platform.

Besides the flexibility to turn any customer touchpoint beyond your ecommerce site into a digital storefront, the benefits of decoupling include:

  • Speed to market

Splitting content from code allows front- and back-end work to be done simultaneously in the environment of their choice which results in faster deployments

  • Increased personalization

Go beyond ecommerce themes to flexibly build tailored customer experiences wherever your customers are

  • Increased control

Build a custom enterprise architecture with powerful APIs that integrate your tech stack, all in the programming language of your choice

It’s reasons like these that prompted Moretto to integrate Babylist’s headless architecture with the best traditional commerce features. In November of 2018, Moretto and his team began integrating Shopify Plus into the company’s technology stack. After completing its transition in 2019, Babylist’s performance improved significantly.

In addition to revealing key performance indicators (KPIs), Babylist has generously agreed to diagram its ecommerce architecture to help guide other brands that are evaluating headless commerce vs. traditional commerce setups.

Beneath Babylist

Babylist’s unique value propositions—allowing expecting parents to add products from anywhere on the web as well as empowering gift-givers to purchase online or in-store—give them its competitive edge. As such, Babylist prefers to strategically invest in improving its customer experience rather than the technology that underpins it.

Moretto credits this technical architecture with freeing his development team to focus on higher-value tasks rather than writing thousands of lines of code for problems that had already been solved, like taxes:

Image from Babylist

Below is an insider’s look into Babylist’s technology stack:

Content management system (CMS)

Traditional commerce platforms lack the dual functionality Babylist needs for gifting. Instead of adding items to their carts, expecting parents are asked to add them to their registry, and the gift-givers are the ones who add to cart (though they can first reserve them). A traditional commerce solution’s catalog isn’t built to support Babylist’s unique use case when you consider how its users will view content outside of, or in addition to, Babylist’s catalog. Moretto relies on its CMS (Contentful) to simultaneously push content to its catalog across multiple channels. This includes custom design layouts, catalog updates, buying guides, and emails filled with helpful parenting and pregnancy content. The architecture allows Babylist’s marketers to make quick updates and changes on their own, without having to rely on developers.

Order management system

Before the transition, Babylist had multiple developers working on a custom order management solution (OMS). But now, Babylist uses Shopify’s OMS as its back-end administrative interface. “Shopify streamlined order management for us,” Moretto says. “It’s one hundred times better than what we had.” The standard order data model accounts for all of the nuances of payments, refunds, gift cards, and discounts, making it much easier to build customizations.

Babylist’s fulfillment network is vast: It operates its own warehouse, partners with two third-party logistics (3PL) providers, and has two dozen dropshipping partners. Babylist credits its OMS for helping it integrate with these partners more quickly. Moretto also credits the OMS with significantly improving customer support communications. As an added bonus, since the OMS gives Babylist a birds-eye view of all orders, its customer support team can easily pull data and update customers on their order status

Checkout

Babylist’s original custom tech stack included a one-page checkout that Moretto concedes was little more than a giant form. He describes it as clunky and unable to support discounts, and he doesn’t doubt it negatively impacted Babylist’s conversion rate. The company now uses Shopify Plus’s checkout which can be customized with its own branding. With a headless architecture that incorporates the elements of traditional commerce solutions, Babylist reaps all of the benefits of having an industry-standard checkout while still delivering the best registry building experience possible.

“Because of our Shopify integration, we were able to easily add checkout in our iOS app in 2019 and will be doing the same in our Android app in 2020,” says Moretto.

Pre-built integrations

Importantly, Moretto cites the importance of robust APIs and pre-built integrations for anyone considering a headless architecture that combines traditional commerce solutions. Remember the thousands of lines of code Babylist’s developers wrote for its original custom solution? Moretto says much of that code was created to integrate systems and tools.

“We were building all of these integrations ourselves,” Moretto says. “Once we realized Shopify had already built them, all of that code writing went away and our developers could focus on building a better registry experience.”

Moretto credits Shopify’s collection of APIs for helping Babylist’s developers solve problems much faster. Well documented and articulated APIs, Moretto suggests, help development teams become self-sufficient.

“The Shopify APIs are exceptional,” Moretto says. “Comparing these to other platforms is night and day. This makes it so much easier to build your own experience and be productive.”

Control, safety, and sophistication

Headless architecture gives Babylist full control over the baby registry building experience. While Moretto says the customer experience he offers isn’t easily replicated with a standard ecommerce catalog, integrating a traditional OMS and checkout means Babylist can reap the benefits from both headless and traditional commerce.

“We’ve taken what Shopify has learned and integrated it into our model,” Moretto says. “There’s no reason to reinvent sophisticated solutions that already exist.”

It’s a foundation on which Babylist has achieved significant growth in 2019:

  • Gifts given from the Babylist platform grew 102% year over year (YoY)
  • Babylist order volume increased by 145% YoY
  • A 300% increase in monthly iOS app checkouts after the first month

“We wanted ultimate control which feels safer,” Moretto says. “The new architecture plays a key role by freeing up resources to focus on more strategic efforts and provides a more stable and standard purchasing experience.”

Your choice regarding architecture isn’t binary, whether you decide to go headless, the traditional route, or a creative mix of both. It’s a flexible combination limited only by your imagination.

This article originally appeared in the Shopify Plus blog and has been published here with permission.

About the author

Steve Hutt

I'm obsessed with entrepreneurship, commerce, and Shopify. If you have the desire to implement what's working today for direct-to-consumer brands on Shopify, I'm excited you're here! Get the Shopify help you need. This industry blog and podcast is my digital brain where my guests and I share cutting-edge marketing strategy, must-have Shopify apps, and marketing platforms that will help you build and scale lifetime customer loyalty. To do this, I'm part of the Merchant Success Team at Shopify Plus and host of the eCommerce Fastlane Podcast.