Headless eCommerce involves the separation of your front end (where customers interact) from your back end (cannot be accessed by customers, 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 themes hosted within your Shopify store. The front end of your site is now hosted independently while Shopify is still utilized to power the back office for order, customer and product management. Checkout is also generally powered by Shopify for a number of reasons, granted when you go headless you have the ability to control how this is performed as well.
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 at the enterprise level.
Here's why we recommend going headless for our 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
1 second decrease in site load time can increase conversions by 1% – 7%
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.
Going headless also gives you complete control over your URL structure. For international stores, this means you're able to host multiple versions of your site from a single url ie. "examplesite.com/en/" + "examplesite.com/es" instead of having to use separate domains or subdomains.
For content creation, you're able to utilize the latest and greatest publishing platforms like Ghost. Ghost has an amazing modern admin interface. It supports AMP (accelerated mobile pages) out of the box, 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 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.
Shopify has a 100 variant limit per product, which can make selling items that have a large number of sizes or colors quite difficult. By going headless you can not only pull "regular" products in from Shopify, but also create custom products outside Shopify that have an unlimited number of possible variations. We've found this to be a game changer, particularly for our client Beverly Hills Motoring who sells custom fit leather floormats and car covers.
It's really easy to hit the 100 variant limit in Shopify.
Initially on their hosted Shopify site we had to break single styles into multiple products within Shopify and find a way to glue it all together. Far from ideal. On the development side it was very hard to add new products or new variations of existing products. From a product management standpoint it was also a nightmare.
Going headless meant that we could model these custom products in a way that mirrored the reality of an ideal customer experience. We were able to offer an unlimited number of color combinations for the floormats without jumping through hoops. Furthermore, instead of being forced to live with a limited number of price tiers, we were able to specifically price items based on the car.
Before you get too excited, keep in mind that going headless requires a lot of very technical development work to get started and isn't without it's own drawbacks.
The first obvious drawback is the transition itself. It requires a team of highly specialized developers having to reconstruct your frontend and integrate it with your backend(s). Furthermore, once the site is launched you're likely going to have to rely on that same team of experts to maintain and update many aspects of your site.
If your eCommerce team is accustomed to updating content on the fly...this is still possible. That being said, gone are your abilities to drag-and-drop different sections as within the Customize Theme editor. Luckily there are some awesome headless CMS out there that allow the same functionality.
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.
The transition and ongoing maintenance required by headless is no small undertaking.
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.