Chasing customers’ attention that is divided into multiple online channels - from retail shops to the web and onwards to mobile, social media, areas included Augmented Reality and wearables - is not an easy task. Yet, it must be done, and it must be done fast. Any roadblocks in content delivery are slowing down the business growth and directly jeopardize the conversion rate. What Content Management System eliminates these bottlenecks? Headless CMS, of course, but - at the popularity peak of headless technologies - this clarification doesn’t bring any help. So... let's dive into details. 

A lot is going on in the eCommerce landscape lately, and headless or - better said - MACH technologies are definitely one of the beneficiaries of the market rise. Their crucial advantages are flexibility and short time-to-market, and it is exactly what merchants are looking for these turbulent days. Of course, the concept is hardly new, but we’re not here to take a history lesson. 

Read more: What is Headless Commerce

Instead, we’d like to introduce you to the best-of-breed Headless CMSs natively integrated with Vue Storefront and walk you through all the possibilities you can gain thanks to them.

Read more: What is headless, and why is it the future of e-commerce? 

We’ve already got four Headless CMSs on board, every one of them with its unique advantages, but they all have one thing in common: they are the tools that bring you to the world of omnichannel sales.

The main point of being headless in cases of CMSs is to support a shift from a traditional web-focus approach to creating experiences that actually fit into the customer lifecycle. And a short self-analysis is enough to conclude that the paths we follow before making an online purchase winding today. We wander around social media back & forth, open e-mails, watch looped videos, receive millions of notifications and constantly chat on messengers. The computer is by no means the primary device we use for all of that.  Smartphone is. (Check the time of your online activities if you're not buying that).

To "catch us,” brands need content experiences tailored for channels where their customers happen to be, and it is safe to say that it will not be only the website. How to address this issue? The platform used to fuel these experiences must be flexible enough to support content experiences across multiple devices and channels and collaborative workflows. Content and its presentation cannot be intertwined, as it means you have to manually recreate content each time you want to use it for a new customer type or channel. Headless CMS separates content creation and presentation, and this separation enables marketing teams to create content-powered experiences.

Storyblok, Amplience, Contentful, Contentstack, and Lexas have all of it covered because they are definitely an elite squad in the Headless CMS. Moreover, they are all natively integrated with Vue Storefront, which can save a bulk of your developers’ time. But, cutting to the chase, how do Headless CMSs integrate with Vue Storefront? What assumption did we tool developing the integration? And - last but not least - is it really such an easy-peasy to connect CMS and VSF?

During Vue Storefront Summit 2021, a massive part of stage time was taken over by Headless CMSs issues. Łukasz Borawski, Head of CMSs at Vue Storefront, opened up the topis with a detailed talk about general architectural assumptions VSF integrations.

Here is a little sneak peek:

In headless CMS, your content is built on top of the content types. We can create a super simple content type, e.g., the banner built from regular data fields. On top of them, we can build any content.

The content type can be seen as a component that will be corresponding with the component in your application, but it is also possible to wrap them freely. This so-called "wrapper" will also be a content type, but it will contain the components, e.g., content types for the page. Merchants can build new pages such as landing pages, promo pages, season pages, etc. from content types created in CMS. The page is something like a "wrapper for the components.” 

Łukasz Borawski, Head of CMSs at Vue Storefront

Later, he passed the mic to our partners from Storyblok, Amplience, Contentful, Contentstack, and Lexas, who shared details about how their products work with Vue Storefront.  

All the talks are available on the Vue Storefront YouTube channel.

As a bodiless frontend platform, Vue Storefront comes with native integrations with many of the best-of-breed Headless CMSs. However, it doesn’t exclude adding others. To stick with the terms “bodiless” and “headless,” integration can be considered a “neck,” and the “neck” can connect VSF with pretty much every CMS that you need. Native integrations, however, available in the Enterprise version of Vue Storefront, save your developers' work hours. And they are doing good work. The integration with CMS requires just installing a simple Nuxt module to which we insert only access data. Then we can use a relatively (typical for architecture) simple and readable API to download and process the content.

It is not a problem to switch from one system to another during the game. All it has to be done by developers are installing a package that supports integration with another solution. New access data are provided in the configuration file, and the content itself is downloaded and processed in the same way as in the case of other integrations.

Creating custom integrations is also not rocket science. They can be developed based on the already existing integration with Storyblok or any other CMSs. 

Simplicity, universality, agnosticism, and convenience - those were the central assumptions we took, and they defined the way we had build Vue Storefront Headless CMS integrations. We were aware that CMSs, being the platforms where the content creators' and developers' paths are crossed, require a lot of attention. We wanted to provide OOTB integration with the best-of-breed solutions on the market without forcing them. 

Łukasz Borawski, Head of CMSs at Vue Storefront.