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.
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:
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:
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.
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.
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.
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.
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.
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.
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.
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…
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.
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.
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:
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.
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.
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.
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.
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:
If you’re a scaling brand using Shopify, but are starting to feel the time is right to gain flexibility, taking your Shopify site headless doesn’t have to be a massive development headache.