The commercetools extension lets you search and fetch the products of your commercetools store and display them in a field in your content type. Subsequently, the content managers creating entries using this content type can select one of your store’s products as the input value for that field.

This step-by-step guide explains how to create a commercetools custom field extension for your content types in Contentstack. The steps performed are as follows:

  1. Retrieve your API client credentials
  2. Add the "commercetools" custom field extension to your stack
  3. Use your custom field
  4. Use the data saved by the extension
  1. Retrieve your API client credentials

    In order to use this extension, you will first need to retrieve the credentials of your commercetools store API client. The credentials include the project key, client_id, and secret of your commercetools store API client. Refer the Getting Started with the commercetools platform documentation for more details.

    Note these values down as you will need to use them to configure your commercetools store in Step 2.

  2. Add the "commercetools" custom field extension to your stack

    1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
      Create New Extension.png
    2. In the Select Extension Type dialog box, select Custom Field.
      Select Extension Type - Custom Field.png
    3. You will be led to the Create New Extension details page where you need to enter details in the fields as given below:
      • Title: Provide a suitable title. For example, "commercetools."
      • Field Data Type: Select the data type in which the input data of the field should be saved in Contentstack. Select "JSON" in this case.
      • Multiple: Leave this checkbox unchecked.
      • Hosting Method: Select Hosted By Contentstack. As soon as you do this, you will see the Extension Source Code field appear below.
      • Extension Source Code: In this field, you need to enter the extension code. To get the code, contact our support team at
        The support team will provide you with the source code (src file). Copy the code from the index.html file located in the root folder and paste it in the "Extension source code" field.
      • Config Parameter: Provide values for the config parameters. Enter the configuration details retrieved in Step 1 in your extension settings as follows:
            "project_key": "contentstack",
            "domain": "",
            "client_id": "duis9xxxxxxxxxxxx-",
            "client_secret": "FufYxxxxxxxxxxxxxxxOS_t"
    4. Click on Save. This creates your custom field.

    Now, let’s understand how you can start using this custom field in your content type.

  3. Use your custom field

    To use your custom field, you need to follow the steps given below:

    1. Create a content type by clicking on the + New Content Type. Enter the relevant details for the content type and click on Create and Add fields.
      Create Content Type.png
      This leads you to the Content Type Builder page where you can add the relevant fields.
    2. Add the Custom field to your content type.
      Add 'Custom' field.png
    3. Select commercetools in the Select Extension dropdown and set the other properties (shown in the above screenshot).
      Select 'commercetools' in the 'Select Extension' dropdown.png
    4. After adding the necessary information of the extension, add other relevant fields (if needed) in your Content Type. Click on Save and Close when you are done

    This will create your Content Type. Now you can use the custom field while creating an entry for this Content Type as shown below:

    commercetools extension demo.png
  4. Use the data saved by the extension

    This extension will embed the details of the selected product as JSON in an entry. You can use this data and display it on your presentation layer as per your requirement.

Additional resource: Refer to our step-by-step guide on how to create an example e-commerce app using Contentstack and commercetools.

On This Page