Is headless e‑commerce on Shopify Plus the way to go?

“Headless e-commerce is the separation of front-end from back-end and the powering of each through separate technologies specifically designed for each purpose, to create a total optimisation of both systems.”

Make sense?

Let's start super simple. With any e-commerce webstore, you'll have the front-end and the back-end. The front-end is what the customer sees on a PC, smartphone or tablet screen; it’s where they interact with the online store. The back-end is the technological architecture that drives and underpins the front-end. It's where the developer builds, runs and updates the commerce part of an online store - things like PCI compliance, payment processing and order capturing. 

Traditionally, e-commerce applications were all-in-one, meaning that both the front-end and the back-end sat on the same application, in what is called a full-stack or monolithic structure. With headless e-commerce the front-end of the online store - which you can think of as the “head” - is detached from the back-end; in this context, the “body”. This gives the retailer more freedom in the way their online store looks, works and serves customers.

The headless structure allows a different application or applications, and different technology, to drive the front and back-ends. Application Programming Interfaces (APIs) go in-between, allowing front and back to still “talk” to one another. At the same time, changes can be made to the front-end without anything needing to happen at the back-end - read more about what that means here - which ultimately allows the retailer to deliver a faster, more responsive experience to their customers than the traditional e-commerce apps allow. 

In essence, headless gives retailers the best of both worlds - the reliable, trusted e-commerce foundations of a Shopify SaaS solution, combined with the best-performing applications working at different facets of the front-end. Importantly, a headless retail brand is optimised for seamless integration into eBay, Amazon (a headless giant in its own right) and other shopping platforms - essentially any platform, solution or service which has an open API connection.

Reasons to go headless have shifted pretty quickly in the last 12-18 months. Previously, brands that wanted to invest in outstanding digital brand experiences for the customers often had to consider headless architecture.

However, since Shopify 2.0, the limitations on native e-commerce are far fewer. Brands can do a lot more with a native setup and deliver stunning, memorable e-commerce experiences without breaking the monolithic structure. 

We’ve built numerous “Digital Flagship Stores” on Shopify 2.0, here are some examples of exactly what’s possible today without going headless:

Filling Pieces

Denham

North Action Sports Group

Another big reason for brands turning to headless e-commerce in 2020/21 was the desire to scale internationally. Shopify’s previously inflexible CMS meant it was extremely impractical to run a store in multiple languages - an essential for any successful business selling around the world.

Thankfully, updates introduced with Shopify 2.0 allow merchants to build multilingual stores natively on the platform. The updates to Shopify Markets also mean merchants can sell in numerous currencies and even introduce location-specific pricing. 

For a lot of (mid-level) brands, these two reasons - a digital flagship store and global scaling - were the key deciding factors in decisions to go headless. Now they can both be achieved natively on Shopify 2.0, the question returns: why go headless?

There are still a few reasons why headless e-commerce is the more attractive option. Mostly they involve the interests of very (very) large e-commerce companies. Let’s run through them:

1. High-performance stores

The Shopify 2.0 updates are excellent and it’s possible to build stores with very high performance levels that help to boost conversion and grow e-commerce businesses. Trust us, we’ve done it.

However for the top, top performance levels, headless e-commerce still offers the best outcomes. Some brands have such a burning desire for performance that site speed is the absolute essential factor for them. Others have business-led reasons where the highest possible performance is actually essential to their success.

If you need a website that is truly top of its game in speed and performance levels, then headless is the way to go. However, from our experience, 90-95% of e-commerce brands get along just fine with the high performance capabilities of a native Shopify 2.0 store.

2. Specific tech-stack requirements

Some businesses have specific requirements for their website tech-stack. Perhaps their in-house development team are React gurus and they want to keep it running the front-end.

Or maybe there’s another framework they specifically want included. We used Next.JS for our custom headless setup, but there are a plethora of other choices out there. If a brand comes to us for a website, they want Shopify but they also want a host of other very specific technologies involved, we’ll encourage them to explore headless.

3. Location-specific content

At present, it’s not possible for native Shopify 2.0 merchants to upload location-specific content to their stores. For instance, if you have a store in France and another in Germany, both must display the same content in a native Shopify setup.

A headless store doesn’t have this limitation, meaning you could offer different products to customers in different countries.

However, Shopify are working on this. We don’t know when it’ll happen but an update will come that affords this flexibility to native Shopify merchants. So if you want location-specific content, the decision right now is up to you whether to build headless or wait out for the update.

Our advice would be to hold out and build natively, but if there are pressing business reasons why you need to show specific content in specific markets right away then headless is your answer.

Previously, headless e-commerce was more attractive to a broader range of brands and businesses. In the follow diagram you see the pros and cons of headless e-commerce and a native Shopify setup in Shopify 1.0:

As you can see, multilingual capabilities and a flexible content management system are notably missing on the native Shopify option. This was the situation that persuaded many brands to go headless.

That was until Shopify 2.0 launched last year. Here you can see the same comparison table but with the Shopify 2.0 updates:

