A backend and a frontend - inseparably combined. For a long time, the fixed connection of the presentation layer and the logic behind it was considered the go-to solution in e-commerce. However, at the latest since the arrival of mobile shopping, this has been questioned: nowadays, content must be accessible across a wide range of channels and device types without any loss of quality. However, this is difficult to achieve with monolithic systems.
The headless CMS, on the other hand, meets the requirements of a multichannel strategy much better. This is one of the reasons why it has been one of the e-commerce buzzwords par excellence for some time now. In this blog post, you will learn what the term is all about, which may seem a bit strange at first glance, and what the strengths of headless commerce are.
Table of contents
You want to connect a headless CMS to your Shopify store? Then contact us and we will be happy to help you.
Headless CMS: Full-stack technology is no longer up to date
Content management systems, CMS for short, have significantly simplified the creation and maintenance of content on the web. The most common representatives such as WordPress, Typo3 and the like always follow the same approach: the user uses a specific template and creates his content in the backend, which is then displayed to visitors in the frontend. The template determines the visual appearance of the content.
This principle works well as long as the content is optimized for only one device category. From today's point of view, however, this is no longer up to date, as user behavior on the web is now very multi-layered. In the B2C sector in particular, the proportion of mobile access is increasing more and more. It can be assumed that smart speakers such as Amazon's Alexa, Siri, Cortana & Co. will change this development once again. As early as 2021, 27 percent of smartphone users used voice search to search the web (source: Google). Smartwatches are another device category that will have a lasting impact on user behavior.
Reading tip: Latori client LFDY serves a young target group that predominantly shops on mobile. We migrated the label's online store from Shopware to Shopify Plus.
What is a Headless CMS?
Unlike the classic full-stack approach, the frontend is separated from the backend in a headless CMS. The actual content management system consists only of the backend, a database, and an API through which the frontend is connected. This architecture offers many advantages, which we will discuss below. But first, we would like to point out the differences between the headless CMS and the full-stack system.
|Traditional CMS (Full-Stack)
|Inseparable connection of backend and frontend
|Decoupled frontend, is addressed via API
|Individual content management for each channel
|Central data management in one system
|Predefined frontend, only conditionally customizable
|Unique front end for each channel
|User guidance is the same across all channels
|Individual user guidance possible for each channel
Headless CMS advantages for companies
Decoupling the frontend from the logic of a store system offers numerous advantages. In the following, we will explain the 5 most important ones in more detail.
#1 The creation of target group-specific content is simplified
According to a Statista survey, 44.59% of the website operators surveyed personalize the content of their online presence. In doing so, they are responding to the call of their customers, who value an individualized shopping experience and want to find information and products that are relevant to them quickly.
A headless CMS makes it easier to create customized content. It enables specific layouts for different channels. Regardless of the device category, certain page elements can also be played out according to location, time and/or season.
Reading tip: Latori at Welt der Wunder: How Smart poles makes billboard advertising digital.
#2 Good adaptability to the life cycles of a system.
Once a system integrated into the backend is running smoothly, it performs its service for several years. ERPs in particular are sometimes in use for a decade or more without receiving any significant updates - their core processes still function. In addition, replacing the system would be very time-consuming and usually also associated with high costs.
A frontend, on the other hand, has a much shorter lifecycle. What is considered modern and user-friendly today may already be outdated in two years. By separating the backend and frontend within the Headless CMS, you can better respond to the different lifecycles of both levels. Thus, the backend remains largely unaffected by a modernization of the frontend and vice versa.
#3 Better performance
#4 SEO Benefits
An improved user experience and faster loading times also result in indirect advantages for search engine optimization, which is still essential for the visibility of online stores.
It is to be expected that users who are presented with content that is suitable for them are less inclined to leave a page again directly. Dwell time and bounce rate are indicators for search engine bots, as it can be assumed that pages with particularly long sessions offer relevant and high-quality content. Accordingly, they are ranked higher.
Furthermore, fast loading times are not only significant for the user experience. Website performance is also becoming an increasingly important criterion for Google & Co. For this reason, Google introduced the Web Vitals in 2021, which are intended to better assess loading times and are included in the indexing as a ranking factor.
Reading tip: You are searching for an SEO-Guide for Shopify-Stores? Then we recommend this article.
#5 Shortening of process chains
Even today, a responsive website is often "only" the mobile version of a site optimized for the desktop. If you wanted to use other channels in addition to the desktop and mobile versions, you would need different full-stack systems. You would therefore have to maintain your content several times, which unnecessarily inflates your processes and ties up resources.
A headless CMS allows you to centralize your content, which can be maintained across channels in one and the same backend. In addition, modern systems often have so-called pattern libraries, which define exactly how a particular element should look. This creates consistency and speeds up the creation of new pages.
Shopify Plus, Headless thanks to Storefront API
Of course, the Canadian commerce platform Shopify is not immune to the headless commerce trend. The system's enterprise solution, Shopify Plus, can therefore be operated as a headless CMS. This is made possible by the so-called Storefront API. This is based on the GraphQL query language, which guarantees a particularly high-performance and resource-saving interface.
Merchants can use the API to program their own frontends or connect external systems, e.g.:
Headless CMS vs. Traditional CMS vs. Decoupled CMS
A Traditional CMS is an all-in-one solution where the backend and the frontend are closely connected. An example of this is WordPress. A Decoupled CMS, on the other hand, is a hybrid solution that combines elements of the Headless CMS and the Traditional CMS. The differences between the three systems are shown in the table below:
|✅ Compatible with various front ends
|✅ No programming knowledge required
|✅ Front-end developers are free to choose the technology they want to use
|✅ Freedom of content design
|✅ A self-contained system
|✅ Unites the advantages of Headless CMS and Traditional CMS
|✅ Can extend content to all channels using APIs (omnichannel)
|✅ Easy to operate
|✅ Protection against outages and cyber attacks
|✅ Protection against outages and cyberattacks, as frontend and backend run separately from each other
|✅ Firmly bound to the front end
|✅ Fast and flexible further development
|✅ Fast and flexible further development
|✅ Complete control over content and presentation
|✅ Suitable for an omnichannel strategy
|Less suitable for beginners, as technical knowledge is required
|Frontend can be designed via the backend
|More work for developers than with Traditional CMS
|The front end must be developed separately
|Worse performance with larger scale
|More time required than with the Traditional CMS
Headless CMS Examples: These headless CMS exist
Storyblok is a headless CMS that enables powerful content experiences. What makes this CMS special is that it is aimed at both developers and marketers. These are the features of Storyblok:
Rich text editor
Content performance analysis
Latori client Horando decided to use the headless CMS Storyblok. We programmed this for them, added content and connected the CMS to Shopify Plus using an API.
Latori also uses the content management system to create content and present it on their website.
The Ghost CMS is used by NASA and Apple and is probably the best-known headless CMS. The content management system is based on the Node.js framework and, thanks to the REST API provided, is ideally suited as a headless CMS.
Cockpit is a German headless CMS. The open source solution is best suited for the usual PHP stack.
Directus is a self-hosted content management system with an open source based framework. The system offers an API as well as an intuitive admin interface. It is based on the PHP programming language and Backbone.js.
Our conclusion about Headless CMS
In view of its many advantages, the headless CMS is highly likely to replace monolithic full-stack systems in the medium and long term as user behavior on the web continues to diversify.
Shopify Plus can already be operated headless today, enabling retailers to implement an efficient multi- and omnichannel strategy.
If you also want to use the modern headless architecture for your company, we would be happy to support you. Contact us
Frequently Asked Questions about Headless CMS
What is a headless CMS?
In a headless CMS, the frontend and backend are not connected to each other. The frontend is connected here with the help of an API.
What is a traditional CMS?
A traditional CMS is an all-in-one solution where the frontend and backend are closely connected, such as WordPress.
What is a Decoupled CMS?
A Decoupled CMS is a hybrid solution and combines the advantages of Headless CMS and Traditional CMS.
Which Headless CMS are available?
There is now a good selection of headless CMS, e.g. systems like Storyblok, Ghost or Directus.