Headless eCommerce involves the separation of your frontend or presentational layer with which your customers interact from your backend where core data/functionality lives. Each functioning independently using the technologies best suited for each to create a completely optimized system.
This means you get the best of Shopify's back office admin, but you no longer use the Online Store sales channel with themes that Shopify bundles into its platform. The front end of your site is now hosted independently, save checkout, while Shopify is still utilized to power the back office for order, customer and product management.
Shopify is without a doubt the best eCommerce platform on the market right now. Store owners are able to setup amazing looking stores with advanced functionality in no time at all. That being said, this plug-and-play ecosystem starts to have some painful drawbacks as business requirements evolve. Here's why we recommend going headless for our Shopify and Shopify Plus enterprise clients.
Going headless allows developers to build sites using the latest blazing fast frontend frameworks. In addition to quick load times, headless PWAs (progressive web apps) have offline capabilities, allowing users to browse even with an intermittent internet connection typical on mobile devices.
A faster site gets more customer engagement + satisfaction, resulting in lower bounce rates, quicker time to checkout and more page views per session.
Pages that load at 2 seconds, convert at nearly 2x the rate of those that load in 4 (Cloudflare)
1 second decrease in site load time can increase conversions by 1% – 7%
With a fast load speed, customers can more easily explore your product catalog. A 0.1 second natural mobile site speed improvement can increase average order value by 9.2% and conversions overall by 8.4%.
Speaking about performance, hosted Shopify sites score notoriously bad on performance metrics such as Google's PageSpeed. While you can still get a fast site on hosted Shopify, having a better PageSpeed score will get you a better ranking in search results and drive more traffic to your eCommerce store.
Page speed is a direct ranking factor for search engines like Google. However, speed can also affect rankings indirectly, by decreasing bounce rates and dwell time. Users come first in rankings. 40% of people abandon a website that takes more than 3 seconds to load
Going headless gives you complete control over the content structure in your CMS and outward facing site structure. This is especially important for businesses with more developed internal structure or with different international presences.
With full control of your content management, it means that you can manage multiple websites or websites with many internal divisions within a single CMS. For example, with our client Cousins Maine Lobster we were able to create a very cohesive visitor experience split between their primary brick & mortar restaurant business and the new direct to consumer sales channel we created for them. The same application could apply for a brand like Samsung that has multiple websites and subsections of their primary website for their different product divisions. It allows for business owners to manage everything in one place opposed to having all their content strewn amongst multiple fragmented content management systems.
For international stores, this means you're able to host multiple versions of your site and sites content form a single place and appropriately display the content relevant to a given locale. For example, international brands like Nike that operate in different markets with different language requirements ie. "nike.com/en/" + "nike.com/es" instead of having to use separate domains, subdomains and content management instances.
For content creation, you're able to utilize the latest and greatest publishing platforms. Many of these have an amazing modern admin interface with a visual editor much like Customize Theme in Shopify. You can also add support for things like AMP (accelerated mobile pages), giving your articles that nice little lightning bolt that you often see at the very top of search results. You also don't get stuck with Shopify's less than ideal blog or page url structure. Instead of Shopify's "examplesite.com/blogs/news/cellular-health-tips" you could have "examplesite.com/news/cellular-health-tips"... much cleaner and Google loves it too.
More traffic + more engagement = more customers.
Before jumping in headfirst, there are a few things to consider compared to your traditional all-in-one Shopify stores.
The first obvious drawback is the transition itself. Even with our agency tooling of pre-build modules that greatly bring down the cost of development more in range of a typical fully custom Shopify build, additional features can quickly increase cost. Furthermore, once the site is launched you're going to want to have developers on hand to perform updates and monitor for issues / updates. There are also additional costs for hosting, the additional CMS, and typically require higher plans with API access for 3rd party integrations.
If your eCommerce team is accustomed to updating content on the fly...this is still possible. That being said, the majority of content management outside of products will take place within your new headless CMS. The good news is that the CMS we use has the same visual editing capabilities as Shopify's Customize Theme and allows you to do so on additional unique pages, like your blog.
Applications from the Shopify App store enable merchants to quickly add new features to their online stores. Since the front end of the site is no longer hosted on Shopify, no longer can you plug-and-play applications that operate on the front end of the site. You can still totally use apps that do their work in the back office, such as fulfillment integrations like Shipstation or tracking/return managers like Aftership. Just anything that functions in a customer facing manner like an upsell pop-up app won't work by just installing the app, it now needs to have APIs and be integrated by our team into the build.
The transition and ongoing maintenance required by headless is no small undertaking. It's important to have an experienced development team behind the implementation and internal team that can be brought up to speed on the new implementation.
Headless after all is best suited for enterprise level companies where optimal performance matters most. It's for eCommerce players that want...no... NEED to take it to the next level. Furthermore, having your site headless gives you the flexibility to use the latest greatest eCommerce CMS without rebuilding your entire site.
If you sell custom products, SEO obsessed or have multiple languages/currencies this is you.
You're going to be working hand in hand with a team of specialized expert developers from the initial transition to ongoing maintenance & support. We've found that Shopify headless solutions require a $35,000 budget for a typical build and can quickly increase in cost for specific functionality requests. It's important that the business is at a decent enough scale or with business requirements where the additional benefits of going headless. With strong established revenue it's a no-brainer, but for more small to medium size merchants scaling up these costs may be prohibitive.