Should your Shopify site be headless?
Estimated reading time: 11 minutes, 26 seconds
Do you have an ecommerce business built on top of Shopify? Are you satisfied with the Shopify backend but frustrated with the limitations of the front-end in not being able to optimize your customer’s user experience? Do you want your website to be as fast as possible? Do you have a top-notch in-house development team, or a hotshot agency you work with? If so, Headless Shopify might be one of your best route to meaningfully increase conversion rates and customer satisfaction.
Headless Shopify: an Overview
“Headless” platforms are all the rage these days. Everywhere you look, engineers are ditching pre-packaged user interfaces and rolling their own. This trend has recently caught up with the world of e-commerce and specifically the Shopify ecommerce platform. In this article we’ll explain what headless means and how it applies to Shopify’s platform.
We’ll cover the following things:
- What “headless” means
- How Shopify can be used headlessly
- The Pros and Cons of a headless system
- Some examples from the real world
- Alternatives to Headless and Shopify’s latest innovations
What exactly is “Headless” Software?
Traditionally, in software, the term “headless” has referred to programs which operate without the use of a Graphical User Interface (GUI) – the part with windows, buttons, text, inputs and so-on which you most likely think of when you think of the word “software”. These applications most often run on servers and in terminal sessions where there isn’t a need for graphical output. Some relatable examples of headless software would be that which is running on things like your car, refrigerator, or even doorbell. All of these require software to operate, but very rarely do they present a user interface for you to interact with.
Over the past few years, web engineers have started applying the headless label to new methods of building websites and apps. You may have heard of a headless CMS, headless WordPress, or even headless Shopify. What these examples are referring to are pieces of software which have been broken up into two buckets: one bucket that deals with the data and business logic, and another bucket that deals with the user interface. If this makes the headless label seem like a misnomer to you, you’re not wrong. Headless websites and apps aren’t headless in the traditional sense – they still have a user interface – they are simply built in a way which moves the user interface to its own technology stack.
Most often you’ll see this shift achieved by adding an API layer to the original application and moving the user interface (UI) to its own stack entirely. The new UI stack interprets the data from consumes the API and presents the data however in whatever fashion it likes. On the technical side, this is referred to as having a “separation of concerns”, which means having your important “parts” operating independently of one another. Using a content management system as an example, this could mean separating your content creation from your content presentation.
In fact, this is exactly what the blogging platform WordPress did starting in 2016, with version 4.7 of the WordPress codebase. Since that update a REST API has been included by default in all WordPress installations. This API exposes new endpoints for all of a site’s most important content: posts, comments, users, and meta information. This introduction opened up an entirely new channel for displaying and interacting with content. Where developers were previously limited to using WordPress’ PHP-based theming system for building their websites, they could now build their front end with whatever tooling they wanted. Website administrators, on the other hand, could continue to use the robust content management backend which WordPress provides and which they have become accustomed to.
You may be wondering why anyone would do this, as it seems to complicate the process of building and serving a website. The primary advantage of adopting a headless system is flexibility. When your back end server is no longer in charge of rendering your UI, you gain complete control over how the UI looks and how well it performs. A headless system unlocks the ability to build any kind of user interface you like, whether that’s an app, a single-page javascript application, or something else entirely, while continuing to use your existing backend. In many cases, decoupling the front end from the back end provides a huge speed boost. When your website doesn’t have to wait around for server side logic, page load times can be reduced to tens of milliseconds.
Headless Shopify
Shopify offers one of the best merchant experiences out there. The admin backend is robust, well designed, and is constantly being updated and improved-upon. Shopify hosts and manages the entire platform, maintaining a 99.99% uptime rating, meaning it’s far more reliable than self-hosted systems for nearly zero headache. It just makes sense that merchants would want to use the Shopify platform as a backend, even if they want a custom front end.
So what does headless Shopify look like? Because headless simply means moving your UI elsewhere, the shopping experience can become a lot of things! From websites, to apps, to 3D games, the options are nearly endless.
Most often, headless Shopify implementations consist of a static website running a single-page javascript framework, like React or Vue. These sites look and feel like a typical ecommerce website, with products displayed in slick ways and a cart that lets you stock up on goods. Under the surface, though, these sites are light and nimble, only bringing in the data that is needed, and are able to render the next page in no time at all. Rather than requiring “round trip” requests to the server every time a customer clicks on a product, the headless storefront will simply fetch that product’s data and render it in a component that was loaded at initialization.
Another possibility in the headless Shopify arena are custom mobile apps that provide seamless checkout through a Shopify store. For brands that want to offer ecommerce options alongside their core offerings, this can be a great solution.
System Architecture
The architecture of a headless storefront is very straightforward and not dissimilar to most modern web apps. Shopify, of course, provides the back end and makes a store’s data available through the Storefront API – a suite of endpoints that cover everything from fetching product data, to building carts and initiating customer checkouts.
The front end is your UI of choice (website, app, etc) connected to the Storefront API using one of the provided Shopify Buy SDKs. In the case of a website, the application is served as static html and javascript files over an ordinary web host (faster the better). The application itself can be built with React or any front end javascript framework. The recently released Vue Storefront is purpose-built for headless storefronts and shows promise at smoothing out the front end development process.
For especially content-heavy brands, integrating a third-party CMS can help get past the limitations imposed by Shopify’s backend and still allow easy editing by marketers.
Who is it for?
Deciding if a headless Shopify setup is right for your business can be tricky. There are a lot of things to consider and the decisions you make will impact your company for years to come. We’ve put together a quick list of pros and cons to help guide your thinking:
Pros:
Speed
On a standard Shopify setup, every page that a customer requests has to be rendered by Shopify’s backend. This process includes initializing your shop, pulling in product data, and then building the html from the theme’s liquid file. A headless front-end doesn’t require any of this and can return static html files instantly. From there, the UI is in your hands to be as performant as possible. On ecommerce, (especially mobile) speed is everything. Studies from Google and others have shown time and again that the tiniest of increases in page load time have dramatic effects on bounce rates. Whether or not a customer bounces directly impacts conversion rates, and ultimately, a store’s revenue. A headless store we highlight below was able to increase their conversion rate by 5% and customer revenue by 10%, simply from having a faster website.
Customization
With a headless storefront, you aren’t tied down by Shopify’s theme system and the Liquid templating language. You can build any UI you want, using the most modern and cutting-edge front end tooling you want. Examples below show some very unique shopping experiences.
Flexibility + Composability
When your front end is not limited by the constraints of Shopify’s backend, it can easily tie-in third party services, APIs, and data stores. Third party tools include cloud CMS’s like Contentful and review platforms like Yotpo. Both could be integrated with relative ease to a headless storefront to round out the UX.
Cons:
Development Cost
Developing a custom front-end is much more time consuming than a traditional Shopify store. If your brand is looking for the fastest go-to-market possible and isn’t as worried about a fast and unique experience, a traditional Shopify theme is a better bet. Headless storefronts also work best for tech-first businesses that intend on having long-term experienced engineering support. We stress “experienced”, because you don’t want to be a developer’s guinea pig and end up with a bad build. If you don’t intend to have long-term engineering support and want to leverage Shopify’s support, you should stick with the default configuration.
Maintenance Cost
Along with more up-front time is more time down the road spent on maintaining and upgrading your storefront. Because you are responsible for the code, not Shopify, you will be required to spend development time on important bug and security updates.
Because the files serving the website to your customer are no longer on Shopify’s SASS, you’ll need separate web hosting in addition to the cost to use Shopify. Hosting your own site will incur additional hosting costs, development operation costs, and potentially other third-party services.
Administrative Overhead
UI Updates, content changes, and editorial decisions will be more difficult to make than on traditional Shopify. You won’t have the advantage of Shopify’s easy to use Theme Customizer and page editor. In many cases you will not be able to rely on apps from Shopify’s app store, as many apps require that they are installed directly in a theme.
Examples from the real world
Simulate Nuggs: eatnuggs.com
Simulate Nuggets’ site is a fantastic example of a headless Shopify site. It has a bold and inventive UI that flows from one page to the next fluidly. Clicking through to the product page and then checkout is fast and seamless, and even features a 3D-rendered box of chicken nuggets.
A still screenshot of their website doesn’t truly do it justice. We encourage you to click the image below to see their website live. It’s unlike any other food product marketing we’ve ever seen.
The Feed: thefeed.com
The Feed uses a traditional ecommerce design, but because it’s headless, it’s blazing fast. Their products load instantly and feature tons of metadata like ingredients and nutrition facts. Because they’re using a third-party CMS, it’s much easier to manage this data and integrate it with their site. According to their CTO, the headless site has seen a 5% increase in conversion rate and a 10% increase in revenue per customer
Hodinkee App
The Hodinkee app is a great example of an existing brand and product that was able to add shopping functionality through a headless setup. Started as a popular magazine about watch collecting, Hodinkee’s app blends the magazine experience with their store’s offerings in a single well designed package. Hodinkee actually has two “heads” – their website uses a standard Shopify setup while the app is a head of its own backed by the Storefront API. This shows how a headless setup can be flexible to fit a business’ needs.
Alternatives to Headless and Shopify’s latest innovations
Shopify has made some pretty big announcements in the past ~6 months that affect the decisions that a merchant when considering whether to go headless or not.
First, they’ve announced “Online Store 2.0” which addresses a ton of the concerns developers have brought about working with Shopify. It’s going to bring a ton of customizability to stores which previously required hacky third party solutions. This may be being done out of fear that their ecosystem is becoming fragmented and more frustrating to use, similar to early ecommerce solutions like Magento. Shopigy is hoping that some of the original concerns which had people looking at headless have been addressed here. They claim that this “makes themes and theme apps easier to build, more flexible, and easier to maintain”, however as we haven’t converted any of our client’s custom Liquid(1) templates & themes into the new JSON-based templates, we can’t verify this with any personal experience.
Secondly, they’re adding first-class support for headless storefronts as an option, and are going to be releasing a React-based framework for building out these sites with modern web development tools. This is huge for the merchants who decide they do want total control, as it means they won’t be completely on their own to figure out a solid implementation. It’s only been open to developers in a beta mode since November, so we haven’t seen any solid projects built with it. The reviews are still out.
If all of this sounds like too much to keep track of, you’re not alone. At Fountain City we know that business owners don’t want to have to keep track of an ever-changing technology environment. That’s why great companies partner with Fountain City. Because we’re passionate about technology, great companies trust us to focus on giving them the best tech stack for their current and future needs. This frees up our client decision makers to do what they do best, growing and running their companies.
Footnotes
- Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
