# Connect your Hygraph project to commercetools

Learn how to connect your Hygraph project to commercetools.

**commercetools** is a cloud-based headless commerce platform that provides APIs to power e-commerce sales and similar functions for large businesses.

## What you can do with the Hygraph-commercetools integration

With this app you can continue to use commercetools as your preferred headless commerce solution for products and eCommerce assets. By installing the commercetools app, you can bring your commercetools products into Hygraph projects with the rest of your content.

## Prerequisites to use this integration

- You must have a **Hygraph** account. If you don't have one, you can create one [here](https://app.hygraph.com/signup).
- You must have a [Hygraph project](https://hygraph.com/docs/getting-started/fundamentals/quickstart#create-a-project) with at least one [model](https://hygraph.com/docs/getting-started/fundamentals/quickstart#create-a-model).
- You must have a **commercetools** account. If you don't have one yet, you can get one [here](https://commercetools.com/).
- You must have created a project in your commercetools account. [Here](https://docs.commercetools.com/merchant-center/organizations-teams-projects#create-a-project) is some information on how to get started.
- You must have `Storefront search` indexing status set to active. In order to do this, access your commercetools project, navigate to **Settings > Project Settings > Storefront search**, and set the `Indexing status` switch to **on**.
- You must create an API Client and get the `Project key`, `Client ID`, `Client Secret` and the `API URL` from your commercetools project. In order to do this, access your commercetools project and navigate to **Settings > Developer settings > API Clients**. Click on the `+ Create new API client` button, located at the upper right corner of the form. Type in a `Name` of your choice and use the `Scopes` dropdown to select the `Read only client` option, then click on `Create API client`. [Here](https://docs.commercetools.com/getting-started/create-api-client) you will find detailed in formation on how to do this.

  **Warning:**

  **Do not close the new API client screen that displays as a result before you finish the installation process**, as you cannot access it again and you will need the data shown there to configure the commercetools app in Hygraph.

**Apps are environment specific**. This means their configuration is applied per environment. Take this into consideration if you're working with a project using more than one environment.

## Install the commercetools app

Click [here](https://hygraph.com/marketplace/apps/hygraph-commercetools-app) to install the commercetools App on **Hygraph**, then follow these steps:

[Video: Install commercetools app](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/K8TBMqCKQCqiHdRLJggh)

1. In the dropdown, select which project you want to install the app in, then click on the `Add app` button. You should be redirected to the **Configure commercetools** section of your Hygraph project dashboard.
2. Fill in the `Project key`, `Client ID`, `Client Secret` and the `API URL`. Information on how to get these is listed under the [prerequisites for this integration](https://hygraph.com/docs/integrations/connect-commercetools#prerequisites-to-use-this-integration).
3. Click on the `Save` button. A pop-up notification in the lower right corner of the screen will indicate that the changes have been saved.

## Add the commercetools picker to your model

[Video: Add commercetools product field](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/BaOLZGYCQZ2nS1iO6VXj)

1. Navigate to the **Schema** builder.
2. Select the model that you would like to add the **commercetools picker** field to and click on it.
3. Select the **commercetools picker** field from the **Add fields** right sidebar.
4. Complete the `Display name` field, and the `API ID` will be auto-filled by the system. Optionally, you can also add a `Description`. This screen allows you to control different properties of your **commercetools picker** field: you can allow multiple values, or you can localize the field, by selecting the checkboxes under the `Field options` section of the screen.
5. Click on the `Add` button.

## Use commercetools in your Hygraph project

[Video: Use commercetools in Hygraph](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/wT8IyMcyTJy9IAp4JC8R)

1. Navigate to the **Content** editor.
2. Select the view that you configured the **commercetools picker** field for.
3. Click on the `+ Add entry` button or, alternatively, edit an existing entry.
4. Locate the **commercetools picker** section of the screen and click on `Select product from commercetools`. As a result, a new screen will display, showing the products available in your commercetools store.
5. Select the product you wish to add to the entry using the checkboxes, then click on the `Select products` button. Optionally, you can use the search filters to find the products you are looking for.
6. Now that the product has been added to the entry, you can click on `Save` or `Save & Publish`, as needed.

**Warning:**

Products in your **commercetools** project need to be in status `Published` in order to display in the product picker.

## Resources

- [commercetools documentation](https://docs.commercetools.com/docs/)