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 partner account
• A BigCommerce sandbox store

Step 1: Create a new Gadget app 

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

1. Create a new Gadget app (https://gadget.new), select the BigCommerce app type, and enter a domain name
2. Click the Connect to BigCommerce button on your app's Home page OR navigate to Settings → Plugins → BigCommerce

Step 2: Create a BigCommerce app, set callback URLs, and select scopes 

Now create a BigCommerce app and connect it to the Gadget app.

1. Create a new app in the BigCommerce Developer Portal and name your app
2. Copy the Auth callback URL, and Load callback URL from Gadget to your BigCommerce app
3. Select the Products Read-only OAuth scope and click Update & Close in the BigCommerce app

Step 3: Set up client credentials and install on a sandbox store 

Finish connection setup by copying the client credentials from BigCommerce back to Gadget and installing the app on a sandbox store.

1. Click View Client ID for your new app in BigCommerce and copy the Client ID and Client Secret to Gadget, then click Continue
2. In your BigCommerce sandbox store, navigate to Apps → My Draft Apps, hover over your newly added app, and click Learn more
3. Click Install

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

The frontend you see is your Gadget app's React frontend built with the BigDesign library and embedded in the sandbox store.

You will also have a new data model at api/models/bigcommerce/store that holds data for the BigCommerce sandbox you installed your app on.

Step 4: Subscribe to BigCommerce webhooks 

BigCommerce webhooks are available as triggers on global actions.

To subscribe to BigCommerce webhooks:

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

The action will now be run when the webhook is triggered.

BigCommerce webhook payloads only include the id of the resource that triggered the webhook. To fetch the full resource data, you can use the included BigCommerce API client to fetch the resource data in the action.

4. Copy-paste the following code into the action file:

1/** @type { ActionRun } */
2export const run: ActionRun = async ({ params, logger, api, connections }) => {
3  // get the BigCommerce API client for the current store
4  const bigcommerce = connections.bigcommerce.current;
5  // fetch the product data
6  const product = await bigcommerce.v3.get("/catalog/products/{product_id}", {
7    path: {
8      product_id: params.id,
9    },
10  });
11  // log the product data and webhook payload
12  logger.info({ product, params }, "product data and webhook payload");
13};
14
15export const options = {
16  triggers: {
17    bigcommerce: {
18      webhooks: ["store/product/created"],
19    },
20  },
21};

1/** @type { ActionRun } */
2export const run: ActionRun = async ({ params, logger, api, connections }) => {
3  // get the BigCommerce API client for the current store
4  const bigcommerce = connections.bigcommerce.current;
5  // fetch the product data
6  const product = await bigcommerce.v3.get("/catalog/products/{product_id}", {
7    path: {
8      product_id: params.id,
9    },
10  });
11  // log the product data and webhook payload
12  logger.info({ product, params }, "product data and webhook payload");
13};
14
15export const options = {
16  triggers: {
17    bigcommerce: {
18      webhooks: ["store/product/created"],
19    },
20  },
21};

5. To test the webhook, create a new product in your BigCommerce sandbox store.

You should see the product data logged in the Gadget Logs.

To learn more about subscribing to BigCommerce webhooks, see the webhooks guide.

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.

1. Right click on api/models/bigcommerce, select Add model, and create a new product model
2. Navigate to api/models/bigcommerce/product/schema and add fields to the model with the following validations:

Note: The store field is a belongs to relationship to the bigcommerce/store model. This is used to associate the product with the store it was created in. The inverse of the relationship 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:

1/** @type { ActionRun } */
2export const run: ActionRun = async ({ params, logger, api, connections }) => {
3  // get the BigCommerce API client for the current store
4  const bigcommerce = connections.bigcommerce.current;
5  // fetch the product data
6  const product = await bigcommerce.v3.get("/catalog/products/{product_id}", {
7    path: {
8      product_id: params.id,
9    },
10  });
11  // log the product data and webhook payload
12  logger.info({ product, params }, "product data and webhook payload");
13
14  // store product data in the product data model
15  await api.bigcommerce.product.create({
16    bigcommerceId: product.id,
17    name: product.name,
18    store: {
19      // get the bigcommerce/store id for the record stored in Gadget
20      _link: connections.bigcommerce.currentStoreId,
21    },
22  });
23};
24
25export const options = {
26  triggers: {
27    bigcommerce: {
28      webhooks: ["store/product/created"],
29    },
30  },
31};

1/** @type { ActionRun } */
2export const run: ActionRun = async ({ params, logger, api, connections }) => {
3  // get the BigCommerce API client for the current store
4  const bigcommerce = connections.bigcommerce.current;
5  // fetch the product data
6  const product = await bigcommerce.v3.get("/catalog/products/{product_id}", {
7    path: {
8      product_id: params.id,
9    },
10  });
11  // log the product data and webhook payload
12  logger.info({ product, params }, "product data and webhook payload");
13
14  // store product data in the product data model
15  await api.bigcommerce.product.create({
16    bigcommerceId: product.id,
17    name: product.name,
18    store: {
19      // get the bigcommerce/store id for the record stored in Gadget
20      _link: connections.bigcommerce.currentStoreId,
21    },
22  });
23};
24
25export const options = {
26  triggers: {
27    bigcommerce: {
28      webhooks: ["store/product/created"],
29    },
30  },
31};

4. Create another product in your BigCommerce sandbox store and open 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 information on working with data in BigCommerce, see our data guide.

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

Next steps 

Now that we 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:

Automatically add search keywords to products

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

Start building →