Headless Shopify: What It Is, and When to Use It
If you’re into reading Shopify Partner updates, you’ll often hear about Headless websites, or the Hydrogen builder. Shopify often boasts about how some of the biggest brands are using Shopify for their headless websites, and these sites are fast, impressive and loaded with custom features.
For our designer audience, some of you are intrigued and have been asking us what headless websites are all about, so let’s look into what it actually means.
What is Shopify headless?
Headless means separating the front end (what’s displayed to the customer) from the back end (where content is stored). In the case of Shopify, it means using Shopify’s backend to manage products, customers, orders, and other e-commerce features, but not using a theme to create the front end of the website. Instead, the front end is completely custom-coded and separate from Shopify’s online store theme editor.
What is Hydrogen?
While headless isn’t a term that is unique to Shopify, Hydrogen is. Hydrogen is a React-based framework used for building custom Shopify-powered storefronts. If you’re not family with React, it’s a Javascript technology for building user interfaces that's known for being lightning fast. Hydrogen includes the structure and components of a headless Shopify website to give you a starting point to build from so you can launch more quickly.
Benefits of headless Shopify stores:
Businesses choose to go with a headless website when using a theme is not enough to achieve the level of customization they want, but they don’t want to rebuild the ecommerce services that Shopify provides. The main benefits are:
Complete freedom over design and function
Headless development gives you absolute full control over the website design and user experience. When using a theme, there are some existing boundaries in the theme structure and capabilities of Liquid, meaning that not absolutely everything is possible. Headless removes any design or development limitations that Shopify may have so that you’re able to create something very unique.
If your brand needs prioritize flexibility and innovation, then headless may be the best solution.
Faster loading speeds
Headless Shopify websites are faster than standard Shopify websites since they leverage React and they aren’t bogged down with excessive code from apps and third-party libraries. Developers also have full control over what is loaded and when. Look at Kotn’s website for example. At first glance, you cannot tell that this isn’t a theme-based website, but where it really shines is in its lightning-fast loading speed between pages.
As we know, faster loading times = better user experience = higher conversion rate + better SEO ranking.
Downsides of headless Shopify stores:
Headless stores are not like theme-based stores in terms of attainability, maintenance, collaboration and budget.
Developer dependence
Headless stores do not have access to the theme editor/customizer. Therefore it would be a lot more difficult for the client to make updates to the storefront without the help of a developer. Clients may still use Shopify’s CMS to manage the backend elements of the store, but rely on a developer to make edits. This means that headless sites are best suited for larger brands that have a team.
Independent solutions
Many Shopify apps cannot integrate into a headless build, so you would need to custom build the solutions that apps usually provide. Building your own solution will require more time, more spending and a broader skillset to add standard features that other stores quickly achieve with an app. Some leading apps do offer headless integrations but not all do, and the ones that do likely come at a higher price point.
Larger investment
Custom stores are generally a larger investment in terms of time and budget. Added complexity comes with a higher cost. They’re often a team effort between designers and developers as work together to bring a vision to life. It’s not that a team is required, but the process and skills required expand with the vision. This is compared to starting with a theme, since themes offer a solid base with e-commerce best practices already implemented.
Large commitment
The financial and time investment is a big one, and it’s not easy to switch back to a Shopify theme if you run into roadblocks and change your mind halfway through the project. You would need to start over with the store build.
Who is Headless Shopify for?
Since headless stores offer complete design freedom and faster loading speeds, brands may want to build headless if they:
- Prioritize speed over ease of editing
- Require a bespoke design or user experience
- Want to sell through different channels (like selling products through a video game for example)
- Need unique checkout solutions
- Have the budget for in-house developers & regular maintenance
It’s not to say that you can’t receive some of these benefits with a standard Shopify store, because you can! And Shopify is always working to improve its speed performance, design flexibility and ease of customizing themes.
Although headless solutions come with a larger financial and time investment, offering an experience tailored to your customer’s needs and faster loading times may result in higher conversion rates, making it worth it.
Should I build headless stores?
Going from customizing Shopify themes to headless development isn’t a straight line. Headless development takes all the skills of a front-end developer including knowing the basics of React, GraphQL, APIs, package managers, Github and of course HTML and CSS. If those are skills that you’re interested in mastering, then headless Shopify development would be a good fit for you!
If you’re offering web design as a service, you’ll want to think about if building custom is really worth it for you and the client. Read our post Should you build a Shopify store from scratch? for more on this.
If you’re looking to see some headless stores in action, see Kotn, Girlfriend Collective, Knix, and Vacation.
Hana Drdla
