# Quickstart: Connect to BigCommerce 

This guide will show you how to set up a BigCommerce connection, subscribe to BigCommerce webhooks, and store the webhook data in a Gadget database.

## Prerequisites 

Before starting, you will need:

*   A [BigCommerce developer portal account](https://devtools.bigcommerce.com/).
*   A [BigCommerce sandbox store](https://start.bigcommerce.com/developer-sandbox/).

## Step 1: Create a new BigCommerce app 

First, create a new Gadget app and connect it to BigCommerce.

1.  Create a new app in the [BigCommerce Developer Portal](https://devtools.bigcommerce.com/).
2.  Give your app a name, **Generate Credentials**, then click **Finish** when the credentials appear. These credentials will be added to your Gadget app automatically.
3.  Click **Connect to Gadget**. Once signed in to Gadget, a new app will be automatically created for you. This app includes a BigCommerce connection using the generated credentials.

## Step 2: Set BigCommerce app callback URLs and select scopes 

1.  Copy the **Auth callback URL** and **Load callback URL** from Gadget to your BigCommerce app and **Save**. Connection info is available at **Settings** > **Plugins** > **BigCommerce**.
2.  In BigCommerce, select the **Scopes** tab and choose the **Products Read-only** OAuth scope.
3.  **Save** and confirm the scope changes.

## Step 3: Install on a sandbox store 

1.  In BigCommerce, click **App Actions** > **Open in Control Panel** and sign into your sandbox store.
2.  Navigate to **Apps** > **Develop** to see your draft app.
3.  Click on your app, then **Install**.

Congrats, you have successfully installed your app on a BigCommerce sandbox store!

The frontend is your Gadget app's React frontend built with BigDesign and embedded in the store. A new `api/models/bigcommerce/store` data model holds the store data.

By setting up the connection, you have:

*   Set up a full-stack application.
*   Handled BigCommerce OAuth and callbacks for a single-click app.
*   Created a `bigcommerce/store` data model and saved the store data on install.
*   Handled frontend session management using the `session` model.
*   Installed the BigDesign library.

## Step 4: Subscribe to BigCommerce webhooks 

BigCommerce webhooks are available as triggers on global actions.

To subscribe to BigCommerce webhooks in Gadget:

1.  Navigate to `/api/actions`, click **+**, and create a new action named `handleProductCreate.js`.
2.  Click **+** in the Triggers card and select **BigCommerce**.
3.  Select the `store/product/created` webhook scope.

This automatically subscribes your app to the `store/product/created` webhook, and runs the action when the webhook is received.

BigCommerce webhook payloads only include the resource `id`. Use the included [BigCommerce API client](https://github.com/Space48/bigcommerce-api-js) to fetch the full resource data.

4.  Paste the following code into your action:

```typescript
import type { ActionOptions } from "gadget-server";

export const run: ActionRun = async ({ params, logger, api, connections }) => {
  // get the BigCommerce API client for the current store
  const bigcommerce = connections.bigcommerce.current;
  // fetch the product data
  const product = await bigcommerce?.v3.get("/catalog/products/{product_id}", {
    path: {
      product_id: params.id,
    },
  });
  // log the product data and webhook payload
  logger.info({ product, params }, "product data and webhook payload");
};

export const options: ActionOptions = {
  triggers: {
    bigcommerce: {
      webhooks: ["store/product/created"],
    },
  },
};
```

5.  Create a new product in your BigCommerce sandbox store to test the webhook. The product data appears in the Gadget **Logs**.

For more on webhooks, see the [BigCommerce webhooks guide](https://docs.gadget-canary.xyz/guides/plugins/bigcommerce/webhooks).

## Step 5: Save the BigCommerce webhook payload 

Now you can store that BigCommerce product data in your database so you can use it in your app without making calls to the BigCommerce API.

1.  Right click on `api/models/bigcommerce`, select **Add model**, and create a new `product` model.
2.  Add the following fields and validations at `api/models/bigcommerce/product/schema`:

| Field name | Field type | Validations |
| --- | --- | --- |
| `bigcommerceId` | number | Uniqueness, Required |
| `name` | string | Required |
| `store` | belongs to |     |

The `store` field is a belongs to relationship to the `bigcommerce/store` model. The inverse should be a has many so that `bigcommerce/store` has many `bigcommerce/product`.

You can add more fields as needed, or remove fields you don't need! It is a good idea to only store the data required to power your app.

3.  Update `api/actions/handleProductCreate.js` to save the product data to the database. This action uses the automatically generated CRUD (create, read, update, delete) API for the `bigcommerce/product` model to create a new product record:

```typescript
import { ActionOptions } from "gadget-server";

export const run: ActionRun = async ({ params, logger, api, connections }) => {
  // get the BigCommerce API client for the current store
  const bigcommerce = connections.bigcommerce.current;

  if (!bigcommerce) {
    throw new Error("Missing bigcommerce connection");
  }

  // fetch the product data
  const product = await bigcommerce.v3.get("/catalog/products/{product_id}", {
    path: {
      product_id: params.id,
    },
  });

  if (!product) {
    throw new Error("Missing product");
  }

  // log the product data and webhook payload
  logger.info({ product, params }, "product data and webhook payload");

  // store product data in the product data model
  await api.bigcommerce.product.create({
    bigcommerceId: product.id,
    name: product.name,
    store: {
      // get the bigcommerce/store id for the record stored in Gadget
      _link: connections.bigcommerce.currentStoreId,
    },
  });
};

export const options: ActionOptions = {
  triggers: {
    bigcommerce: {
      webhooks: ["store/product/created"],
    },
  },
};
```

4.  Create another product in your BigCommerce store and check `api/models/bigcommerce/product/data` to see your saved product data.

Every time you add a product to your BigCommerce sandbox store, the product data will be also saved to your Gadget database.

For more on working with BigCommerce data, see the [data guide](https://docs.gadget-canary.xyz/guides/plugins/bigcommerce/data).

Congrats! You have learned how to start building BigCommerce apps in Gadget!

## Next steps 

Now that you have set up a BigCommerce connection and learned how to subscribe to webhooks and store data in a Gadget database, you can start building a single-click app.

Check out our tutorial for building a full-stack, single-click app that automatically adds search keywords to products:

![](/.vite/assets/bigcommerce.2220d313.svg)

#### Automatically add search keywords to products

Learn how to build a full-stack, single-click app that adds search keywords to products.

##### Start building →

[Start building →](https://docs.gadget-canary.xyz/guides/tutorials/bigcommerce/product-search-keywords)