There’s a lot of hype around at the moment with using Shopify Plus to create a headless commerce experience. And so there should be, a headless commerce that uses Shopify Plus is a powerful tool and creates a world of opportunity to improve the user experience. Last year we decided to invest heavily into researching the best practises for headless commerce with Shopify.

We’ve managed to streamline a process that takes away all the headaches associated with headless and improves the user experience for our merchants and their customers. In this article we’re going to discuss exactly what headless is, how it can be used with Shopify Plus and the benefits of a headless commerce.

What is Shopify Plus Headless eCommerce

A traditional eCommerce platform, such as Shopify, handles and serves both the frontend and the backend of the site. This is great for most merchants that require basic functionality and an easy to use backend system. It makes the day-to-day running of an eCommerce business much easier and streamlined as everything is in one place and is simple to use.

A headless architecture, decouples the front end experiences from the backend. An example of this would be, using Shopify to serve the eCommerce functionalities and another headless CMS to serve the content that the customer will see. Using a CMS to manage all the content in a WYSISYG editor allows the client to make content changes but in a different way to the Shopify default editor.

These content changes are then passed via an API to the frontend and served to the customer. This is called headless because the Shopify ecommerce platform no longer uses the “head” aspect of its functionality and instead serves the head via the API.

Benefits of Headless eCommerce with Shopify Plus

The main benefit of going headless the ability to optimise all the various functionalities of the site. Because all the content, functionalities and 3rd party technologies are now all served via various APis, it means that each one can be individually assessed and optimised. This approach to a headless commerce architecture offers many benefits including:

Speed

While we wouldn’t advise a headless approach purely for the speed benefits, the ability to increase your sites speed is unparalleled. This not only helps from a customer journey point of view, but it can massively impact your organic ability to rank in the SERPs. Speed is one of the most important factors in any eCommerce business. Check out these 8 ways to increase the speed of your Shopify store.

UX and Design Flexibility

Your brand is your business, and your business and brand is unique. The ability to break free from the design constraints that all commerce platforms have will allow you to create something that is truly unique to your brand. This can be invaluable when it comes to brand recognition and user journeys.
Using a headless solution allows you to build a lightweight ‘presentation layer’. This lets you to map out exactly how the user journey should work and gives you the flexibility to create something more bespoke.

Progressive Web Application Capabilities

Sites that offer much more than just eCommerce find that a headless commerce solution will help them serve their PWAs (Progessive Web Applications). PWAs are essentially bringing the functionality of a traditional phone apps and serving it in the browser. These are usually pre-loaded in the browser to make the user experience as seamless as possible and offers some unique functionalities.

Within the core of Shopify, building out Progressive Web Applications is difficult and more often than not require external services. By building these PWAs into your headless eCommerce solution, it can all be integrated seamlessly and served in a scalable and fast way.

Custom Content Management

All the content is served from a single CMS platform, that can be customised to suit. In the planning stages of building out a headless system, we would look at what content needs to be served and where it needs to be served. We’ll then customise the CMS system so it’s easy to use and manage. This is particularly popular with clients that offer different types of content, such as recipes or how-to guides.

Custom URL Structures

Shopify is a closed system which means you can’t access the core code to amend core functionalities. This offers so many benefits in terms of security and accessibility. However, if you require a custom URL structure, then a headless commerce coupled with Shopify will allow you to that.

This can be beneficial in terms of SEO, although it may only have a small benefit for your SEO strategy it’s still a benefit. It can also be beneficial from a usability point of view if you have a lot of different sub-folders in your structures.

Internationalisation

We’ve written a lot about internationalisation with Shopify and the benefits of it. However, using a pure Shopify Plus offering means that each country and language needs to be set up on different subdomains. There’s nothing wrong with this approach in terms of usability, UX and SEO but some merchants might want to keep the internationalised sites in subfolders rather than subdomains.

Because the URL structures can be manipulated in a headless environment, it means that you can create subfolders with different locales and languages in them. This allows for much more freedom and flexibility when we look at internationalisation and can be integrated in a seamless fashion.

Using a customised headless CMS means that you can add in fields to create a hreflang strategy from within the content editor. The flexibility of a system like this will ensure that your internationalisation strategy stays on track and becomes as optimised as possible.

SEO Benefits to Headless CMS

Technical SEO plays a major part in any SEO strategy and so understanding the foundation that a site is built upon will help you optimise it further. As with everything to do with SEO, speed is key. A headless eCommerce solution allows you to optimise the speed of any and all of the API calls to content and functionalities.
When you couple this with a react application this can serve your site in lightening fast times. This may give you a competitive edge over your competition and give your site a boost.

The URL structure can be manipulated to help with your keyword SEO strategy. While this may offer a very small advantage to your SEO strategy, it’s still an advantage, nevertheless. Being able to serve translated content onto custom URLs will help with your international SEO strategy. It will also let you manipulate the hreflang strategy from within the content editor which makes managing it easier and less likely to go awry.

Shopify as a headless architecture

When you decouple the head from the Shopify Plus offering, you end up loosing a lot of the Shopify core functionalities. While most of these will be replaced with the new headless CMS system, it’s important to take note in your initial scoping session to make sure you don’t miss off any important functionalities.

Customer account

The customer accounts are native to Shopify and when you use Shopify as headless commerce solution, the customer accounts will no longer be available.

WYSIWYG editor

The native WYSIWYG editor in Shopify will no longer work with the front end of the site. However, this will be replaced with the custom CMS of your choosing which, if implemented correctly, will offer more functionality.

Shopify Apps

Shopify apps will no longer be plug and play. The way that the front end of the site is now served means that apps will not be able to run alongside. Instead, custom API calls will need to be made in order to serve the content in a fast and efficient manner.

Theme Editing

While your developers will be able to customise the new headless sites appearance and functionality, any theme customisation that was previously possible via the Shopify backend won’t be possible anymore. This includes; sections, navigational options, and adding pages.

Is Headless Right for your eCommerce Store?

We’ve covered the main benefits of a decoupled architecture and a headless commerce engine. But to work out if it’s right for you, then you have to ask yourself a few questions.

1. Do you have extra functionality that can’t be created on the core Shopify offering?

   Shopify Plus is a fantastic platform to build an eCommerce business on, but due to the nature of a SaaS, access to the backend is limited. Headless will help if you’ve got custom functionalities that can’t be built directly within Shopify.

2. Do you need custom URL structures?

   While we can manipulate the URL structures within Shopify slightly, if you need a full custom URL setup then a headless commerce solution will be able to help you.

3. Do you have a planned out customer experience, UX, or design requirements?

   Customising the user journey to best suit your brand and marketing strategies is important. While the majority of design elements can be done within Shopify with a custom theme, special designs may require a headless option.

4. Do you need lightening fast speeds?

   If you’re in an industry where a 1 second load speed is slow compared to your competitors, then a headless solution may be able to help you out. Because of the decoupled architecture you can optimise the site and when it’s served with a react front end it’s common to reach speeds sub 1 second load time.

There is no single reason to move to headless, but when you combine all the benefits of headless, it’s easy to see why merchants are making the switch over. We would strongly recommend analysing headless and making a business case for it before jumping in.