8 Inspirational Examples of Brands Embracing Headless Shopify

Shopify is the market leader in offering brands an ecommerce platform from which to manage and sell products online. Shopify makes available to brands a website theme from which to build their online storefront. In recent years, however, Shopify has released new products and services that now support a “headless” approach to building online storefronts.

In this article, we’ll review 8 brands that embraced headless Shopify. We’ll highlight the problems these brands were trying to solve by going headless, identify the new technologies they selected, and discuss how going headless improved their business.

What is headless?

Headless refers to a new way of architecting a brand’s technology stack. Traditionally, an ecommerce brand’s tech stack was tightly integrated. The presentation layer, or front-end, would live alongside the back-end logic. When a user visited a product page, the server would pull product data from a database into a front-end template and dynamically serve that page to the user.

This approach to tech architecture, however, is increasingly becoming inadequate to supporting the types of user experiences customers have come to expect from ecommerce brands. With the introduction of not just mobile devices and tablets, but also watches, voice assistants, and IoT devices, brands need to consider supporting omni-channel experiences that a traditional tech stack is ill-equipped to handle.

It is also a hindrance to brands that need to scale as their business grows. As brands decide to launch new storefronts in international markets, where they need to offer localized experiences in order optimize conversions, the traditional tech stack can be more of hindrance than a benefit.

A headless approach solves these challenges by decoupling the front-end from the back-end. Brands can now support multiple front-end experiences and pull product and customer data from the back-end via an Application Programming Interface (API). This new paradigm allows brands to more easily support omni-channel experiences and multi-language storefronts, as well as improve the overall customer experience with personalization and faster loading webpages.

Going headless with Shopify

Shopify has a robust set of features and services to support brands that want to go headless. Shopify’s Storefront API, for example, makes available all your product, customer, and order data to any custom front-end application and is a critical part of supporting omni-channel experiences.

Hydrogen, Shopify’s React-based framework, includes all the components and tooling your brand needs to quickly stand up an online storefront. And with Shopify Plus, you can host your Hydrogen powered application on Oxygen, Shopify’s cloud-hosting platform.

Shopify Plus also offers additional features that improve the customer experience of headless storefronts. Multipass, for example, allows customers who have logged in on the headless front-end to not have to login again when redirected to the Shopify checkout page.

Want to learn more about going headless with Shopify? Read the Ultimate Guide to Headless Shopify.

The Feed

The Feed, a nutrition brand based out of Boulder, Colorado, examined a headless solution in order to improve site speed and the overall customer experience. The brand traces its origins to the Tour de France, where 8 years ago the company founder, Matt Johnson, came to realize how important nutrition was to improving athletic performance.

The brand enjoys a very loyal customer base with high repeat purchases. The Feed generated 8 figures in revenue while on a Shopify themed storefront, which was optimized for a fast page loading experience.

Ben Kennedy, Chief Technology Officer at The Feed, began exploring headless as a means to improve site speed even further. He was initially skeptical that the increased site speed derived from a headless approach would correspondingly increase other metrics, such as conversion rates.

Kennedy’s team decided to set up an A/B test, where they sent half of their website traffic to their themed storefront and the other half to a headless build, tracking the outcome of the experiment with Google Analytics. What they discovered surprised Kennedy and his team. The headless site yielded an 5.24% increase in the conversion rate and 10.28% increase in revenue per visitor.

The team also discovered that development is much faster with a headless build. After exploring several front-end solutions, they eventually selected Shogun Frontend, a Front-end as a Service (FaaS) solution.

Shogun is React-based, taking advantage of the JavaScript library’s component-based approach to front-end development. Development teams can create components that marketing and content teams can use to create new landing pages or update product pages in an easy-to-use interface.

Bols

Bols, a Dutch distiller and alcohol beverages distributor, was founded by Lucas Bols in 1575, making it the world’s oldest distilled spirit brand. Bols has historically been focused on business to business (B2B) commerce, selling their products wholesale in over 110 countries worldwide.

Bols’ B2B business took a significant hit in 2019 during the pandemic. As their revenue streams generated from bars, restaurants, and airlines declined substantially, they decided to add a Direct to Consumer (DTC) storefront specifically targeting the U.S market.

