The Ultimate 2023 Guide to Headless Shopify
An increasing number of businesses have adopted a “headless” architecture in recent years.
When you go headless, you decouple your front-end technology with your backend capabilities. This allows you to power unique customer experiences on a variety of devices and platforms.
Shopify is an all-in-one platform for running all aspects of your ecommerce business. Yet Shopify has recently released new features to support brands who want to embrace a headless architecture.
But is going headless with Shopify right for you? In this guide, we’ll help you answer this question by covering the following topics:
Pros and cons of headless commerce
Should your brand adopt a headless technology stack? There are benefits and drawbacks to going headless, and you should carefully consider both before making a decision.
In this section, we provide a high level overview of the pros and cons of going headless. If you want a more in-depth discussion of this topic, take a look at our guide to headless commerce.
The benefits of going headless
Fast page loading speed
The ability to create omnichannel experiences
Offering your shoppers a better user experience
Faster time to market
Higher conversion rates
Great developer experience
Enhanced international commerce capabilities
Drawbacks of going headless
Given all the benefits, why would a brand decide to not go headless? There are definitely some drawbacks worth considering:
Increased cost of hiring developers
Increased technical complexity
More software procurement
Changes to your internal operations
In short, it makes sense to go headless if you’re an enterprise company with a large team of developers. But if you’re a small brand without the benefit of a large development team, the pros of going headless may not offset the cons.
Core Headless Features
Shopify has invested heavily in new features to enable brands to decouple their technology stack. In this section, we review the Storefront API and Hydrogen, both of which support going headless.
Storefront API
The Storefront API makes it possible for your shoppers to view products, add them to a cart, and complete checkout – all from a custom frontend.
An Application Programming Interface (API) is an interface that developers can use to request data from a system. Shopify's Storefront API allows your developers to surface your product, customer, and order data to any third-party service or custom frontend application.
The Storefront API is available with the GraphQL protocol. GraphQL is optimized for performance, unlike other API protocols, such as REST. GraphQL prevents the underfetching and overfetching of data.
With the Storefront API, you can deliver your product and order information to shoppers in a highly performant manner.
Hydrogen and Oxygen
Shopify makes available to brands Hydrogen, a JavaScript framework your developers can use to build a custom online storefront. Hydrogen is a headless alternative to the Liquid themes that power most online Shopify storefronts.
Liquid themes can have performance issues. Hydrogen, on the other hand, is built on top of the React library. It is designed with performance in mind, delivering blazing fast page loading experiences to customers.
You can request data with the Storefront API and display them to shoppers on a Hydrogen-powered storefront.
Hydrogen has several advantages over other JavaScript Frameworks, such as Nextjs and Gatsby.
It comes with custom components that cut down on developer time and increase speed to market.
Hydrogen also comes with custom “hooks” that allow your developers to push and pull data from the Shopify backend. Building these from scratch would cost extra time and resources if you use another framework.
Shopify also provides Oxygen, a cloud-hosting solution for Hydrogen. Oxygen servers are globally distributed in over a hundred locations, ensuring your customers experience fast loading pages.
Evaluating Headless Shopify
Evaluating Shopify as a headless commerce platform is a bit different than evaluating it as an all-in-one solution. Going headless requires a great deal of developer resources spent on working with the Storefront API and integrating third-party services.
You'll need to take a close look at Shopify's API capabilities, developer experience, and integrations. We start our evaluation with reviewing pricing and customer support.
Pricing
Shopify has multiple pricing tiers. Each tier unlocks a greater set of features and functionalities to support a headless architecture.
Standard Shopify
Shopify has 4 pricing plans under Standard Shopify. This tier is designed for small ecommerce brands who rely on the Liquid template to power their online storefront.
Brands on this tier also have access to the Storefront API. They are allowed to launch one Hydrogen storefront on Shopify’s Oxygen cloud-hosting service.
Basic plan costs $39 per month
Shopify plan costs 105$ per month
Advanced plan costs $399 per month
Shopify Plus
Shopify Plus starts at $2000 per month and is designed for enterprise customers. The plan gives customers extra features not available on the standard Shopify plans.
Going headless for many brands on Shopify Plus is necessary for their ecommerce operations.
Multipass is a feature available with Shopify Plus that pairs well with a headless architecture. Customers logged into your headless frontend remain logged in when redirected to the Shopify checkout page.
The regular Shopify plan currently does not support cross-site authentication. A logged-in customer redirected to the Shopify checkout page would have to log in a second time for their personal information to populate on the page.
Brands that depend on return customers have found the Multipass feature essential to reducing user friction during the checkout process.
Commerce Components
Commerce Components is Shopify’s newest pricing tier, introduced in late 2022. This plan makes available modular services that can be selectively integrated into your tech stack.
Instead of an all-in-one platform, your brand can choose among thirty “components” to integrate into your tech stack. These components fall into six broad functional categories:
Storefront
Cart and checkout
Core commerce
Data and compliance
Shipping and logistics
Omnichannel
Given your business needs, pick and choose which features make the most sense for your brand.
Shopify doesn’t reveal pricing for Commerce Components on their website. Contact their sales team to receive a quote.
Customer Support
The Standard Shopify plan comes with 24/7 email and live chat support.
Shopify Plus and Commerce Components come with expanded support. On either of these enterprise plans, your brand gets a dedicated account team.
This team will help you manage migrations and implementations.
You also have access to 24/7 support for answers to any technical questions your developers may have.
With Shopify Plus, you have access to the Merchant Success program. A technical team will help you set up Shopify according to your business and technical requirements.
A Solutions Engineer also evaluates your technical requirements to ensure all your third-party systems integrate effectively with Shopify.
Commerce Components come with access to Shopify Professional Services. This service makes available designers and developers to help you solve any challenges.
API Capabilities
Shopify exposes a variety of APIs for your developers to work with. In this section, our discussion is limited to the Storefront API, as it's most critical to the customer experience.
The Storefront API is built with both the REST and GraphQL protocol. The API allows you to integrate product, order, or customer data with any third-party service or custom frontend.
The Storefront API uses a time-based rate limit to constrain API usage. Rate limits are a way to prevent cyberattacks and reduce heavy loads on web servers. When API requests exceed the rate limit, an error message is usually returned.
In the case of the Storefront API, the limits apply to the customers' IP address.
The Standard Shopify plan allows for a maximum of 120 simple requests within a 60 second time frame.
Shopify Plus allows for a maximum of 240 simple requests within a 60 second time frame.
Commerce Components offers unlimited API calls.
If an API call is more complex, the number of requests allowed within a 60 section time frame is reduced.
Developer Experience
Shopify makes available to your developers thorough documentation.
The API documentation covers how to write queries against your data with code examples.
The documentation also provides a detailed tutorial on how to run Hydrogen locally. It also covers how to work with Hydrogen components, hooks, and utilities.
Starter templates are available to help your teams cut down on development time and improve productivity.
While the documentation is complete, it can be difficult to find what you are looking for. This is due to the poor information architecture of the documentation.
But with some familiarity, your developers will find their way around the documentation in no time.
Another benefit to your developers is Shopify Community. As the leading ecommerce platform on the market, Shopify Community enjoys a high degree of participation.
Your developers will be able to find on Shopify Community answers to many of the technical questions they have.
Integrations
Integrate any third-party service into your tech stack with the Storefront API.
If you’re currently on the Liquid theme, some of the apps you use may not work when you go headless. Not all apps have APIs available for your custom frontend.
If that’s the case, you’ll have to find another app to integrate with your commerce engine.
Headless CMS solutions
Shopify’s native CMS is bare bone as it comes with a limited amount of functionality.
Headless CMS software, on the other hand, gives you the ability to create unique experiences that can drive conversions.
There are many headless CMS solutions on the market today. We cover three that you should consider when going headless with Shopify.
Sanity
When going headless with Shopify, Sanity should be at the top of the list of CMSs you should consider.
Sanity supports an app that allows for a seamless integration with Shopify.
This integration syncs the products in your Shopify ecommerce layer with Sanity. This allows you to embed your products inline with your content.
This is one less integration that has to be custom built if you were to adopt Sanity as your CMS.
Shopify recently invested in Sanity. This investment ensures that this will be the first of many such integrations.
Contentful
Contentful is another strong competitor in the headless CMS space. The platform targets brands in the medium to large enterprise market.
Contentful provides for a great developer experience with both GraphQL and REST APIs, extensive developer documentation, and an active developer community.
The Contentful user interface is easy to use. It makes creating new content types simple for your marketing and content teams.
Contentful also supports a Shopify integration which allows you to weave product information into your content.
Additional custom development may be required to achieve the same level of functionality available with the Sanity-Shopify integration.
WordPress
WordPress may not be the obvious choice for a CMS if your business decides to go headless, but it should certainly be considered.
WordPress has a reputation for producing slow websites. Admins and marketers have also complained that its interface is not easy to use.
Despite its shortcomings, it is an extremely popular blogging and marketing platform. WordPress is the most popular platform in the world, constituting 43% of all websites.
Wordpress' popularity means that teams are familiar with its user interface. Ensuring your team is comfortable with your CMS shouldn’t be underestimated.
There are plugins that will allow your team to access your content with GraphQL or REST APIs. These plugins will allow you to pull your content into a custom frontend application.
Unlike Sanity and Contentful, WordPress is open source and will need to be self-hosted.
As a result, managing your Wordpress backend will take extra resources from your development team. But it may be worth it if it improves the productivity of your marketing and content teams.
Shopify alternatives
It’s worth considering alternative ecommerce platforms if you’re committed to going headless. Here we give a brief overview of three ecommerce platforms that support a headless architecture.
BigCommerce
BigCommerce has the tools and services necessary to support going headless. BigCommerce markets itself as an ecommerce solution for midsize and enterprise companies.
BigCommerce has many distinguishing features and functionality. One area where BigCommerce really shines is in the area of developer experience.
It has great documentation and an active developer community. You can use its GraphQL and REST API to access all your product and order data.
BigCommerce also makes available a wide assortment of starter templates built with different technologies, such as Nextjs and Gatsby. With these templates, your developers can speed up their productivity and time to market.
Magento Open Source
Magento Open Source is an open source ecommerce platform currently owned and maintained by Adobe.
The open-source nature of Magento gives you the flexibility to customize it to suit your needs. The downside of open-source software is that you are responsible for hosting and maintenance.
Adobe Commerce, on the other hand, is the paid, enterprise version of Magento. Adobe Commerce offers a cloud-hosting environment but still requires additional developer resources to handle maintenance and upgrades.
Commercetools
Commercetools is an ecommerce platform specifically designed for headless commerce. It makes available an API-only platform that can support any number of omnichannel experiences.
Like Shopify’s Commerce Components, you have the option to pick and choose which APIs to use. You can adopt Commercetools’ PIM, for example, while relying on third-party services for other operations.
You also have access to Commercetools Frontend, which is a Frontend as a Service platform (FEaaS). A FEaaS offers ecommerce companies the ability to deploy and host a custom frontend.
Headless Shopify examples
Going headless can feel like a daunting task but many brands have adopted headless Shopify. The best way to go headless is through phases where you incrementally decouple your architecture.
With every step you can apply your learnings to the next and thereby reduce risk. In this section, we’ll review the process by which two companies went headless with Shopify.
AllBirds
AllBirds, the fashion and apparel company, launched their business in 2016. As the company grew, the company realized that they needed a new frontend to support fast loading speeds and personalization.
The company, however, wasn’t new to headless. In 2020, Allbirds launched an iOS app built on Shopify’s Storefront API.
With the benefit of the mobile team's insights, the company decided to use Hydrogen and Shopify’s cloud-hosting service, Oxygen.
AllBirds took a phased approach to decoupling their frontend from their ecommerce layer. They first used Hydrogen to build a store locator feature on their website for their brick and mortar stores.
They then converted their product pages to Hydrogen. Fast forward to 2022 and Allbirds has converted their entire website to Hydrogen.
Allbirds is now able to create the types of customer experiences they set out towards when they first decided to go headless.
Kotn
The apparel brand, Kotn, also took an incremental approach when going headless with Shopify. Started in 2014, Kotn’s initial online site was built with WordPress.
After transitioning to Shopify, Kotn used a Liquid template to power their storefront.
Kotn’s first step toward decoupling their tech stack was using the Storefront API to rebuild their product pages. Their next step was to replace their existing CMS with Sanity.
They then incrementally began to replace the existing pages on their site with headless frontend pages.
Bottom Line
If you’ve made it all the way to the end of this article, it must mean you’re seriously considering going headless with Shopify! The bottom line is that Shopify is a great platform for going headless.
Shopify has made several investments in the past few years that have made it possible to go headless on their platform. From their Storefront API to Hydrogen and Oxygen, Shopify has bet that the future of ecommerce is headless.
If you are, in fact, ready to take the leap towards headless, partnering with Shopify is a great first step!
