# Connect your Hygraph project to BigCommerce

Learn how to connect your Hygraph project to BigCommerce.

**BigCommerce** is a SaaS provider for merchants running online businesses. The company's platform includes online store creation, search engine optimization, hosting, and marketing and security for small to enterprise sized businesses.

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

With this app you can continue to use **BigCommerce** as your preferred headless commerce solution for products and eCommerce assets. By installing the BigCommerce app, you can bring your BigCommerce 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/classic-docs/getting-started/fundamentals/quickstart#create-a-project).
- You must have a **BigCommerce** account. If you don't have one yet, you can [visit their website](https://www.bigcommerce.com/) and contact their team.
- You must have your BigCommerce `Storefront ID` and `API token`:

      - **Storefront ID:** You can easily find this value in the URL of your BigCommerce dashboard between `store-` and `.mybigcommerce.com/manage/dashboard`.

        **Note:**

        For example:

        `https://store-YOUR_STOREFRONT_ID.mybigcommerce.com/manage/dashboard`

  - **API Token:** The **API Token** is the **Access Token** in your BigCommerce dashboard. You can find it by going to **Settings > API > Store-level API accounts > Create API account**. Make sure you enable full permissions and save.

        After you save, a window will pop up displaying the BigCommerce API credentials, and a `.txt` file containing your `Access token` will automatically download.

**Warning:**

**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 BigCommerce app

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

[Video: BigCommerce installation](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9wfrthtmq07vxpckuydpr)

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 BigCommerce** section of your Hygraph project dashboard.
2. Fill in the `Storefront ID` and the `API Token`. Click [here](https://hygraph.com/classic-docs/integrations/connect-bigcommerce#prerequisites-to-use-this-integration) to learn how to find this information in your BigCommerce dashboard.
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 BigCommerce product field to your model

[Video: Add the BigCommerce Product field to your model](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9wfnyjab207w5dk3ht4eb)

1. Navigate to the **Schema** builder.
2. Select the model that you would like to add the **BigCommerce Product** field to.
3. Select the **BigCommerce Product** 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 **BigCommerce Product** 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 `Create` button.

## Use BigCommerce in your Hygraph project

[Video: Use BigCommerce in your Hygraph project](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9wfpthtmi07vxhfgq86n0)

1. Navigate to the **Content** editor.
2. Select the default that you configured the **BigCommerce Product** field for.
3. Click on the `+ Create entry` button or, alternatively, edit an existing entry.
4. Locate the **BigCommerce product** section of the screen and click on `Select product from BigCommerce`. As a result, a new screen will display, showing the products available in your **BigCommerce** store.
5. Use the checkboxes next to the pictures to select the product you wish to add to the entry, then click on the `Add selected product` button.
6. Now that the product has been added to the entry, you can click on `Save` or `Save & Publish`, as needed.

## Resources

- Click [here](https://developer.bigcommerce.com/) to access BigCommerce's documentation.
- Click [here](https://developer.bigcommerce.com/api-reference/a315bf0c38635-storefront-token) for more information on BigCommerce GraphQL Tokens.