A Headless Love Triangle
For retailers around the world, having a dynamic virtual storefront is essential. Especially so during these days of lockdown, when online has been the only way brands can sell. And just like with brick-and-mortar stores, the presentation of products is a key factor in the buying decision. So it makes good sense that brands are looking at the best way to revamp their stores with both a functional and visually appealing frontend.
This is why there’s so much buzz about “headless” content management systems (CMS). A headless frontend layer enables developers to focus just on styling, independently from the backend software. It allows easy switching of technologies without the need to revamp a complete stack. And it separates the frontend from backend technologies, making it easier to employ specialists to manage each part efficiently.
But how does an independent frontend layer work with an enterprise Commerce system and a CMS at the same time without, well, losing its head? (Sorry for the groaner.)
In theory, this is simple if the frontend layer is based on a modern framework like React, Angular or Vue and communicates with the Commerce system or CMS independently. But in reality, both input systems actually have a lot of leeway when it comes to structuring page layout. Both not only deliver data but also provide editing tools that let marketing teams take control over creative and merchandising.
This means the frontend layer needs to communicate with two powerful input systems at the same time – and that’s where things get tricky. Now specific responsibilities must be defined: What exact information does the frontend get from each system? Which system delivers the structural frame information of the page or does the frontend layer control that? And does a clear separation of concerns – good practice for delivering a seamless experience to the consumer – also provide a good experience for the editor?
In other words, you need to untangle the love triangle.
First of all, having a headless frontend doesn’t mean the business user gets cut out. Just because the frontend layer is in charge of defining what’s being displayed doesn’t mean an editor can’t retain control.
The big commerce systems have all made solid investments in creative and editorial toolsets, although there are still systems with limited functionality. The smaller commerce platform vendors actually restrict functionality to catalog and order management (although they do that quite well). But it’s always good idea to have a third-party CMS in the mix so the enterprise can maintain control of messaging across channels and languages.
And this is how a tricky love triangle achieves a happy balance. You have to consider the needs of each partner. (I realize I’m starting to sound like an advice columnist lol.) For example, the CMS provides building blocks to content managers so they can build new pages without coding skills. And with a powerful CMS, business editors can still define the overall structure of the landing page.
But when it comes to layout, marketing and merchandising teams have lots of questions: Should I have a big teaser at the top? Then maybe three smaller product teasers underneath it? Then a collection of elements in a checkerboard style followed by a classic product recommendation carousel? Or do I have a two column layout with my categories or topics listed as links on the left side and a number of classic images based banners at the right? Or do I want to mix everything up and start with a shoppable video right at the top of the page?
So here’s another question: Do we still have all this flexibility with a headless frontend layer?
Frontend developers can, of course, re-arrange these components through coding. But come on, those days are done! Now, we still have the Commerce system functionality but its editorial interface is primarily commerce oriented. Which means that all the capabilities we need in a CMS – content re-use, integration of user-generated content, blog capabilities, dynamic content collections with a mix of creative and commerce items, content scheduling and personalization – are pretty much missing.
Back to the love triangle. It’s pretty clear that having just a frontend layer and a Commerce systems is not enough. The CMS adds a lot of value, especially if it’s well-integrated with the Commerce Systems. So, it’s true: Three’s company.
CoreMedia Content Cloud allows editors to browse Commerce system catalogs, leverage categories and products as teasers, or publish rich media assets like shoppable images and videos allowing editors to go deep with their storytelling. The creative team is also empowered to decide how to structure each page (and even determine the hierarchy of the overall page). Products can be highlighted, the focus can change from brand to category, different themes can be deployed – the creative potential is limitless.
Keep in mind that one size does not fit all. Retailer, consultants, agencies and product vendors may each need to take a slightly different approach to headless. It’s all about which system gets which level of power.
But if you need to react quickly consider giving control to the CMS. The elements that build the page are still implemented by the frontend team, but the exact arrangement will be in the hands of your creative team. That means just a small number of modules built in the frontend will give your business team the ability to create hundreds of new of landing pages. Meanwhile, your Commerce system can still shine by controlling the catalog and your – hopefully increased – order volume.
Agile tech stack, clear system hierarchies and total creative control. Perfect triangle.