header-mobile-bg

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.

Stage 1: Fragmented: Multiple Channels

You’re a digital dinosaur!

You have a beautiful website, but with fragmented digital experiences, you run the risk of extinction.

It’s time to evolve.

Your audiences want a seamless experience, no matter what's happening behind the scenes. When your experience is different or difficult, it’s important to start with the basics, such as cultivating a holistic approach to online digital experiences. Realign your teams, platforms, processes, goals, and metrics around a comprehensive view of the online experience. Focus on the end-to-end customer journey cutting across channels, desktop and mobile.

separate channels animation circle t-rex dinosaur square
Stage 2: Integrated: Multiple channels

You’re a fish!

Signs of exciting life are starting to form. Your DX is responsive and adaptive but it’s not quite personalized yet.

Keep swimming!

The integration of your brand content across every touchpoint (website, online store, social media, emails, apps, point of sale) creates immersive experiences. These flagship sites combine content-rich brand experiences with immediate conversion capabilities. Business teams and marketing are closely aligned. However, while the digital experience is responsive and adaptive, it’s not yet personalized.

Connect with an expert
Stage 3: Instant: Global expansion

You’re a crocodile!

You’re taking it global. Speed and scalability are key and just like a crocodile, you’re fast…but you’re clumsy.

Oh snap!

In this stage, the online digital experience becomes completely dynamic. You need content that is global, yet relevant, with plenty of local insights: Who is the user? Are they using a mobile phone? Is it raining where they are? Is it snowing? If it is, maybe they need warm, waterproof boots. All of this contextualized information creates a better user experience. With one global orchestration, you’re able to adapt everything, in whatever country or language you choose – while keeping turnaround times low. So keep evolving.

Connect with an expert
Stage 4: Dynamic: Real time personalization

You’re a lion!

You’re reaching more customers in more countries and languages than ever before, and now you’re finally hunting and collecting info with precision.

But you can do more to keep your brand roaring!

As you graduate to the Instant level, you’re able to rapidly update everything - not just in one language and for one country, but in 20 languages and for 100 countries. Speed and scalability are key, driven by the need to roll out global campaigns in all languages and all touchpoints and make updates in minutes or hours, not weeks. But there’s still more to do to reach nirvana.

Connect with an expert
Stage 5: Immersive: Elevated experiences

You’re Captain Content!

You’ve done it! You have opposable thumbs AND you’re saving the world with your seamless, elevated customer experiences.

You're a superhero in the digital space.

Your digital world and your physical world are blending together in the most complementary way possible. When shoppers visit your store, they’ll be greeted with their pre-selected products. Language changes dynamically depending on country of origin – it's like the whole store was set up just for your one specific customer.

In this final stage, your customer experience is truly immersive and superior, and your flagship store merges your physical and digital world into one, with a truly personalized individual experience.

Connect with an expert