This article describes how to add the Commercetools catalog data to your web application using Prepr.


Prepr supports native integration with Commercetools (opens in a new tab), a cloud-based headless commerce solution. This integration works as a real-time connection with the Commercetools system, making it possible for editors to search, preview, and add products in content items, as a result, include your catalog data in a web application.

You can set up Commercetools as a remote content source in Prepr by following the steps below.

Step 1: Set up an API Client in Commercetools

Before Prepr can interact with your Commercetools project, you must get your API Client credentials first. API Clients include authentication information and permission scopes for the Prepr application. Follow the Commercetools documentation (opens in a new tab) to create an API Client. As a result of this step, you will get your API Client information, including the following parameters:

  • project_key
  • client_id
  • secret
  • scope
  • Auth URL You will need these API credentials in the next step to connect Prepr to Commercetools.

API Client information is only displayed once. Ensure that you save your credentials securely before closing the API Client details page in Commercetools.

Make sure to activate the indexing of product information in your Commercetools project. If indexing is deactivated for your project, no data is returned by the Commercetools API. Read more in the Commercetools docs (opens in a new tab).

Step 2: Add Commercetools as a remote source in Prepr

Now that you’ve set up your API Client, you can add Commercetools as a remote source in Prepr. Learn more about adding a remote source.

Once you set up the Commercetools source in Prepr, an access token will be generated automatically. You can find it under Settings → Access tokens. Prepr will use the token as a credential when making API requests.

Step 3: Add Commercetools content to your content item

Once you’ve connected to Commercetools and added the Remote content field to your model, you can add your catalog data to a content item using the following steps:

  1. Navigate to the Content tab and click on the desired content item from the list.
  2. In the remote content section, click Add product, search through the catalog and add the desired items to the content item.
  3. Save and publish this content item to complete the setup.

Add remote content to a content item

Step 4: Retrieve Commercetools content using the API

Now that you’ve added products from the Commercetools catalog to the content item, you can retrieve the corresponding data using the API. All API calls must be made to the Product Projection Search endpoint (opens in a new tab) with the appropriate SKU numbers passed in the payload. Check out the example code snippets below:

query {
 Pages {
   items {
     content_integrations {

That’s it. Now your web page includes content inserts from Commercetools. Prepr will synchronize your remote content automatically to keep it up to date.

Was this article helpful?

We’d love to learn from your feedback