They worked with their longtime development agency, Story of AMS, to help them build their new DTC storefront. Bols was looking for a setup that would allow their team in the Netherlands and their new team in the United States to easily collaborate on content creation and marketing campaigns.

Bols had not been using Shopify as their ecommerce platform, but decided to adopt the platform as part of their new DTC initiative. For the U.S site, Story of AMS built a storefront with the React framework, Next.js. For their CMS, Bols’ adopted Storyblok, which provided their content and marketing teams with an intuitive interface that allowed them to integrate product information into their content.

Bols launched their new website in 2020, and it has been tremendously successful at bringing in organic traffic. The site brings in between 200,000 to 300,000 users per month and currently ranks high on several keywords important to their business.

Allbirds

Allbirds is a shoe and apparel company that differentiates itself from competitors by producing environmentally friendly products made from wool. They currently sell their products online and in over 50 retail stores worldwide. As Allbirds business grew, they needed an online storefront that could support their brand’s increasing product selection, categories, and retail stores as well as support greater personalization.

The Allbirds team considered going with a headless storefront as a way to address their growing needs. Fortunately, they already had some in-house experience with going headless as they launched an iOS app in 2020. Their iOS team shared what they had learned about the Shopify Storefront API with executive leadership.

The Web team decided to use Shopify’s Hydrogen framework and rely on Oxygen for cloud-based hosting. They began by first building a store locator feature on the site, which they were able to launch in under a month. After getting familiar with the framework, the Web team next built their product pages in Hydrogen.

They are in the process of incrementally building out the rest of the storefront while improving site performance and supporting personalization. In addition to using Hydrogen and Oxygen, the Web team has adopted Contentful as their CMS and Gladly as their CRM.

As they complete their transition to a headless storefront, their development teams have discovered how quickly they can launch products with a React powered front-end. After developing their base-level components, their teams have been able to accelerate their speed to market.

Greek Flavours

Greek Flavours is the largest online seller of Greek products. They first started selling Greek food, then expanding their offering to also include beauty products, and later gifts, souvenirs, and kitchen items, all of which are produced in Greece.

The brand relied on Magento Open Source 1 as their ecommerce platform and was looking to replatform as support for the software was being discontinued. They selected Shopify given its status as an ecommerce platform leader. Adopting Shopify over an open source solution such as Magento would also reduce their need to maintain developer resources for hosting and maintenance.

Greek Flavours also explored a transition to headless as they constantly struggled with slow site performance, which provided their customers with a suboptimal user experience. A headless front-end also would support the ability to display their product pages in multiple languages as well as conduct transactions in multiple currencies.

As a result, they retained VT Labs to build a headless storefront on the Advanced Shopify Plan. VT Labs built the new headless experience with Gatsby, a static site generator built with React. Gatsby sites are known for their incredibly fast page loading speed.

Greek Flavours also needed to support a recipe blog that was critical for SEO. They selected Prismic as their CMS, known for a simple user interface that content and marketing teams can use to publish blog posts. The brand selected Klaviyo for email automation and Zendesk for omnichannel customer support.

It took VT Labs 6 months to replatform from Magento to Shopify and build a robust headless front-end to support all of Greek Flavours’ business needs. The result is a highly performant site that supports multiple languages and ranks highly for organic searches on Google.

Wusthof

Wusthof is a manufacturer and seller of knives and knife-related accessories, headquartered in Solingen, Germany. For most of its 200 year history, the company was primarily a B2B business, selling wholesale to distributors around the world.

Like many B2B companies during the pandemic, Wusthof made the decision to launch a DTC storefront as a way to offset a decrease in revenue. A new Head of User Experience and VP of Digital Marketing joined Wusthof in 2021 and made a decision to modernize Wusthof’s entire tech stack to improve the overall brand experience and internal processes for managing their product catalog and content creation.

The brand leaned on their longtime agency partner, Vividfront, an Ohio-based full-service design, marketing, and development agency, to build their new storefront. Vividfront started by replatforming Wustof from Magento Open Source to Shopify to take advantage of Shopify’s back-end infrastructure, which is optimized to deliver fast experiences to customers globally.

