CoreMedia Goes Spartacus


Philip Hemptenmacher

For some time, “headless” has been the hottest trend in Content Management Systems (CMS). And for a very good reason. A headless architecture allows enterprises to separate content data from the frontend display, splitting up the frontend and backend, and therefore paving the way for an agile, microservice-based architecture.

As a CMS vendor with a 24-year legacy of innovation, CoreMedia fully embraces headless architecture. In fact, a clear separation of content from frontend delivery – as well as a structured view independent of content data – has always been part of CoreMedia’s DNA. CoreMedia Content Cloud has always been a fully decoupled CMS with its separation of the management and delivery sides.

Now here comes Spartacus, SAP’s first Angular-based frontend store for SAP Commerce Cloud. It’s a powerful eCommerce tool that’s been winning over customers and partners left and right. Naturally, one of the first questions is: Can CoreMedia Content Cloud integrate with Spartacus?

The answer, of course, is: Yes, we can.

In fact, we can do it much better than other systems. This is because CoreMedia has decades of experience integrating with flexible frameworks like Spartacus. And it means we can support advanced content management capabilities, such as shoppable stories, images, and videos, which requires integration of both the eCommerce catalog and frontend.


For some background, the catalog integration of SAP Commerce Cloud (formerly Hybris) is already part of CoreMedia Content Cloud. This means the content editor can access the product catalog in real-time right from within our editing tool, CoreMedia Studio. Using the same tools for all content pieces, editors can easily access products and categories and combine them with editorial content to create more engaging experiences.

Examples here include product and category banners, stories with embedded products, or shoppable images and videos. And because CoreMedia´s delivery components are commerce-enabled, all commerce data is loaded on-demand via the respective APIs of the eCommerce system using the commerce hub adapter.

Screenshot SAP Commerce Cloud Catalog

Screenshot SAP Commerce Cloud Catalog


Based on the existing CoreMedia Headless Server, which provides a flexible GraphQL API, the frontend integration is straightforward.


The Spartacus storefront uses the same CMS page-building concepts as other Hybris storefronts. Pages are based on templates with different slots that contain components. A component can be a native Spartacus CMS banner component or a CoreMedia component. The latter comes out of the box with CoreMedia’s SAP Commerce Cloud integration and can be used with Spartacus as well. A developer only needs to create the corresponding view component in Spartacus, based on Angular.

Once registered with the Spartacus layout builder, Spartacus will build CoreMedia components in the respective page slots as they have been defined by a business user in Smartedit.

Screenshot Creating a CoreMedia Component

Screenshot Creating a CoreMedia Component


After being created, the CoreMedia components then need to be filled with content data. For that, we have injected an Apollo GraphQL client into the Angular app, which retrieves the data from the CoreMedia Headless Server GraphQL API, based on the content slot information. This data is then used to create the individual view components, such as teasers, videos, slideshows, and lists.

If you want to learn how to write GraphQL queries for CoreMedia, take a look at this post.

Spartacus Category Page

Spartacus Category Page


CoreMedia supports content editors with multiple preview features. For example, CoreMedia Studio allows users to trigger an “integrated” preview based on delivery channel, target device, scheduled time, and persona. And these features are available in a headless frontend such as Spartacus as well.

To set this up, we only have to include the CoreMedia preview JavaScript files in the Spartacus app. After adding some additional device size configurations in the storefront header, Spartacus is able to run right inside the CoreMedia Studio preview panel, offering basic preview features like viewport selection. By adding more metadata to our components, we can enable preview-driven editing. Our documentation provides a comprehensive view of how to set up content metadata.

Screenshot Spartacus with Preview

Screenshot Spartacus with Preview


Of course, for a full production-ready integration there are many more steps. As with every system integration, the devil is in the details. But hopefully this post provides a good overview of how straightforward the process is due to the existing product integration of CoreMedia Content Cloud and SAP Commerce Cloud and the CoreMedia Headless Server based on GraphQL.

To learn more about how CoreMedia can help SAP customers, download a free copy of our new guide 5 Smart Ways to Optimize Your SAP Commerce Cloud Solution.

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