It’s what keeps ecommerce managers up at night. You’ve spent years building your business with a trusted ecommerce platform only to find that you’ve outgrown its native capabilities as you’ve scaled. But how do you make the switch to something more flexible while avoiding starting from scratch?
You’ve probably already heard the excitement around headless commerce. And indeed there are massive benefits to be had, site speed and improved UX being top of the list.
But what about headless Shopify? How are brands taking their existing Shopify storefronts headless? Is it possible? Practical?
You can’t afford to lose the powerful ecommerce functions that Shopify does so well (payments processing, inventory, PCI compliance, etc.), but at the same time, you may want to adopt technology that dramatically increases the speed of your site, or maybe you have advanced content management needs, a complex product catalogue, or maybe just want to break the confines of your theme and create a highly unique site experience.
Thankfully, it's perfectly possible to use headless commerce with an existing Shopify store and there are many ways to make the transition more straightforward. Here we’ll explore the hows and whys of going headless with Shopify and look at brands who’ve successfully done it, how they achieved this, and the benefits they’ve seen as a result.
What is a headless ecommerce platform? In general, headless commerce means adopting a separate piece of technology that powers the consumer-facing part of your site. Where your existing ecommerce platform — which covers the backend functions of your online business — remains in place. We’ll assume you already have the basics of headless commerce covered, but if you’re completely new to the topic, head over to our comprehensive introduction for the 101.
What is headless Shopify?
When you go headless with Shopify, you keep all the incredible backend ecommerce functions Shopify provides, you’re just using a different frontend or “head” to power the customer-facing side of your site.
Shopify is an awesome one-stop-shop for all your ecommerce needs, with plug and play features like:
Easily installable apps from the app store
Mobile-ready checkout supporting alternate payment methods, like Apple Pay
Great security and compliance built in, and
Sophisticated order management and inventory
But as you grow, you might start to find some features or design capabilities a little inflexible. The one-size-fits-all approach can work up to a point, but when you scale you may find you need a little bit more than the Shopify Storefront alone can provide. Often, brands choose to take Shopify headless as a means to achieve:
A faster loading site with instant page-to-page load time
More control over how your products are visually displayed
More flexible and intuitive content management, and
A fully customizable URL structure
If you’re looking to scale, a storefront tailored to the growing needs of your brand starts to become a necessity.
Luckily there’s no need for a complete overhaul, or building a new ecommerce platform from scratch yourself.
Shopify is built with separation in mind, and is able to accommodate a frontend that better serves your business needs with minimal fuss as you grow. That’s where their storefront API comes in.
What is the Storefront API? Shopify’s Storefront API (GraphQL not REST) is the magic key that unlocks the potential of Shopify headless ecommerce. Shopify developed their API with the express purpose of making third-party providers compatible with their ecommerce platform, and it opens up a huge range of possibilities for how you want your site to look, feel, and function, without having to lose the essential elements of Shopify that your business is built around.
Is Shopify a headless CMS?
It would be more accurate to say that Shopify has a CMS with headless capability. The attraction of Shopify, and what’s made it such a powerful tool for online retailers is its integrated services. Shopify’s inbuilt CMS, the Theme Layer and Editor, which you may already be familiar with, fits snugly alongside the rest of its ecommerce functions.
But these functions are designed in such a way that they can also operate independently of one another if required.
So if you need a bit more flexibility over how you organize content in your CMS (Shopify only allows four predefined content types) you can use a more versatile third-party CMS like Contentful or Prismic, define your data in a way that suits you, and, with headless, link it to Shopify through an API.
Shopify and other providers have developed a substantial tool kit that makes the process a lot more straightforward than you might think.
If you’re a small online retailer Shopify’s CMS might well be enough for your needs, but if you’re scaling, or have a mobile-first business model hyper-focused on speed, presentation, and the customer experience — the relative simplicity of Shopify headless commerce and a more robust CMS option might well make pursuing a PWA build worthwhile. You might pursue this option with an experience platform, or a frontend-as-a-service provider who’s got a CMS built in to work with Shopify.
Convinced headless is the path for your Shopify store?
What You’ll Lose and What You’ll Gain With a Headless Approach
As more and more customers start to see online shopping as a natural first choice (a trend that the pandemic sped up but certainly didn’t initiate) the need for speed at scale and across channels becomes ever more important.
Taking your Shopify store headless with a PWA (progressive web app) can give you sub-second page loads — even on mobile. This speed helps future proof your business.
But there are certain things you’ll need to weigh up, or find workarounds for.
More control over the customer experience
With a headless architecture, you’ll have many more customization and personalization options than you’d get with plug-and-play Shopify. While the range of themes that Shopify offers are impressive enough, and to some extent customizable, they start to show signs of strain when attempting to provide a unique and responsive customer experience at scale.
Going headless lets your branding stand out from the crowd. You can break away from the limitations of Shopify’s native features and themes, and differentiate your visual merchandising.
If you’re taking your business international or want to create multiple brands or product lines, headless lets you take your content management to the next level too. If you’re not limited to working within standard Shopify, you can redesign workflows and manage content at scale.
You’ll also gain more autonomy over site management without an additional coding requirement, and without compromising on customization.
It’s been very well documented that more speed equals more sales, especially on mobile, so anything you can do to streamline your codebase will help you convert. Being able to add apps through Shopify at the click of a button is very attractive, but at some point, all that extra code starts to weigh down your site.
Going headless means you’re free to use a faster frontend delivery method. Using a headless PWA architecture means your browser loads a statically generated site that doesn't make any dynamic database requests, which are typically very slow.
Your page-to-page load time with a PWA can be significantly higher than your original Shopify-only store.
Customizable URLs for better SEO
The structure of your URLs play a big role in helping customers find their way to your site.
To let Google know your product page is relevant to a customers’ search, you need your product page URLs to be flexible enough to accommodate quite detailed product descriptions.
Shopify is actually quite inflexible when it comes to modifying your URLs. There are only four predefined URL types to choose from, so you can’t add all the detail you need to give Google a helping hand.
Building your web pages within a headless architecture gives you complete control over your URL structure, freeing you up to maximize your SEO returns.
Reduced time to market
With a custom frontend hooked up to your Shopify store, your marketing team will be able to conceive and create campaigns faster, playing around with site layout and product placement without impacting backend processes meaning less time from concept to execution. You’ll also get precise control over your look and feel to match your brand exactly. No compromises.
An experience platform like Shogun Frontend means you can preview changes through the Experience Manager and CMS, without having to re-code or re-develop your website.
Can mean loss of support for apps/services
When you stop using Shopify’s built-in themes, some of your apps are going to stop working. If you’re going with a frontend-as-a-service provider, then they’ll have integrations you can pick and choose to have reintegrated for you. But if your business is building your Shopify store’s frontend bespoke with an agency (or choosing the individual aspects of your architecture), you’ll have to create some custom code so that Shopify’s APIs can recognize your third-party apps.
Can introduce complexity
Introducing another layer to your ecommerce stack is by definition adding complexity to your operation. If you decide to go for a dedicated frontend, you’re going to have to manage (at least) two platforms to keep your site ticking over.
The app-related compatibility problems that come with headless Shopify also apply to a range of frontend integrations. Considering the extra complexity, if you’re a smaller online retailer then Shopify may well be providing you with enough flexibility already.
If you are attempting to scale then you’ll either need an in-house development team familiar with React, or you’ll want to link up with a frontend-as-a-service provider and/or agency.
Which leads us to…
Implementation partner considerations
Having a partner who can take care of the technical aspects of going headless, leaving you and your ecommerce teams free to concentrate on sales and marketing is no bad thing. But you need to do your due diligence here.
Have a close look at your potential frontend provider’s roster of past and current clients. If they have a history of delivering for brands like yours, that’s a strong indicator that they’ll have the experience and skills-base to make your site a success.
Make a List, Check it Twice
Ultimately, before going headless with Shopify, you need to:
➡️ Know that all the apps you’re reliant on have APIs and can communicate with Shopify Storefront API. Determine which ones you absolutely need to make it over to the headless site, and consider how you’d like the experiences for each service to play out with respect to their UX.
➡️ If you’re taking a DIY approach to going headless, you’ll need a working knowledge of GraphQL, the language Storefront API uses.
➡️ Benchmark your site. Run some tests and find out what your initial Lighthouse score is and what might be dragging it down. This way you can quantify the benefits of your new headless commerce platform and report on its success once launched.
The Three Paths to Headlessness
If you’ve decided that your Shopify storefront needs a new and improved frontend, there are three main ways to do it, and pros and cons for each. Which route you choose will depend on your specific business needs:
Do it yourself
Complete control: Creating your own headless architecture around Shopify Plus means that you’ll have ownership of all your ecommerce functions, potentially giving you more flexibility. It means you don’t have to fit into anyone else’s system and can take the initiative with development and coding.
Requires specialist knowledge: Building a headless architecture from scratch has high development and coding requirements. For example, Shopify themes use Liquid as a template language. You can’t use Liquid with headless, so if you want to build a custom storefront accessible through the Shopify Storefront API, you’ll need a team that’s used to working with frameworks like React.js and Ember. Or, if you want to build a static site, they’ll need to be well-versed in frameworks like Next.js or Gatsby.
Build with an agency
Expertise: You’ll have a partner who’s well versed in taking sites headless. If you choose your agency wisely, you’ll be working with someone who has a wealth of experience in building headless sites that integrate with Shopify’s backend and will be well aware of all the potential pitfalls — and how to avoid them! Further, an agency can help you take your store headless by going bespoke (if it’s right for you), or by teaming up with a frontend-as-a-service provider for the software to complete your build.
Extra help: An agency will be able to offer you help and advice at the design stage and have the knowledge to turn your brilliant new concept into a reality.
Experience: They’ll be able to make suggestions as to what features, layout, and navigation works best with a Shopify backend, and so help you optimize your site.
Ongoing management: You’ll still be on your own when it comes to managing your headless store. Once the initial design and build is done, it’s up to you and your technical team to keep the whole operation working, a not inconsiderable undertaking when dealing with the multiple moving parts of your tech stack. This can be done with an ongoing retainer with your partner agency.
Use a Frontend-as-a-Service Provider
Bundled Software: If you don’t want to research, design, build, test and deploy a patchwork of platforms and custom APIs, a frontend provider can do this work for you. What you get is a complete package with everything you need to manage your storefront, still completely customizable to your needs but without having to do all the heavy lifting yourself.
Lightens the load: Instead of your teams having to negotiate multiple layers of the tech stack, they’ll be able to manage all the ecommerce and marketing concerns through an intuitive Experience Manager, removing a huge number of technical headaches from the day-to-day management of your site.
Expanded skills-base: Working with an experience platform doesn't stop you from also working with an agency to redesign your site. Many frontend providers have partner agencies that are specialist website builders, so not only will you get expert help with the smooth functioning of your store, you’ll have a shiny new site into the bargain!
Loss of control: You’ll lose direct control over some deeper, internal aspects of your tech stack. You won’t be able to simply go in and make a few coding changes whenever you want to, you’ll need to discuss some technical, behind-the-scenes changes with your frontend provider.
Real Headless Shopify Store Examples
Taking Shopify Headless has become so popular that there are far too many examples to list, so here are just a few.
Ben Kennedy, a partner at thefeed.com, was initially skeptical about the speed and UX gains they could get from taking their Shopify site headless, so he decided to run a few tests. After building two identical versions of their site, one headless and one using Shopify Liquid, they found the headless version outperformed, with a 5.24% better conversion rate and a 10.28% increase in revenue per visitor.
But aside from the raw numbers, Ben was impressed with the simplicity with which Shogun Frontend could be applied, without the need for his team to get involved under the hood. “No more themekit and liquid code. It's all react components, lazy-loaded and fast,” he said.
Groove Life, who specialize in silicone wedding rings and other accessories for outdoorsy types, have been blown away by the site design freedom going headless has afforded them.
Bryant Garvin, CMO at Groove Life, who took the store headless using Shogun Frontend said, “For me, as the owner of our site, it’s about [the] flexibility and control to make a branded website that feels like our brand. Allowing us the opportunity to do things in a creative way that isn’t hacked or forced into some theme in Shopify.”
And these UX enhancing innovations have been possible without the need for a vast army of developers. As Garvin emphasizes: “Your web team should be focused on improving the customer experience, not spending whole days keeping the wheels on the car.”
Want to explore if headless is right for you?
Chat with the Shogun Frontend team to see if taking your Shopify store headless is something we can help with.
Book a demo.
Undersun Fitness wanted to increase site speed and performance while keeping most of the functionality that already existed on their Shopify site, and that their team relies on. They partnered with Coldsmoke, a web design agency, to create their new site.
Coldsmoke’s Emily Shniderman explains “Undersun needed to maintain most of the functionality that existed on their Shopify site, some of which was covered by Shopify apps. Shogun had documentation regarding various integrations which allowed us to seamlessly replicate the functionality of the apps.”
The result? A lightning-fast and unique website without needless disruption to their team’s workflow. “We developed customized collection page templates using sections which allows Undersun to fully manage their collections pages and showcase their unique offerings,” adds Emily.
For this cutting-edge lifestyle accessories brand, Shogun Frontend lets their marketing teams intuitively and flexibly create pages, and visualize changes before going live.
As Nomad has a large product range, organized into different collections, their previous Shopify-centric organization meant they were having to develop custom code and unwieldy workarounds to let customers effectively navigate between product pages.
By going headless and rearranging these product listings through a custom frontend, Nomad have simplified and sped up their product pages, both for customer navigation and marketing teams creating new campaigns.
Their conversion to a PWA site has also improved their overall site speed, simplified the integration of third-party apps and reduced server requests, while allowing them to keep the site design their customers already knew and loved.
This innovative razor brand prides itself on putting customers in control of the retail experience. To do this they offer a wide range of customizable purchase options. Making all these choices work seamlessly for the customer would have been a big challenge using what’s available with standalone Shopify, but hooking their store up to a headless commerce site provided the flexibility they needed to deliver outstanding online customer choice.
The glamorous jewelry and watchmaker decided to partner with agency We Make Websites, to help them redesign their site for headless. Like a lot of brands making the change, Paul Valentine were concerned about the loss of convenience and lack of control over site maintenance switching from pure ‘plug and play’ Shopify might mean.
But the trade-offs have been totally worth it, says Alex O’Byrne of We Make Websites, “For headless you are going to need a more development-intensive team, at least during the website build. But the result is a higher-end site that is faster with more flexible content management.”
This German jewelry brand was another We Make Websites headless Shopify project. Alex explains the benefits sites like this can bring to brands, “Shopify Checkout has always been an outstanding product that combines UX best practice (mobile-ready, support for alternative methods like Apple Pay, and slick UI) plus, it's secure and scalable. You get to keep the benefits of that, plus you can keep your product catalog in Shopify.”
He also pointed out “using a product like Shogun is a good step — it reproduces some of the plug and play elements of Shopify while cutting down on the huge development effort of building a JAMstack app, but with the benefits of headless (i.e. a separation of concerns and an architecture where every component is specialized)” he added that these sites are “secure and faster due to static builds.”
But these examples are just the tip of the iceberg. Here’s a few other famous brands that use a headless approach with Shopify:
Rhys is a writer specializing in enterprise software, ecommerce, and SaaS. He describes himself as a geek and a wordsmith and relishes making complex, technical topics come to life in easy-to-understand web copy.