Vividfront selected Next.js to build a headless storefront for Wustoff’s new DTC experience and selected Vercel for cloud-hosting. Storyblok was selected as a headless CMS due to its easy-to-use user interface and ability to preview content before publishing.

Once Vividfront successfully replatformed Wusthof onto Shopify, they were able to launch the new mobile-friendly DTC storefront in 2 weeks. Within 60 days of launching the site, Wusthof recorded a 50% increase in revenue, 39.24% increase in website users, and 50% increase in organic traffic.

Nomad

Nomad is a manufacturer and seller of smartphone-related products and accessories, located in Santa Barbara, California. The brand was an existing Shopify customer relying on a website theme, yet constantly struggled with optimizing their storefront for page speed. Given that a faster page loading speed is known to increase conversion rates, Nomad knew that they were losing revenue to the poor performance of their storefront.

The ecommerce and web teams began exploring alternatives to the website theme and quickly settled on a headless experience powered by React. It seemed the obvious solution for their brand given the ability of JAMStack websites to support a blazingly fast page loading experience.

After exploring a number of headless options, Nomad decided to rely on Shogun Frontend to support their new decoupled architecture. Given Shogun’s page building experience and integrated CMS, the brand’s marketing and content teams could update content quickly without support from their development teams.

Nomad launched its headless experience in 2020 and noticed results immediately. With the new, faster page loading experience, conversion rates increased 50% year over year, revenue per session increased 39%, and percent of sessions with product views increased by 27%.

Bids

Bids is an online marketplace auction site where customers can purchase various types of jewelry, such as rings, earrings, and bracelets, in addition to clothes, purses and other accessories. As the brand continued to grow, they ran into limitations with their existing Shopify storefront. 

They had difficulty with page loading speed, which the brand knew was negatively impacting conversations on the site. Bids also needed a more robust inventory management system to support the increasing size of their product catalog, as well as a new multi-marketing strategy to increase the number of auctions taking place on the site.

The brand worked with their agency, VT Labs, which decided to build a new tech stack rooted in a headless experience. They selected React to build the front-end. On the back-end, they employed Rails to server-side render React and serve it to the customer’s browser. 

VT Labs selected Tapfiliate to support their marketing strategy and relied on a Shopify app with a robust API to expand their inventory management capabilities. VT Labs built the site in several phases, with Bids seeing a 70% increase in conversions due to the new headless experience and capabilities.

OneBlade

OneBlade is a subscription-based luxury brand that sells razor products and related accessories, located in Austin, TX. As the company grew in size, the Shopify theme that supported their online storefront provided several limitations.

They experienced the same issues with page speed as many of the other brands in this article. Their average page loading speed was 12 seconds, which they knew was depressing conversions. The slow site speed also prevented them from integrating videos onto the site, which they knew would improve the overall user experience but slow down the site even more.

OneBlade also knew users were ready to purchase their razors immediately after visiting a product page, but their existing checkout experience was complex and not optimized for their users.

The brand had identified a React-based headless front-end as a means to solve these problems, as it would address their page loading speed issues as well as give them the ability to customize their checkout experience. They retained Avex, an ecommerce agency, to help them design and build their new front-end.

Avex adopted Shogun Frontend to support OneBlade’s headless experience. In addition to allowing OneBlade to address Shopify’s theme limitations, Shogun comes with a page builder and CMS that allows for their marketing team to quickly launch landing pages without needing to rely on developer support.

OneBlade launched the new headless experience in 2021 and immediately experienced extremely positive results. Average page loading time decreased from 12 seconds to 1-2 seconds, average number of store pages to checkout decreased from 7 to 2, and active subscribers to refill experienced a whopping 579% growth in 3 months!

Conclusion

The examples we’ve covered in this article demonstrates that, depending on your needs, there are a variety of ways to go headless with Shopify. Your brand can rely on a React-based framework, such as Next.js or Hydrogen, or adopt a FaaS solution, such as Shogun, to support your headless front-end.

Your brand can also retain an agency or in-house team to build your headless experience. And in terms of developing that experience, you can build your new tech stack incrementally or all-at-once.

Going headless with Shopify is certainly not for all brands, but if you decide to adopt a headless experience, there is no single way to reach that goal. There are a variety of approaches, methods, and technologies to pursue depending on your unique business needs and organizational structure.