What is headless commerce?
Ultimately headless commerce allows you to separate the backend of the website from the front end. Ok, so without context, it doesn’t mean all that much, but when you apply it to the real world (and your website) it allows you to remove the ‘glass ceiling’ that’s often in place with traditional ecommerce setups.
Headless essentially provides you with greater flexibility, which in turn gives you the remit to build much better and more powerful storefronts for your customers.
Separating the front end from the backend allows you to design and build experiences that are wholly built around your customer’s needs and wishes instead of operating within the confines of an existing tech stack.
What’s a killer distinctive benefit of going headless?
A great example of this is being able to create an entirely personalised homepage that shows different offers, promotions, products and categories depending on the tastes, purchase history and activity of existing customers.
That same personalised experience could then be shared across your other digital touch points too – for example in email campaigns.
A truly personalised experience is something that’s always been a challenge to achieve with traditional unified platforms as you’re chained to page builders and drag-and-drop editors that are much more static.
With headless, the capabilities are no longer siloed within or limited to your flavour of CMS. Ok so I’m already going big on ideas here (and I’m also getting carried away in the process – more on the juicy benefits of headless shortly.)
However, the point I’m trying to make here is that providing you have the budget, and necessary skills within the business (or via a development partner) you can create and build those experiences that really put your customer at the centre instead of operating within the confines of your CMS.
Is it worth considering headless for Shopify stores?
Yes – absolutely.
…But before we chew through some of the pros and cons of going headless with Shopify, let’s first just clarify exactly what going headless with Shopify actually changes:
- You’re no longer confined to drag-and-drop Shopify page builders and editors. Instead, you’re able to think outside the box and colour outside the lines to create an experience that best aligns with your customer’s needs and your brand etc
- You’re no longer tied down to using themes and apps
- You’re no longer forced to use Shopify’s URL structures (/collections, /products, /pages etc)
There are both positives and negatives that come with these points though so let’s dig in starting with the positives.
What are the positives of moving to headless Shopify?
You’re no longer confined to the native Shopify URL structures
For many brands, this is a huge tick in the right box when it comes to going headless. Let’s say you have an existing website and you’re wanting to introduce an ecommerce store into it using Shopify.
With a traditional Shopify setup, you’d have to commit to hosting your Shopify store on a subdomain (shop.mydomain.com) or using a different domain altogether. This is undesirable for several reasons – one of which is SEO.
Using headless Shopify you have a lot more options available to you. Your business can decide to place your store in a subfolder instead of a subdomain (mydomain.com/shop) which is much better from an SEO perspective and provides a more cohesive URL structure too.
Additionally, you’re no longer confined to using /collections, /products and /pages URLs – in fact, you’re free to set up your own URL structures to suit your business.
Migrating from WooCommerce for example? Retain the same URL structures to ensure your SEO migration is as watertight as possible.
Another perk is you may choose to set shorter, more optimised URLs.
Now, let’s say you’re a retailer that sells designer bedding and you have a ‘Summer Cashmere’ collection. Both your collections (Summer Cashmere) and categories (pillowcases) all exist within the /collections subcategories in a typical Shopify setup which can make things confusing.
With a headless setup, you can choose to have /collections which is built just for that; your actual collections and instead have all your shopping categories (duvets, bed sets, blankets etc) within another subfolder – say /categories /bedding or whatever you choose.
More control over your cart and checkout pages
Shopify’s native cart and checkout designs aren’t always ideal, and their layouts are saturated across the web – you can often spot a Shopify checkout a mile off.
The address lookup isn’t always as effective as you’d like, there can be too many stages, too many fields, shipping options and pricing aren’t calculated until later in the journey etc.
There are several quirks and frustrations with the native Shopify cart and checkout that you can avoid and instead adopt your own when going headless.
Work in a B2B vertical? Offer a toggle at the checkout to show line items with or exclusive of taxes.
Offering digital downloads? Remove any mention of shipping and remove the shipping step altogether to reduce clutter and avoid confusing potential customers.
Frustrated with invalid shipping addresses captured at checkout? Integrate your preferred address validation service to prevent delays and costly returns.
Functionality aside, with headless you have full control over the design, layout and fields that are displayed allowing you to create a sharper checkout for your vertical and customers.
How about positives away from Shopify?
Ok, so let’s put Shopify to one side – what are the positives of headless from a more platform-agnostic stance?
Speed
Now, this is a huge generalisation here and of course, there are lots of factors that determine whether a site is fast or not – but broadly and typically speaking, headless sites have the potential to be much faster than their coupled counterparts.
One of the main reasons for the improved speed is due to being able to shed the often bundled ‘bloatware’ that can come with typical themes. All of those additional features and tools add weight and therefore slows load times.
With headless you’re essentially designing your own front end so you can ensure you only ship the features and code that your site needs. This typically means a lean front end with faster load times.
More continuity across multiple sites
Got an app, a microsite or perhaps a number of sites each serving different markets? With headless, you can have a single asset library which contains images, files etc and serve those same media files across each of your sites.
This provides a more consistent look and feel and of course, makes those sites easier to manage too as media is controlled in one place.
You can re-platform without it impacting your front end
I’m going to use a slightly unusual analogy here but bear with me… I like to see headless as having a separate light fitting and bulb.
If the bulb has failed, you can simply replace it with a newer, brighter and more energy-efficient number and continue to use and enjoy the same light.
Although it’s a fair bit more complex, the idea is ultimately the same for headless websites. Outgrown your CMS? Maybe your business has grown and now needs more powerful inventory management systems.
With headless, because your front end and back end are decoupled, it makes it much easier and more palatable to switch/upgrade your CMS and minimise changes and impacts to your customers using the website.
So, are there any downsides with headless?
Without a doubt, there are downsides – as with everything it’s about understanding whether in your specific case, the upsides outweigh the drawbacks. Let’s get stuck into the bad bits.
You might need to wave goodbye to apps and plugins
Apps and plugins from marketplaces are often only designed to work with coupled CMS setups. Whether you’re using WordPress, Shopify, or another traditional CMS entirely, there’s a good chance that your favourite plugins won’t work with your headless build.
Either your new headless front end will have those features built-in or worst case, that functionality will need to be built into your new de-coupled front end which can add complexity and cost to the build.
You should expect to be tied to a development partner as there’s plenty of custom development
Unless you have an individual or a team of skilled developers heavily involved with any web projects, there’s a chance that you’ll need to get cosy with a web development partner that’s well-seasoned in building headless website setups.
With a fistful of APIs and databases to integrate and manage it’s impossible to get a headless build off the ground without the relevant dev skillsets and capacity baked in at the beginning and throughout.
Moreso, you’ll likely be with that development partner for the long haul as any updates, new features and bug fixes will all likely be routed through your dev resource too adding cost and a dependency that you can avoid with a traditional setup.
With all that customisation and flexibility comes complexity
With more power comes (in this case) more complexity. Headless builds can be feature-rich and of course virtually limitless flexibility.
However, the trade-off here is that headless setups are often more complicated; with more moving parts, and custom and proprietary codebases tying the front end to the backend together.
It’s another reason why it’s crucial you source a web dev partner that is dependable to ensure your headless setups runs like a well-oiled machine.
JavaScript frameworks can plague your organic rankings
JavaScript is often the bowels of any headless setup and equally JavaScript dependencies can make it difficult for search engines to access your content, crawl and index your site.
If you’re migrating from a traditional coupled CMS to headless, it’s critical your website doesn’t rely on JavaScript rendering to display HTML.
Consider server-side rendering or even a prerender layer to make your new site more search engine friendly.
Not all headless frameworks are created equal – do your research!
Finally, be sure to do your research. Not all headless frameworks are created equal. Some are super-lightweight but require more custom development to bring your project to life, others are more feature-rich and are better adapted to building pages with cool editors, live previews and more.
The framework you choose depends on the project at hand, your requirements, budgets, and other factors.
Do your research and be sure to choose a framework that best compliments your project!
Comments are closed.