Shopify

Innovate Outside The Platform: 20 Headless Commerce Examples That Expand What’s Possible

innovate-outside-the-platform:-20-headless-commerce-examples-that-expand-what’s-possible

Headless commerce is the “it” architecture of the ecommerce world right now. Depending on what you read, it’s either a must-have to reach customers in today’s fast-paced omnichannel world or a buzzword-bloated trend. 

The truth is, it’s probably somewhere in between. Headless commerce isn’t necessary for all ecommerce businesses. But for certain brands that require more customization and creative solutions that can’t be achieved with existing ecommerce software, headless can be a saving grace.

Headless commerce means decoupling the back end ecommerce functionality from the front end customer-facing touchpoints (or “the head”). The front and back ends can then share information seamlessly through APIs. 

By going headless, a business might be able to choose a powerful commerce platform that doesn’t perfectly suit their needs and then customize it by using a separate content management system (CMS), digital experience platform, (DXP) or progressive web app (PWA), among many other options. 

In this article, we’re sharing 20 businesses who went headless—including what their tech stack is composed of, what problem they were looking to solve, and how it all worked out. 

Table of Contents

  1. Health & beauty
  2. Fashion
  3. Food & beverage
  4. Home furnishings
  5. Entertainment
  6. Manufacturing & wholesale
  7. Automotive

Health and Beauty

ILIA Beauty

image1

ILIA is an award-winning beauty brand revolutionizing the clean makeup industry. The business was growing fast and needed a look as flawless as its product. 

The challenge: As it grew exponentially, ILIA was happy with how its Shopify Plus store was performing. But it increasingly wanted the flexibility of a headless tech stack to be nimble with different content types as it scaled. 

The solution: By using the Shopify Plus engine on the back end and leveraging the Nacelle headless commerce platform to develop a PWA front end, ILIA has been able to improve the customer experience. The site reduced page load speeds by nearly 50%, and thus saw fewer would-be customers bouncing, and an overall 18% decrease in exit rate. On the developer side, there’s been an increased efficiency by switching to headless, with 20% faster deployments.  

Lancôme

image8

One of the most well-known and valued brands in the world, Lancôme is a French seller of luxury perfumes and cosmetics that realized it needed to adapt to a changing world. 

The challenge: Way back in 2016, Lancôme noticed its traffic was changing—for the first time ever, mobile traffic was eclipsing desktop traffic. The business needed to adapt its site in order to meet the new ways customers were shopping. Lancôme considered building a native app but realized that only made sense for frequent shoppers. Instead it wanted to create a fast, engaging native-app-like experience that would be accessible to all visitors.  

The solution: Launching its new site in 2017 (and thus a fairly early adopter of headless), the fragrance giant used a ​​PWA, Mobilfy, to deliver a fast, app-like experience on the mobile web. This resulted in a 17% increase in conversions, 53% increase in mobile sessions on iOS, and 8% increase in conversion rates on recovered carts via push notifications.

Naked Labs

image3

For the health-minded consumer looking beyond home scales that only measure weight, Naked Labs offers a product that does full 3D scans to help users better understand their body composition. The scale is able to deliver results to an easy-to-use app.  

The challenge: Naturally, the complexities of its product require a fairly customized tech stack. The website needed to be very content-forward and demonstrate what the product is capable of through 3D-animations. Because the product is more expensive, content is also very important to educate the consumer on its value, as they do research prior to purchase.

The solution: Naked Labs uses Shopify as its back end ecommerce platform and a Contentful CMS on the front end. This enables the brand to be highly flexible and update content as needed. 

StriVectin

image9

Skin care brand StriVectin offers customers anti-aging creams and serums, and includes helpful content like a skin ID analysis to help them choose products best suited for them. 

The challenge: Around 2019, StriVectin was using Magento for its ecommerce store, but was frustrated with stability challenges. The business wanted to move to a new ecommerce platform but needed powerful content management tools to house its blog and information on some of the science behind the products. 

The solution: StriVectin migrated to Shopify to power its core product information, inventory management, and checkout experience. It then used Prismic CMS to handle content. StriVectin also utilizes Gatsby to mesh everything together seamlessly. Following launch, it saw an immediate and sustained 20% increase in organic traffic. 

Fashion examples

Hodinkee

image17

The Hodinkee website isn’t just a place to buy watches, it’s where lovers of watches and all things horology go for education, entertainment, and discussion. 

The challenge: Hodinkee’s business model is very content-forward. In addition to watches, it offers podcasts, videos, articles, and more that all celebrate horology and demonstrate expertise in fine craftsmanship. 

The solution: Another early adopter of headless, Hodinkee rebuilt its website more than seven years ago, based on a decoupled architecture. The business built off of Shopify and designed its own custom CMS. As representatives of Hodinkee explained during the launch: “This new website will allow us to continue to create richer and more in-depth content for our readers, and to present it in a way that is (if we humbly say so ourselves) absolutely stunning.”

KOTN

image11

Kotn is an ethically and sustainably minded fashion brand whose goal has always been to produce clothing that doesn’t compromise on quality, price, or the integrity of the people making it.