Now a globally scaling brand can build the website they’re looking for natively on Shopify 2.0, without breaking up their tech stack and building headless architecture. The few scenarios we’ve noted above are still unresolved by a native Shopify store, however the number of brands that would now find headless an interesting option has reduced quite considerably.

1. Developers, developers, developers

Unfortunately headless does have some drawbacks. Firstly, converting to headless requires detailed restructuring of the data flow from the back-end to the front-end, which requires a specialist developer.

Whilst you can build a simple Shopify store yourself, one based on templates and themes with only a few basic features, if you want something more advanced like a headless solution there's no ignoring the fact that you'll have to hire at least one developer.

They need to integrate an API to get the back-end talking to your new CMS on the front-end and this is complex stuff. Every front-end app installation will also require a developer, but Shopify's back-end apps can be installed as before.

None of this means, however, that you're then chained to a developer each and every time you want to make changes to your site. All of our headless clients can update their front-end content quickly and easily using Contentful, without any help from our team. It's only new features and integrations that require our assistance, since Shopify's drop-and-drag feature no longer works in a headless setup.

We have headless clients operating with skeleton teams of only a handful of people running headless stores with ease. So if you're only a small business, don't necessarily be put off the thought of going headless. You should more consider whether the move makes sense for your business, can it take you to the next level?

2. Money, money, money

Of course hiring developers costs money. And headless developers have more expertise than others so often charge a little more on top. On average we see that headless projects costs 10-15% more than standard projects, most of which goes on time spent setting up the new CMS from scratch.

However, we often see people claim that headless stores also cost more to run and this simply isn't true. Yes you have to pay for your new CMS, however the costs for this are offset against the savings you will make in other areas.

For instance, if you were previously running a multilingual Shopify Plus store with 4 back-ends for 4 different languages, you would have also been paying 4x the monthly fees for whichever apps and tools you had running on that store. A headless solution removes this fee because you only have a single back-end no matter how many languages you have running.

Multilingual capabilities were possibly the number one reason for brands to decide to build a headless store. Now, you can build a store that supports multiple languages natively in Shopify.

We advise any mid-level Shopify Plus merchant that wants a store to scale their business around the world to stick with Shopify 2.0. If multilingual functionality is the driving reason behind why you might want to build headless, Shopify 2.0 can provide everything you need.

Why multiple languages are important to a Shopify store

If you're selling in multiple countries it's absolutely essential that your store is welcoming to the customers in each individual market. Around the world online shoppers have different requirements and store expectations, the top of which is always language.

Your store simply has to communicate in your customer's native tongue. If it doesn't, they will go elsewhere. Simple as that.

Reading a website in your own language makes a store feel safer and less of a risk, it makes a store feel welcoming and it makes it far easier for the customer to find what they're looking for.

A company from the Netherlands like us has a home market of 17-million customers. But if they can make their store accommodating across the EU they can reach a potential 440million+ customers. To do this, their online store must speak multiple languages.

Global scaling is a huge opportunity for merchants with a strong brand, strong products, and a great platform. That's why Shopify have taken the move to make multilingual stores far easier to build natively on the platform.

Previously on Shopify 1.0

Previously, Shopify merchants were faced with 3 options:

1. Translate their stores using translation apps.

This never goes well. The apps are still around today and we always say the same thing: translation apps should be avoided at all costs. In simple terms, they inject an extra layer of JavaScript into your website which ultimately slows everything down and causes severe bugs in the system. Never rely on translation apps for your multilingual Shopify store.

2. Duplicate their back-end.

Shopify Plus merchants can make up to 12 duplicates of their back-end, and this was a way to build a multilingual store. Each back-end can handle 1 language so the idea was to set up an additional back-end in each required language.

It sounds like a good idea until you realise that with every back-end comes all the additional work. If you have 4 back-ends, you need to upload each product 4 times, every image change happens 4 times, every piece of text needs updating 4 times, and so on.

There were a host of other problems with this technique: domain names weren't optimised, customer information was decentralised, account management was all over the place. It was one big headache, basically.

3. Build a headless store.

With headless you can run your store through a different CMS, e.g. Contentful, that can take care of multiple languages simultaneously. This was the big benefit of the headless tech-stack.

However that's no longer the case.

Multilingual stores on Shopify 2.0

Shopify 2.0 brought numerous new updates, including a change to the way metafields work. Metafields were previously hosted and edited via external apps but now developers can reach them directly through the admin.

Without getting too technical, they hold the key to unlocking multilingual stores on Shopify 2.0. For more info on all the updates, head here.

Despite Shopify 2.0's updates, headless remains a viable option for large Shopify Plus merchants. Going headless is a very technical job that requires some specific development expertise. Merchants that want a headless store have 2 options open to them:

1. Use a framework

Front-end frameworks are today's most conventional method. We use front-end frameworks Next and Gatsby.JS to build headless Shopify Plus stores, connecting to the Shopify backend with the storefront API.

We used to use Gatsby for all of our projects but have recently made the switch to Next since they updated their features. Now we pick and choose depending on the project and its requirements. There's more info below in the Tech Stack section.

