Using the commercetools extension

commercetools Frontend comes with a ready-to-use commercetools extension. This article will show you how to use it and adapt it to your needs.


  • Access to your company's GitHub customer repository
  • Access to your company's project in the studio
  • commercetools project and credentials (see the commercetools documentation)

Using the commercetools extension

You'll find the commercetools extension in your GitHub customer repository under /packages/<project>/backend/commercetools.

There're 2 things you need to do to make it work for your project:

  1. Add your commercetools credentials to your project.yml
  2. Add the schemas to the studio

Let's go through how to do them separately.

To add your commercetools credentials, open your project.yml in your Project folder. You'll find it under <customer>-<project>/<project>/config.

Under configuration, add the below and input your credentials in place of the comments:

clientId: # this is your unique client id for commercetools
clientSecret: # this is your unique client secret for commercetools
projectKey: # this is your unique project key for commercetools
authUrl: # this is the authorization URL for commercetools
hostUrl: # the host of the HTTP API service for commercetools
product: # you'll need to duplicate this section for account, cart, search, wishlist
engine: commercetools

You'll break your API hub setup if you edit any other section in this file.

Next, you'll need to add the schemas to your studio. You'll find 2 in /packages/<project>/backend/schemas/dataSource.

One is a product list (frontastic-product-list.json), and the other is for a single product (frontastic-product.json).

You'll need to take these 2 json files and add them to the data source section of the studio (click Developer on the dashboard, then Data sources). See the using data sources in the studio article for more information.

You'll now be able to use the commercetools extension the get the data into your Frontend components. See the creating Frontend component with a data source article for how to do this.

Editing the commercetools extension

Once the commercetools extension is in your project, it's up to you to maintain it and adapt it to your needs.

You can change anything you want to in this extension.

However, we suggest extending functionality rather than replacing functionality. If there are any issues with what was initially provided, we'll release an update, but if you've replaced the functionality, it'll make this harder to do.

You can update your code by cloning the commercetools extension GitHub repository.