The challenge: While Kotn was initially able to do everything it needed with its Shopify Plus store, over time, as its  product offerings grew, certain listings required cumbersome workarounds for ecommerce merchandisers. Additionally, it had two separate Shopify sites served by the same content site. Kotn realized it could solve these issues with a more permanent workaround: a headless build. 

The solution: Kotn used the Shopify Storefront API to consolidate two stores into one, powered with a new CMS called Sanity, along with custom product pages and checkout. Kotn’s headless model also allows it to use React, which means its in-house developers can build reusable components that aren’t only consumer facing but also extend throughout the rest of the internal application.

Nike

image16

You may have heard of a little shoe and athletic apparel store called Nike—but did you know this sports accessory giant too has gone headless with its site? 

The challenge: Nike went headless because it wanted a strategy that was mobile-first to take advantage of the younger market segment that is increasingly shopping on their phones.

The solution: The new site was built with React SPA combined with Node.js (an open source JavaScript environment) back end for front end (BFF). A BFF architecture means that multiple back ends are developed to address the needs of specific front end functions they connect to. The new configuration enables Nike to optimize not only on mobile but across all pages. In the time since launch, Nike has gradually increased market share over competitor Adidas. 

Under Armor

image6

A fitting follow-up to Nike above, Under Armor is another well-known brand outfitting athletes of all abilities. 

The challenge: Under Armor manages thousands of stores across 30 markets and includes fitness centers and retail. The brand needed a website that could bring all of that together in a cohesive customer journey, so it turned to headless to find it.  

The solution: Using Demandware on the back end, Under Armor leveraged Mobilfy to create a PWA on the front end—one of the earliest brands to do so. The result was a faster and more seamless customer journey that makes it easier to navigate from product pages to categories. After launching the new site, Under Armor saw double-digit revenue growth and three times the return rate.  

Food & beverage

Blue Diamond

image10

Blue Diamond sells all things almonds, both in-store and online. With over 100 products and 100 years of history, the business has a lot of content to pack into its website and online store. 

The challenge: Redesigning its website for the first time in more than 10 years, Blue Diamond needed an organized, purposeful online store that could serve all its different customer needs. It wanted a brand website that felt cohesive, while also maintaining unique identities for different product lines. 

The solution: Blue Diamond partnered with Planetary to build its website with Shopify and React, backed by Contentful for the CMS. This created complete flexibility to display all of the different pages and content types. Additionally the Blue Diamond team can now easily update site content, create pages, and add and update products without developer resources. Blue Diamond utilized the Shopify API to create a seamless integration with the rest of the website. The website has seen an 85% increase in organic traffic and a 15% decrease in bounce rate. 

Seedlip 

image13

Seedlip produces high-quality, non-alcoholic spirits.

The challenge: Non-alcoholic beverages are having their moment—Fior Markets estimates that the global non-alcoholic beverages market will grow from $923 million in 2020 to more than $1.7 trillion by 2028. But it’s also a very competitive space for digitally native vertical brands. Seedlip needed a website that could produce an exceptional customer experience that would draw in new visitors, convert them to customers, and keep them coming back.

The solution: To achieve the digital experience it wanted, Seedlip was an early adopter of headless. The drinks brand uses Shopify on the back end and built a custom Vue.js front end that enables it to customize and provide incredible detail at every step of the process. 

Home furnishings

Burrow

image2

Designed to fit in every home and taste, Burrow offers slick, modern modular furniture that can be modified and easily assembled by the customer. 

The challenge: In looking for an ecommerce platform to launch its site, Burrow found that out-of-the-box options weren’t meeting its needs. The business needed a non-standard checkout experience, including the ability to delay orders and require signature on delivery. The brand also needed additional customizations to achieve the shopping experience its customers demanded.  

The solution: Burrow used a headless solution with BigCommerce on the back end and a custom CMS on the front end to achieve its site. Content is easy to update and maintain, so the business is able to launch products faster and provide the desired customer experience. 

Overstock

image4

Selling primarily furniture (but also bedding, jewelry appliances, and more), Overstock has risen to become a go-to internet retailer for home goods. 

The challenge: The sheer volume of content on Overstock can be overwhelming, so the site needs to be well organized and easy to search in order to help customers find what they want quickly. Other requirements to keep visitors from bouncing to competitors: fast loading time and overall seamless experience.

The solution: Overstock rebuilt its site with a headless approach, turning its product research and product browsing pages into interactive SPA pages. An SPA, or single page application, updates via API calls, resulting in nearly instant page transitions. After updating its site with a headless approach, Overstock saw a 36% increase in conversion rates. 

Verishop

image15

Verishop connects shoppers in the market looking for everything from home goods to clothing with independent designers and brands. 

The challenge: Like Overstock, Verishop is a multi-brand retailer that offers a large array of products in different categories that need to be easy to search. Because Verishop offers work from multiple designers, it also needs to be able to offer tailored experiences at brand-specific URLs. 

