Headless CMS in eCommerce

The monolithic systems have been around for a very long time. However, it is important to know the modern approaches when revamping the architecture or starting a new greenfield project. Monolithic CMS tend to suffer from eventually higher maintenance cost as well as lack of flexibility the modern software development practices may require. Headless CMS has recently become a hot topic that aims to solve many inherent issues of the monolithic system. However, there is just so much information about it online that it may get overwhelming at first. In this blog post we are aiming to introduce you to some basic ideas and help you decide whether the headless CMS is the right approach for you.

What is a headless CMS?

Simply speaking, “headless” means a system without a front-end of its own. Normally, CMS is responsible for not only returning the content, but also rendering it in a particular way. The typical response from the CMS would be HTML code, CSS and Javascript, everything coming from the same system. Headless CMS, on the other hand, would return only the content, i.e. the text of the blog post or the marketing text of the landing page. It is a system that returns the content in a way that is not human-friendly, but computer-friendly.

Why would anyone want such a thing, you may ask. What is the use of my store when you can not see any cat pictures, beautiful color scheme you so carefully designed, and the amazing shadow effect on the “Buy it now” button your designer came up with? Do not worry – you will still have all that. But instead of CMS being one single thing that is responsible for both content and presentation, the concerns are separated. It allows people who are responsible for content to work on content, developers are able to develop independently and designers can change the way the website looks. Separate components are functioning independently, at the same time providing a seamless integrated experience to the user.

How can I benefit from a headless approach?

Flexibility

Some shops are essentially hierarchical catalogs of products. But, not everyone is that same. If your eCommerce store has a lot of content-heavy pages, such as blog post, marketing material, magazine-style layout catalogs, you may want to have more flexibility over their visual representation. it may be very hard to implement these using the standard page builders eCommerce engines provide. This is when a separate headless CMS system comes in handy.

eCommerce software is designed primarily to sell products. And indeed, it knows very well how to handle orders, provide search functionality, show related products, or process payments and shipments. What it does not do well, however, is provide necessary tools to design that special section of your website related to, for instance, a marketing campaign or an expo follow up. However, using a headless CMS allows your designers to have the freedom to create the page in that particular way they want, and provide users with that unique experience you had in mind.

Future Proof

The frontend technology ecosystem is developing very rapidly, with constant improvements in speed, logic, features and maintainability. What was the go-to library or technology just a few years ago may quickly get outdated and no longer supported. With traditional CMS systems it is easy to get locked in older technologies and find it hard to migrate. With the frontend being completely independent from the backend, frontend developers can easily roll out changes without needing to worry about other parts of the application.

Separation of Maintenance Responsibility

Simply put, it is more effective. Separating frontend from backend allows things to be worked on independently, in parallel, reducing the likelihood of teams blocking each other. Moreover, a single production instance of the headless CMS can serve content not just for production pages, but also for all sorts of instances or prototypes.

This means you can test ideas more easily and prototype quicker. See how landing pages look like with real content while both the content and design are still being worked on. All of this without any hassle of manually copying content updates back and forth between different systems.

Platform Agnostic

In 2021 Klarna published a survey result that indicated a very strong trend - more and more people do shopping on their smartphones, as opposed to traditional desktop websites. Generation Z use of mobile phones when shopping went from 56% to 75% in just two years. Similarly, surveys by Statista show that even with the availability of a website, adapted to work on mobile devices, the preference is still given to mobile apps.

If you want to stay ahead of the game, it is vital to keep up with the shopping trends. The same headless CMS can serve data for the website and for the mobile app. Headless CMS provides data in a format that is easier to be consumed by software, so platform independence comes for free.

When is Headless CMS not the Right Choice?

Small Scale

On a smaller scale, monolithic application is a cheaper option. If the shop is small, does not have a lot of custom content, does not get updated often, has a small team or low budget, it is a better idea to stick to the good old Page Builder your e-commerce software provides. Most, if not every, e-commerce solution provides tools for contact form, FAQ and legal section of the website, and sometimes it is more than enough.

Headless CMS is NOT a Page Builder

One major difference between a headless and traditional CMS is, as discussed, decoupling between presentation and data. This means that most likely the content of the page would be returned as a JSON object, with lines and paragraphs being split into arrays. There will be no style associated with the content, by design. It means that a designer needs to create the layout of the page from scratch, and there needs to be frontend logic in place defining how the data is to be presented. Content team will not be able to use many of the rich editor features taken as granted. Of course the technology is developing rapidly, and headless CMS vary from each other by functionality, but images drag and drop, font style and size, grid layout and other features may be missing or not as straightforward. This is because the main concern of the headless CMS is pure data itself, not how the data is displayed.

Summary

Headless CMS can help you take your team efficiency, ease of maintenance, store availability and user experience to a whole new level. However, it should be noted that while there are many use cases where a store would benefit from such an approach, it is also important to know when the complexity outweighs the need. Decoupling opens doors to so many new ways to deliver content to the users across different platforms and continents, bringing to life that unique feel you had in mind for the store, breaking away from generic layouts and structure. It is easy to see why headless CMS is talked about so much now. There are many more things to write about, however, it would require a book, not a blog post. We hope that this blog post gives a general overview of the idea and concept behind headless CMS,. Feel free to reach out if you are interested in this topic!

• CMS
• content management
• headless
• Headless CMS