2. Hydrogen & Oxygen

At Shopify's Unite conference 2021 by far the biggest announcement was the introduction of Hydrogen and Oxygen. In short they allow developers to build React front-ends on their own React server components and then host via Shopify's in-house servers.

The solution has been fully rolled out now, but it's still in its infancy. We predict that by the end of 2023 Hydrogen stores will be the norm and far more developed than they are right now.

We're already working on our first Hydrogen projects and we're incredibly excited by the possibilities. Whether a merchant would go for a Hydrogen store or use a front-end framework is something we discuss on a case-by-case basis. If you're interested in headless and want to know more about these specifics, get in touch for a free consultation.

To end we'll explain how we arrived at our headless starter theme.

Like a lot of other agencies developing custom themes for Shopify, we began developing themes on the Timber framework. 2 years ago, Shopify replaced Timber with Slate - a Shopify toolkit for developing Shopify themes. Slate was more advanced than Timber, with a more modern approach to Shopify theme development. We loved it.

So when Shopify announced they were discontinuing the Slate project we knew we had to act. Around that time we’d coincidentally been considering starting a Shopify starter theme of our own. The end of Slate made our decision for us. We would begin to build the Ask Phill Shopify starter theme.

Shopify theme development

But how to build a Shopify theme? The first step was to look at problems we historically encountered with both Timber and Slate, and look for ways to overcome them.

Overall our motivation to build a Shopify starter theme was:

• To guarantee our clients give the best online experience to their customers (short loading times, flexibility and PWA possibilities)
• To set our own innovative development standards and efficient development workflows.
• There were no supported alternatives online up to our standards.
• We wanted more flexibility while developing Shopify themes.

The research

Before diving in, we wanted to find out what our clients really wanted from a Shopify theme. The client is the most important stakeholder in the process - regardless of what a development team might tell you! - so their needs must come first.

We made a pros and cons list of the Shopify platform by asking ourselves: what are the Shopify features our clients love?

• A user-friendly backend that the client doesn't need to update and host
• Proper analytics and easy marketing pixel integrations
• Multichannel sales through Instagram with one click
• An easily adjusted front-end with the use of the theme customiser

Most clients that switch to Shopify are happy with the overall experience and possibilities the Shopify platform gives them. However there are always performance issues with monolithic structures and for those that need to operate at the very highest level, this can be a sticking point.

The trend is your friend

So how did we get from wanting to build a Shopify theme to headless Shopify development?

Whilst working on our starter theme we notice 3 major trends taking place online: headless commerce, digital flagship stores and progressive web apps (PWA’s). It was obvious to us that these trends were the future of e-commerce, which got us thinking about how to incorporate them into our Shopify starter theme.

We soon discovered that with headless technology in place brands can build a digital flagship store and/or a PWA. Headless is the key trend that unlocks all modern and future e-commerce possibilities. It made sense, then, that we should build a headless starter. Our attention then moved away from building solely a Shopify starter and towards incorporating headless technology.

To summarise, we like headless e-commerce on Shopify because:

• It’s easily extended to include more functionalities (e.g. for recurring payments)
• It’s using an alternative CMS that is specifically designed for content management. This enables us to use a higher resolution, next-generation images, 3D models and videos
• The possibility to make the website a PWA.
• More flexibility in optimising the speed of the website
• Making the website offline available
• Send push notifications to clients

The "Fill" Starter Theme

We call our starter Fill. We've rolled out it out on numerous projects over the past 4 years, successfully launching headless stores for Polaroid, Veloretti, Boretti, Miista, Haute Hijab Carine Roitfeld, and many more.

Eventually we plan to open source our headless starter theme. We want everyone to be able to use it and build headless Shopify experiences. Stay tuned for more info on that.

Tech stack

After more than a year of thorough research and experimentation, we settled on a preferred tech stack setup of Shopify Plus, Contentful and Gatsby. We've adapted since then and now use the Next.JS framework. We'll explain why below, but the important thing to note is our tech stack isn't fixed. This is the best combination of tools and softwares for now but as soon as a better alternative arrives, we'll test it out and, if we agree, incorporate it into our solution.

Shopify Plus

Shopify Plus is the most reliable e-commerce platform. It’s a cloud-based SaaS solution. It’s cost-effective. It has a decent price point compared to other enterprise platforms like Salesforce or Magento. It constantly innovates and it has a very open, headless-friendly API structure.

Contentful

We use Contentful for CMS because it comes without predefined content models, so we have freedom to create the content models ourselves. It has a very uncluttered UI and provides site users with a beautifully simple user interface. Finally, it’s platform-agnostic, with an API that lets us push content in an instant to mobile, web or almost any other platform that comes along.

Next.JS / Gatsby

Finally, we use Next.JS: a static and server-side site generator for building lighting fast websites. It's super flexible and simply the best in class site generator available today. We used to build on Gatsby but Next recently updated their functionality to be both static and server-side. As soon as they did this they overtook Gatsby and we made the switch straight away. In this business, it pays to be up to date with the latest technology and always be in the know for which future changes are on the horizon.