Integrating Commercetools with CoreMedia Content Cloud

Philipp Hofmann_retu_sRGB

Philipp Hofmann

Over the last few years, CoreMedia Content Cloud has integrated with every major eCommerce system on the market. Some of these are delivered as a bundled product (including Salesforce Commerce Cloud, SAP Commerce Cloud and HCL Commerce) while others are implemented on a project level (including Elastic Path, Magento, Spryker and a variety of homegrown systems).

And now we’re excited to announce a partnership with commercetools, a leader in next-generation commerce software.

The good thing is that all integrations follow the same approach. Which is: they use an integration API layer known as the CoreMedia Commerce Hub that is deeply integrated into the CoreMedia platform. This integration includes an editorial interface (called CoreMedia Studio) featuring comprehensive preview capabilities and all of the associated delivery components (the CoreMedia Content Application Engine for server-side rendering and the CoreMedia Headless Server for client-side rendering).

The benefits of this approach are clear. Because when adding a new integration, enterprises can focus just on providing the required data instead of having to work out how to expose the integration to marketers and frontend developers.

Here’s an example from the Salesforce Commerce Cloud integration. This is what things look like within CoreMedia Studio.

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

Marketing users have full access to the eCommerce catalog without having to switch between tools. They can easily drag-and-drop items from various systems onto a landing or category page. (And the system doesn’t copy any product data, of course, it’s just referencing items via the eCommerce APIs).

So not only do marketing users have full access to all product data but they’re also working with a full preview – a combination of product data from the eCommerce system and content from CoreMedia – which is directly integrated into CoreMedia Studio.

This preview immediately reflects changes across all formats, because the key to enabling marketers to publish content consistently – on all channels, in all languages, in any currency, etc. – is to let them do this without needing any technical knowledge.


So here are some questions to consider before integrating CoreMedia with your own eCommerce system (along with our answers).

Does the eCommerce system come with an API that exposes the full catalog, including products and variants? Most systems today have this kind of API in place.

What’s your desired integration approach? CoreMedia can address a variety of scenarios – for example, delivering fragments or data into an existing experience (a commerce-led or “headless” approach),  rendering the whole experience (a content-led approach), or anything in between (a hybrid approach). The first approach is the one we’re seeing the most often, as there’s no rip and replace required and you can build on your existing landscape.

What’s your desired rendering approach? Is the rendering happening on the server-side, the client-side or both? All scenarios are supported by CoreMedia but recently we’re seeing a shift from server-side rendering to a headless approach leveraging an API gateway and pre-built Progressive Web Apps (PWAs) such as Vue Storefront or Mobify.


So how do you integrate the eCommerce system of your choice? The following example focuses on commercetools but is valid for almost any eCommerce system.

  1. Build the integration between CoreMedia and commercetools by implementing your own commerce adapter
  2. Set up content to test the editorial integration within CoreMedia Studio
  3. Build the frontend integration


Commerce Hub is the term for the CoreMedia concept that allows different eCommerce systems to be integrated against a stable API. This API defines which lookups need to be implemented by a developer so that any CoreMedia component can communicate easily with the eCommerce system.

The diagram below depicts a high-level architecture. All you need to implement is section indicated by the green box – the vender-specific implementation of the CoreMedia Commerce Adapter framework.

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

One lookup you need to implement is, for example, getProductById. This vendor-agnostic framework will pass a productId and a specific storeId. Your job is to forward them to the eCommerce system. And the big advantage commercetools brings to the table is their Java SDK to access the catalog and its products.

The lookup will look like this:

public Optional<Product> getProductById(IdQuery idQuery) {

 //Extract productId
String productId = idQuery.getId().getValue();
//Setup call to commercetools
final CompletionStage<Product> stage = getClient().execute(ProductByIdGet.of(productId));
//Perform call and return result wrapped as Optional
return Optional.ofNullable(SphereClientUtils.blockingWait(stage, Duration.ofMinutes(1)));

Now you need to map the result (a commercetools product) to a CoreMedia product. Or you could also create a unit test.

The method getProductById is one of the required calls you need to implement. And you need to implement access to the catalog, including category hierarchy, product data, images and pricing. Using an existing adapter as a reference is the best way to go. With some knowledge about the commercetools API, this is achievable in just a few days.


Add a standard eCommerce site within CoreMedia and link it with your connector and you’re good to go. You’ll see the catalog now being integrated into CoreMedia Studio, like this:

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

And you can already browse the catalog and open up products and categories:

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

This looks good but we’re still missing a vital part: the preview. CoreMedia allows you to add any preview right within CoreMedia Studio. Since commercetools comes with a Vue-based client, we’ve integrated it in this example as is.

Now Studio will look like this:

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

Much better, although note that at this stage no content from CoreMedia has been loaded yet.


Commercetools’ client is based on Vue and uses the Apollo framework to load data from a GraphQL endpoint. This makes the CoreMedia integration easy since we support this integration pattern as well. All you need to do is add a second endpoint pointing to the CoreMedia Headless Server, start loading data, then render it using Vue.

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

In addition, you can enable the responsive slider so marketing users can preview the experience for multiple viewports. You can see this represented here as a slider component above the preview:

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

And you can add preview-driven editing right into the frontend experience. This provides business users with a context-menu within the preview. If you want to exit a content item you see within the preview, for example, just right-click into the experience and you’ll get a context-menu so you can start editing:

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

As well, there is what we call “time travel” – a feature that provides business users the ability to preview an experience for any future or past date.

Screenshot Integrating Commercetools

Screenshot Integrating Commercetools

Note that this pattern doesn’t just apply to commercetools but to any eCommerce system offering an API.


This is truly agile: It only takes a few days to get an initial version up and running. And the The required knowledge set is light –java programming for the CoreMedia Commerce Hub integration and some knowledge of commercetools and CoreMedia in order to map the data.

For the frontend piece, this depends on the technology of the client. In the above scenario, knowledge of industry-standard technologies like Vue, GraphQL and Apollo was required along with a little knowledge of CoreMedia in order to add the responsive slider, the preview-driven editing capabilities and time travel. A little more involved but hardly rocket science.

We’d be happy to share the integration code with you and answer any questions. So get in contact with us!

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