On traditional ecommerce platforms, the frontend and backend are fully integrated and inseparable. But today, more and more online retailers are decoupling the front and backend to take advantage of greater flexibility and improve the user experience. With Shopify’s Hydrogen framework, the headless setup is available to customers in a much more integrated way.
Wondering if a headless commerce setup might work for your Shopify business? Let’s explore the steps you’d need to take to implement it, as well as the advantages and drawbacks of going headless.
Key takeaways
- Headless commerce enables brands to be more flexible and build custom experiences for their customers.
- In a headless build, the frontend display of an online store is separated from the backend engine and ecommerce fulfillment systems, giving store owners more freedom to customize their sites.
- With a headless Shopify build, store owners can enjoy improved security and flexibility and faster loading speeds.
- Going headless requires greater dependence on a web developer for support, as well as management of more complex systems since you cannot use the frontend features of Shopify.
What is headless commerce?
In a headless commerce setup, the frontend and backend of an ecommerce application are decoupled so that each can run independently. This enables a business to fully customize their online storefront, better supporting their customers’ journey without impacting the backend setup. This increased flexibility also maximizes the potential for testing, experimentation, and optimization.
Going headless means you can keep all Shopify’s useful backend ecommerce functions. However, you are replacing the platform’s frontend with something new, impacting the customer-facing aspect of your store.
To enable headless commerce, developers use various services to build, operate, and run progressive web apps (PWAs) entirely in the cloud. If you go headless, you’ll need to connect your front and backend using a storefront API (application programming interface) to serve content as necessary.
How to go headless with Shopify
If you’re considering going headless with a custom storefront, you have three options. You can build with Hydrogen, get professional help, or use a frontend-as-a-service (FEaaS) platform.
Building with Hydrogen
Introduced by Shopify at Unite 2021, Hydrogen is a framework that makes it easier for web development teams to create custom online storefronts. If you have a strong in-house tech team, you can use Hydrogen to build your own headless storefront. This option gives you full control of every aspect of the development process.
A key advantage of Hydrogen is that it uses React.js, a Javascript framework that allows for faster and more efficient frontend construction and updates. It also provides simple templates for navigation, buttons, toggles, and styling. Your developers can use these starter kit elements to quickly assemble a working storefront, freeing them to focus on refining the overall customer experience.
The catch: Using Hydrogen on your own relies heavily on in-house development resources. Hydrogen also has no real-time storefront preview feature, which can give some developers trouble while implementing a headless build. Since there are no drag-and-drop features, only people comfortable writing code can make changes. This means writers, designers, and marketers must go through the development team for any changes to the storefront, which can lead to bottlenecks.
Another key consideration: Hydrogen has no built-in content management system (CMS) to help developers manage web content creation, storage, and publication. To gain those CMS functions, developers must create middleware to link third-party services.
In short, the Hydrogen option gives you maximum control, but it also requires sufficient in-house development muscle.
Hiring an agency
If you lack the capacity (or desire) to build a custom storefront on your own, you can hire an agency to do the job. This option can be pricey, but it keeps the development burden off your internal team, gives you more time to focus on other aspects of your business, and—if you choose the right agency—gives you access to true experts in online storefront development.
The trick here is finding the agency with all the specialized knowledge you’ll need. For example, if you want to create a unique storefront that people can access through the Shopify Storefront API, you’ll need an agency that’s well versed in frameworks like Ember or React.js. Since the API is written in the GraphQLprogramming language, you’ll also want to make sure the agency has experience with this.
Another factor to consider is ongoing management. Even if you decide to work with an agency, you likely won’t work with them forever. You’ll have to find a long-term solution for managing your new headless store.
Using a frontend-as-a-service (FEaaS) platform
Yet another way to go headless with Shopify is by working with a front-end-as-a-service (FEaaS) platform, which is a prepackaged software solution that provides all the components you need to create a headless storefront. It includes headless CMS software, out-of-the-box connections with Shopify, unique frontend components, server-side rendering, and hosting. A few of today’s most popular FEaaS platforms include Frontastic, Shogun, and Instant Commerce.
With the right FEaaS platform, you can go headless without having to create a headless Shopify store from scratch. Your storefront will still be entirely customizable, but it will not require you to set up the infrastructure yourself.
FEaaS platforms also have a lower cost of ownership. You won’t need to negotiate multiple layers of the tech stack, and your developers will be able to manage concerns through the platform’s experience manager. This eliminates a considerable number of headaches involved in the day-to-day management of your store.
Many FEaaS platforms have partner agencies specializing in headless site builds. By working with an agency, you get expert help throughout the process.
All that said, it’s important to note that a FEaaS platform may limit your control over certain elements of your storefront. Many such platforms have built-in systems, including a content delivery network (CDN), CMS, and middleware. This means you may no longer be able to choose other services to fulfill these functions. While a traditional Shopify setup gives you access to third-party applications that can help grow your store, you may have to let go of those features or use alternative apps that work with your FEaaS.
What to check before you go headless
Before deciding to go headless with Shopify, there are a few essential areas you need to consider.
First, consider running tests to study how your store currently performs and what conditions can slow it down. Then, perform an analytics audit to determine the performance metrics you want to improve. This can help you understand the potential impact of going headless for your store.
Consider how you will connect your front and backend. Integrating APIs with your platform may be a wise choice for small businesses. Meanwhile, mid-market and enterprise companies may prefer to switch to software-as-a-service (SaaS) solutions, which offer more flexibility and scalability in the long run.
You have more options if you already have an open store on Shopify. The platform has many APIs that can help you go headless while maintaining your commerce functionality. You might also need to evaluate your Shopify apps. Determine what apps you use on your store and check if they are compatible with the storefront API.
Once you have decided to go headless, you must pick a CMS. If you are providing content to visitors on multiple channels, a headless CMS is invaluable. It can help create unique content specific to each medium and user experience. An API will sync the platform’s frontend and backend, transmitting the right content to the appropriate touchpoints.
You can select an open-source CMS or choose one from a SaaS provider. The former can be a good choice if you want ultimate flexibility. However, you will need specialized knowledge to create and deploy it. The latter is an excellent solution if you want to get started faster.
What are the pros & cons of going headless with Shopify?
The ultimate goal of the headless commerce structure is to help store owners improve the customer experience and grow their sales. However, going headless is a major decision and store owners will have to weigh the pros and cons carefully before making a decision. Knowing these factors can help determine if a custom storefront is right for your business.
Pros: Why merchants opt for a headless Shopify platform
There are several common reasons why entrepreneurs today opt for a headless Shopify platform.
Improved flexibility & security
With a traditional ecommerce build, you have to rely on developers from Shopify. Although this can save time and money, it prevents merchants from using other emerging ecommerce technologies. With a headless Shopify build, developers are free to use other available solutions to improve their site.
This makes development more flexible, enabling the creation of highly customized user experiences, architecture, design, and lightweight storefronts. For example, you can optimize your checkout page, make your store easy for mobile app users to navigate, and make sure customers can seamlessly place items in their online shopping cart.
Moreover, a headless Shopify build can significantly boost your online store’s security. Because the frontend works independently of the backend, with only the API connecting the two, there is little area left for threats, such as distributed denial-of-service (DDoS) attacks.
Customized URLs
In a traditional Shopify setup, making customized URLs for a specific product page is impossible. But if you build a headless Shopify architecture, you’ll have this freedom. This opens up many opportunities for businesses with a multi-brand marketplace.
This is a primary reason online merchants like to use headless commerce. It allows them to customize their URLs to include a detailed product description.
If you import your store from other ecommerce platforms to Shopify, you can keep the original URL intact. This mitigates the SEO risks of migration and is particularly beneficial for stores with varied marketplaces, products, and target audiences.
Faster loading speed
Creating an online store with fast loading speeds is crucial, both for the user experience and SEO. In fact, Google has loading speed as one of the three Core Web Vitals by which they measure a site’s performance.
Developers know that nothing slows down a Shopify website more than having several apps working in the background. Although these apps increase the website’s capability, they also slow down the loading speed of the setup, and there’s nothing a store owner can do to mitigate this.
A headless Shopify build can make it easier for you to improve loading speeds. With the frontend separated from the backend, you can create a more flexible platform and optimize for speed.
Cons: Why using headless Shopify might not be the right fit
A headless Shopify setup is full of opportunity, but there are also downsides to consider.
Less tech support
When you transition to headless commerce, most apps stop working. This includes Shopify Plus and other plugins. You’ll have to implement custom integrations to make those apps work in a headless environment.
These services will also need APIs so that the store’s backend can recognize them. This process may require you to write custom code.
More complex systems
Implementing a new frontend adds complexity to your commerce system. The more applications, features, experiences, and services you add, the more complicated your environment becomes. You will have more touchpoints you must understand.
A more complex system may also cause maintenance issues, app-related integration problems, and the need for regular bug fixing. You’ll need to spend time and money on a diverse set of expert developers.
No “What You See Is What You Get (WYSIWYG) Editor”
Non-technical members of your team probably appreciate the What You See Is What You Get (WYSIWYG) editor. This software allows users to easily update content while seeing a preview of how it will look when it’s published. Unfortunately, this feature is not available for headless Shopify stores.
Access to new Shopify features isn’t guaranteed
Shopify constantly rolls out new services, like built-in analytics and other potentially useful features. But when you go headless, these features may not be available. You will be free to custom-build new functionalities into your frontend, but doing so will take money, time, and effort.
FAQs about headless commerce on Shopify
1. What brands are using headless Shopify?
Going headless with Shopify is becoming increasingly popular among brands today. Here are some examples of online businesses using a headless Shopify build:
- Lifestyle brand Yoga Girl
- Recycled wearables maker Rothy’s
- Sustainable clothing store Allbirds
- Distilled non-alcoholic spirits manufacturer Seedlip
- Sustainable watering solutions provider Rachio
2. How much time does it take to launch a headless Shopify store?
Launching a headless Shopify store can take anywhere from two to five months, depending on several factors. You can launch faster if you have a well-defined workflow and a team energized to make the shift.
3. How much will it cost to maintain a headless Shopify store?
You have to consider several factors when thinking about the costs of maintaining a headless Shopify store:
- Software costs: This price will depend on the apps, services, and other software you plan to use.
- Building costs: These can range anywhere from $100K–$500K.
- Maintenance costs: These range anywhere from $100K–$150K annually.
- Switching costs: The time, energy, and focus it takes to change your setup is significant. These opportunity costs should be factored into your decision, even if they’re hard to quantify.
