The only guide you need for building a Shopify Headless store
Introduction
On this article we will teach you, all what you need to know in order to build a Shopify store under the headless approach, but…
What does Headless even mean?
In the context of Shopify and other CMS (content management systems), headless means the possibility of separating the front-end from the backend of your application.
…but why?
Advantages
There are many reasons to work under a headless approach, but the most common ones are:
Having a more granular control over the front-end. Under headless approach, you can basically build from scratch, any front-end that you can think of, offering a more unique and customized user experience.
But this flexibility is a double-edged sword, if you don't understand your customers' behavior, and the value they would get from a customized experience, you may end up investing, lots of money and having worst results than with regular Shopify themes.
To separate concerns. As your company grows, you may have different teams working on different aspects of the store at the same time, like store/inventory management, marketing, development, sales and any other store related role. But having everyone working on the same system and having similar permissions, is not really safe.
Shopify allows changing staff users permissions, but it might not be enough in some cases, that's where Headless hits the door. Moving the development team into its own cell, allows a set of tools that are ideal to manage software teams without interfering with other areas, leading to better development times and data safety.
Innovation. It's easier to innovate when you have total control over the user experience, so innovations must be one of the leading objectives of using Headless approach, providing the opportunity to remain competitive against competitors by adding more value for the customers.
Development experience. Headless approach, opens the door for more complex and rich architectures, like micro-frontends or JAM stack architectural approaches, allowing multiple complex teams to coordinate and deliver high quality features.
Performance. It is not a rule, but with proper execution, Headless e-commerce stores can carry complex features and at the same time deliver lighting fast content, which is harder to accomplish with apps/plugins architecture from regular Shopify themes or similar approaches from competitors like WooCommerce.
Disadvantages
Now that you know the advantages of implementing Headless architecture, let's talk about the tradeoffs you may face while maintaining it.
Management complexity. It is harder to manage, because high technical skills are required to properly execute the architecture, and at the same time technical concerns may differ from other departments.
As an example, devs may be worried about making the store 500 ms slower after implementing a feature, while marketing only cares about users experience. Conciliating both point of views and taking the right decisions requires specialized leadership.
Higher operational costs. From one moment to the other, you have to pay for servers, experienced developers, API access to certain providers, and a large etcetera that we will discuss later.
Development complexity. Under the Shopify themes approach, almost anyone with basic programming skills can maintain and manage the store, but with Headless, high architectural skills are needed, which usually means more experience developers, and in some cases, an entire IT team working on the store simultaneously.
In my experience, you will require at least: one or two front-end developers, one QA and a project manager, to constantly deliver features and improvements for the store.
Limited app ecosystem. It is important to know that not all the apps available in the Shopify market support Headless approach, or you have to be subscribed to their enterprise solutions, which is a big aspect to consider if you are dependent on too many apps, because they can easily drain your profit.
Building the store
💡 If your are following the article, you should know at this point that headless stores aren't for starters in the bast majority of cases, so I recommend you to be very critical about implementing it, even if you have the resources to do so.
As you can see, implementing a successful e-commerce store under the headless approach is not an easy task, a lot of knowledge of the ecosystem and also high technical skills are required, but now that we have the context, let's talk about planning for launching a headless store more in detail.
Main topics we will cover are:
Budget.
Management.
Tech stack.
Let's go!
1. Budget
Following price ranges are just an example based on most used tools in the industry, but they can obviously differ from place to place.
Creating a budget for transitioning or implementing a headless store is key for success, it is very easy to get drained by unexpected costs associated to either providers or operational costs, so don't forget to create a custom budget for your business and then attach to it as much as possible.
To keep things simple, on the following example, let's consider a typical Shopify> Vercel-Sanity stack, on a store with:
5,000 visitors/month.
1 Sr. front-end developer.
1 QA engineer.
1 project manager.
Example
Vercel =$160/mo aprox
Pro plan: $20/month x 3 (seats) = $60
Additional bandwidth usage = +- $100
Sanity =$45/mo approx
Growth plan: $15/month x 3(seats) = $45
Sr. Front-end developer =from $6,000/mo to around $15,000/mo
QA Engineer =from $5,500/mo to around $10,000/mo
Project manager =from $5,500/mo to around $10,000/mo
App providers (variable) = Around $200
This takesmonthly operational coststo something in between$17,405and$35,405USD fixed expenses, which obviously not all companies can afford.
Disclaimer: Obviously, you can take this cost down by for example, not having a QA and/or PM, but we are talking about an ideal case where quality is a concern.
Recap
Above-mentioned costs are the most common ones, and they are an over-simplification, don't forget to make your own research.
Under ideal circumstances, you would have a team dedicated to maintain your store, and obviously payroll plays the most important role on operational costs, but you should also consider third party app providers, servers, and other systems you want to connect with.
2. Management
In my experience, there are two typical ways of managing Shopify stores, either you are the store owner or manager, and directly coordinate the development team, or you delegate that to an agency or freelancer.
We don't have anything against this approach, but we will talk about a less typical way of dealing with development, which is treating the product (the store), as a carefully crafted piece of software, and the team as a high-performing, engineering-driven group that approaches e-commerce with the same rigor as with any other software development.
SCRUM
This management method has been controversial in the last years, but we actually consider it an ideal approach for headless e-commerce for two main reasons:
First, it benefits the long term cooperation between members, when building an e-commerce store you are not building a static site that will remain the same for years, each day, the members of the team become better at delivering value.
Second, it isn't hard to find people with experience working under SCRUM, so the talent pool is wide.
Obviously the moth has to be applied correctly and with long term focus since day one
3. Tech stack
Right now, the most commonly used frameworks for headless are Hydrogen and Next.js, both of them have clear pros and cons which we will review in a moment.
For us, the most important aspect to determine which one to use is talent pool. Why? Because both of them can get the job done professionally, some of the characteristics that they share are:
React based frameworks
Full-stack frameworks
Work with headless
Uses Hydrogen React Package
Now let's take a deeper view...
Hydrogen
Pros
Owned by Shopify, so integration is very fluid and almost native.
Access to static typing by default (for Typescript users).
You can choose between hosting onOxygenor self-host.
Access to tons of very good SDK and packages.
Cons
Less talent pool for experienced devs.
Less developer friendly and complex ecosystem.
Next.js
Pros
Widely used in the software development world, so big talent pool.
Easier to understand than Hydrogen (but getting more complex every time).
Easy to deploy on Vercel.
Cons
Requires architectural knowledge, not all hydrogen packages are available for it.
Vercel deployment can get expensive.
Recap
Both of them are great tools, but your final decision for hiring, should be more around the talent you are able to get for the role, because great stores can be built in both tools as long as there is an experienced dev using it.
Conclusion
Now that you understand better the headless ecosystem, you are ready to plan your transition into headless!
As you can see, the headless path is full of challenges, but we hope this guide clarified some concepts for you and your team. Let us know if you have any question, happy to help.
