Commerce Layer

Commerce Layer

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


Prepr supports native integration with Commerce Layer (opens in a new tab), an API-first commerce platform. This integration works as a real-time connection with the Commerce Layer 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 Commerce Layer as a remote content source in Prepr by following the steps below.

Step 1: Set up an API Client in Commerce Layer

To use the Commerce Layer API, you need to be authorized first. This means you must get the API credentials, including a client ID, client secret, and a base endpoint, in your Commerce Layer Organization settings. Check out the Commerce Layer documentation to learn more about getting your API credentials (opens in a new tab).

Prepr requires a default read-only role (opens in a new tab) to retrieve data from the Commerce Layer database. Alternatively, you can define a custom role for Prepr with all read permissions selected (for Commerce Layer Enterprise users only).

Step 2: Add Commerce Layer as a remote source in Prepr

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

Once you set up the Commerce Layer 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 Commerce Layer products to your content item

Once you’ve connected to Commerce Layer 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 Commerce Layer products using the API

Now that you’ve added products from the Commerce Layer catalog to the content item, you can retrieve the corresponding data using the API. All API calls must be made to the Base endpoint 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 Commerce Layer. In addition, 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