The solution: Verishop leveraged Shopify Plus and Contentful CMS to create its headless ecommerce store. The result is a website that makes it easy to browse and to find specific items. 

Entertainment

Complex Networks

image14

Complex Networks is a global youth entertainment network across big pop culture categories, including streetwear and style, food, music, sneakers, and sports—known for its much-hyped annual multi-sensory convention, ComplexCon. 

The challenge: When the 2020 ComplexCon was canceled due to the COVID-19 pandemic, Complex Networks saw an opportunity to adapt its business model. It wanted to create a virtual version, but one that would be truly immersive, where visitors could not just make purchases but also engage with brands and discover new trends. 

The solution: Going headless was necessary for Complex Networks because it was creating something both innovative and complex: a 3D ecommerce-enabled video game where users can freely move, explore, and experience. Building off the Shopify Plus platform, ComplexCon partnered with design and experience agency Jam3 and Shopify Plus Agency Partner Riess Group to create an augmented reality front end experience that could live up to the hype. 

LEGO

image18

Much like Nike before it, LEGO is a brand that needs no introduction, as these colorful toy bricks are a staple for young builders the world over. 

The challenge: Back in 2017, the iconic toy brand began facing difficulties with its ecommerce website. It was running on a traditional monolithic ecommerce system and was unable to scale enough to keep up with customer demand. LEGO had begun to invest in React on the front end, but realized its back end system was what was holding it back. 

The solution: LEGO launched its new site on commercetools in 2019. The result is a much more reliable site that also provides a better customer experience. LEGO has also found that moving headless has given its teams more independence to make updates, leading to faster product rollouts. 

Manufacturing & wholesale

Redbox

image12

Known for their red movie rental kiosks, Redbox also has a strong ecommerce presence that allows shoppers to rent or buy movies on demand. 

The challenge: Because its content is highly visual, Redbox needed a solution that could allow it to display visuals in a highly engaging homepage without losing page speed. 

The solution: Redbox opted to launch its storefront using an SPA, like Nike and Overstock, above. The result was a more immersive experience, responsive visual content, and no loss of performance. 

Johnstone Supply

image5

With more than 422 stores across the United States, Johnstone Supply is the leading cooperative wholesale distributor in the HVAC industry. 

The challenge: Johnstone had two issues: 1) its catalog had an enormous 80,000 SKUs, with 1,200 possible product attributes, and 2) its customer base of contractors increasingly needed fast, easy mobile access to product information while out in the field. 

The solution: The wholesaler chose to build its site on Elastic Path to use APIs to share necessary data between stores efficiently. Since adopting its new decoupled and decentralized website, Johnstone has improved customer experience across channels and increased speed to market for new products. It’s also able to handle its increasing volume of product data easier. 

Pella

image7

Pella is a leading manufacturer and designer of doors and windows for new construction, remodeling, and replacement. 

The challenge: Pella has both B2C and B2B use cases and needed a custom-built system that could provide a seamless path to purchase for both. 

The solution: Elastic Path Commerce Cloud hosted on Amazon Web Services was the solution Pella opted for. On the new site, customers can easily choose whether they are a homeowner or professional contractor, which personalizes the experience right from the homepage. The headless solution provided the elevated customer journey the company needed and also reduced cart abandonment. 

Automotive

Audi

image20

Audi is a luxury German car manufacturer whose products represent high quality and sporty design. 

The challenge: Audi needed a website with the flexibility to match its changing customer requirements. It needed a tech stack that could be fast and adaptive. 

The solution: The car brand used commercetools as its commerce platform on the back end and integrates with specialized services on the front end. The ecommerce functionality also integrates with the in-car technology, so customers can purchase car upgrades and additional features through an app or in-car settings. 

Cazoo

image19

Cazoo buys, reconditions, and resells previously owned vehicles online. Customers can browse thousands of cars in-stock and buy them online to be delivered to their door in as little as 72 hours. 

The challenge: Buying a big-ticket item online site unseen is always going to require a superb customer experience to demonstrate trust and reliability. Cazoo’s business model was no exception. Due to the complex logistics of its business, Cazoo opted to launch with a headless platform.

The solution: Cazoo launched its headless site on commercetools in 2020. The site features advanced checkout processes that allow customers to purchase one car with multiple payment options. Another feature that supports Cazoo’s business model is the ability to create custom and adaptable bundled products and auto services. 

Conclusion

Does your ecommerce business need to go headless? 

The answer is: maybe.

The key is not to approach headless as a cool new thing that can revolutionize your business. Instead, consider the problems you’re currently facing. Can they be solved with your existing system? And if not, would diversifying your tech stack help?

The examples in this article are all businesses that found success with headless because they had specific problems that going headless was able to solve. If that mirrors your journey, check out our guide to learn more about headless commerce.

This originally appeared on Shopify Plus and is made available here to cast a wider net of discovery.

Subscribe to Podcast

Top 1% most popular show out of 2,729,419 podcasts globally!

eCommerce Fastlane | Shopify Podcast For DTC Brands | Growth Marketing Strategy For Entrepreneurs | Listen Notes