When I first started to work with Content Management Systems, I wasn’t entirely sure what value it brought to the project. I thought: You can create the same by just editing the source code of the frontend application. After that I spent some time developing e-commerce applications with Storyblok as the Headless CMS, and finally found out why it really matters.

In this article, I would like to dive deeper into the advantages of using CMS in modern e-commerce websites, but also state some difficulties and issues you may encounter while creating one.

The general idea

First of all, let’s take a look at the following visual example of the content + commerce architecture:

As you can see above, Developers and Editors can join forces in this architecture by adding data (e-commerce) and content (CMS) that can be combined by using the API Layer. Then, it is displayed to final users accessing your website through various devices like phones, computers, or IoT.

This may sound a bit complicated, so let’s take a look at a simpler example:

In the above Product Detail Page, we can see both data from the e-commerce platform (like description, name, image, etc) and the content (blog posts that engage with our users). Thanks to displaying not only e-commerce data but also content about how we can use the product, users are more likely to become our customers.

Headless CMS

Applications and tools following the headless patterns expose the API that allows other applications to communicate with it in an easy, structured way. APIs allow applications to access data from each other without needing to know how they’re implemented.

Communication with APIs is done using JSON (JavaScript Object Notation), and there are four methods main methods for sending and receiving data using REST APIs:

• GET: Retrieves data from a server. For example, pulling content from a database.
• PUT: Updates information in an existing resource. For example, updating a blog post or web page.
• POST: Sends data to a server and creates a new resource. For example, creating a new blog post.
• DELETE: Deletes a specific resource. For example, deleting a blog post or web page.

These methods explain what can be done with an API.

An API-first CMS separates the frontend presentation layer from the backend database, and instead, content delivery is handled using APIs. This gives an API-first CMS an advantage over a traditional CMS that tightly couples the frontend and backend together and limits the types of experiences that can be created. With an API-first CMS, content can be published to any channel, whether a website or mobile device, digital sign, smart speaker, or any other internet-connected device

Storyblok is an example of a headless CMS where the content layer is separated from the frontend presentation layer and the backend itself. Thanks to this approach, every part of the system can be easily scaled and maintained separately.

Types of content

There are several different types of content we can create in order to build a better relationship with our customers. This content should be created accordingly to your users' needs (for example, if your clients are usually older people, creating content on TikTok may not be the best ;))

• Videos
• Reviews
• Blog posts
• Use cases
• Ebooks
• And many more!

Deciding on the type of content is crucial to understand the needs of your customers.

Benefits of having Content in E-Commerce

Using content in E-Commerce can bring a lot of value so let’s take a closer look at some of the advantages:

1. It helps educate your customers - if you want your customers to click the Buy Now button, there is nothing better than a list of features and benefits of your product.
2. Create brand awareness - customers feel positive relationships with companies that create content.
3. Bring SEO value - having tons of content helps your website be higher in Google Search rankings, which results in more chances of customers visiting the shop and actually buying your product.
4. Improve conversions and revenue - a user reading an article about how your product resolves their problem can significantly increase the chance of buying the product.
5. Build strategic relationships- Apart from targeting your customers and users, great content can also help in creating partnerships and relationships with other companies.

These, however, are mainly business-oriented benefits. Having a CMS in your e-commerce provides also several developer experience benefits such as:

1. Composability - Organizations can integrate with the best tools available for each specific use case.
2. Future-proof architecture - Thanks to API, it is easier to integrate CMS with current and future services.
3. Improve developer flexibility and productivity - Without vendor lock-in, developers can choose the best-of-breed solutions they want to work with
4. Integrates well with static site generators- Headless CMS such as Storyblok integrates perfectly with static/hybrid websites such as those used for e-commerce.

Considering all this, having a Content Management System in E-Commerce has proven to be quite useful.

Technical difficulties

As you know from the section above, having content in E-Commerce can have several advantages. However, it also comes with some difficulties that you will need to resolve to make it work correctly.

Content Driven E-Commerce requires a proper sync between the E-Commerce platform and the Content Management System. In order to achieve this, both systems need to be deeply integrated.

You also need to have content creation knowledge in your company. Managing products and categories in an e-commerce platform requires a different set of skills than creating engaging content. To do that, you will need people who have knowledge about your product, current trends, content creation, and marketing.

Adding a Headless CMS to your e-commerce technology stack means another tool that you will need to work with. Some companies prefer to keep their stack simple and do not extend it with a content creation tool such as CMS. In some cases, having a content management system can be a bottleneck in the e-commerce application architecture. Let’s imagine that your system has a relationship between e-commerce and CMS: for example, you store product IDs and names in the CMS. Displaying the Product Page would look more or less like this:

1. Fetch the ID of the product from the CMS.
2. Fetch the product from E-Commerce platform based on the ID from CMS.

If at any point, your CMS would fail, your online store would not be able to correctly serve the data to your customers. To mitigate this kind of issue, you would need to implement a fallback functionality that is enabled when CMS is down and then uses the ID’s directly fetched from the E-commerce platform.

Implementation of the Composable Commerce application with Nuxt, Shopify, and Storyblok

A few weeks ago, I published an article for Storyblok about building a Composable Commerce with Nuxt, Shopify, and Storyblok that you can check out to learn more about the technical implementation of a CMS in a modern E-Commerce application.

Building Composable Commerce with Nuxt, Shopify, and Storyblok

Here, Nuxt is used as the frontend framework (so-called storefront), Shopify is the e-commerce platform and Storyblok is the Headless CMS. Thanks to this approach, we can add dynamic content to our e-commerce application, but also get some custom data from e-commerce in Storyblok and display it in Storefront in the ways we want (i.e. with different orders).

Summary

Having a content management system in e-commerce provides a lot of value. However, it also comes with challenges that you will need to solve or protect against. By using a CMS in e-commerce, you will be able to leverage content to engage with your customers, improve SEO, increase conversions, and much more!

Storyblok: The perfect CMS for e-commerce

Storyblok provides all the functionalities of a CMS that you may need for your e-commerce system. It offers great value for both developers and content creators, enabling you to take control of your content no matter what channel you want to publish it on. Apart from the CMS itself, Storyblok has several APIs that help create exceptional user experience, fast content delivery, and a content management API with a simple interface.

Storyblok also comes with several integration plugins with e-commerce platforms such as Shopify, BigCommerce, Commercetools, and many more!

You can use them to easily fetch e-commerce data directly into the CMS and to your frontend. With Storyblok’s eCommerce integrations you can easily build performant storefronts with your favorite technology, be it a website or a mobile app, without being constrained by the limitations of more traditional eCommerce systems.

Learn more about building an e-commerce system with content and marketing in mind by reading the following white paper: Best-of-Breed or All-in-One: Setting Up Your eCommerce Marketing Technology.