How to Integrate Retool with BigCommerce

BigCommerce API accounts generate OAuth credentials that allow programmatic access to your store. Navigate to your BigCommerce Control Panel (store.mybigcommerce.com/manage) and go to Advanced Settings → API Accounts → Create V2/V3 API Token. Configure the API account: - Name: 'Retool Operations Dashboard' - Select OAuth Scopes based on what your Retool dashboard needs: - Orders: Read-write (for order status updates and shipment creation) - Products: Read-write (for inventory and price updates) - Customers: Read-write (for customer lookup and credit adjustments) - Order Shipments: Read-write (for tracking number management) - Store Information: Read-only (for store configuration metadata) Grant only the scopes your dashboard actually needs — if you're building a read-only monitoring dashboard, select Read-only for all scopes. Click Save. BigCommerce displays the Client ID, Client Secret, and Access Token together on a single screen. The Access Token is shown ONLY ONCE — copy it to a secure location immediately. Identify your Store Hash from the BigCommerce control panel URL: it appears as the alphanumeric string in store.mybigcommerce.com/manage/STORE_HASH/ or in the API Account creation page. Open Retool → Resources tab → Add Resource → REST API: - Name: 'BigCommerce' - Base URL: https://api.bigcommerce.com/stores/YOUR_STORE_HASH (replace YOUR_STORE_HASH with your actual store hash) - Authentication: None (we use a header instead) - Default Headers: - X-Auth-Token: your Access Token - Accept: application/json - Content-Type: application/json Store the access token as a secret configuration variable (Settings → Configuration Variables → BIGCOMMERCE_ACCESS_TOKEN) and reference it as {{ retoolContext.configVars.BIGCOMMERCE_ACCESS_TOKEN }} in the header value. Click Save Changes and Test Connection.

Create a query to retrieve orders from BigCommerce's v2 Orders API. In your Retool app, go to the Code panel and create a new query. Select the BigCommerce resource. Configure: - Method: GET - Path: /v2/orders - URL parameters: - status_id: {{ statusFilter.value || '' }} (filter by order status; BigCommerce uses numeric status IDs: 1=Pending, 2=Awaiting Payment, 3=Awaiting Fulfillment, 7=Awaiting Shipment, 8=Completed, 5=Cancelled) - min_date_created: {{ dateRange.start || '' }} (RFC 2822 format: Mon, 1 Jan 2024 00:00:00 +0000) - max_date_created: {{ dateRange.end || '' }} - sort: date_created:desc - limit: 50 - page: {{ pagination.page || 1 }} BigCommerce's v2 order response is an array of order objects each containing: id, customer_id, date_created, total_inc_tax, status, items_total, and billing_address. Add a JavaScript transformer to format dates, currency amounts, and extract the most relevant fields for the table. Drag a Table component onto the canvas and bind its data to {{ ordersQuery.data }}. Add a Select component for status filtering populated with BigCommerce's status ID values and labels. Add date range pickers for the date filter. Enable row selection so clicking an order row loads the full order detail.

1// Transformer for BigCommerce v2 orders response
2const orders = Array.isArray(data) ? data : [];
3const statusLabels = {
4  0: 'Incomplete', 1: 'Pending', 2: 'Awaiting Payment',
5  3: 'Awaiting Fulfillment', 4: 'Awaiting Shipment',
6  5: 'Partially Shipped', 6: 'Awaiting Pickup', 7: 'Shipped',
7  8: 'Completed', 9: 'Cancelled', 10: 'Declined',
8  11: 'Refunded', 12: 'Disputed', 13: 'Manual Verification Required'
9};
10return orders.map(order => ({
11  id: order.id,
12  customer_id: order.customer_id,
13  customer_name: `${order.billing_address?.first_name || ''} ${order.billing_address?.last_name || ''}`.trim(),
14  customer_email: order.billing_address?.email || '',
15  date_created: order.date_created
16    ? new Date(order.date_created).toLocaleDateString()
17    : '',
18  total: parseFloat(order.total_inc_tax || 0).toLocaleString('en-US', { style: 'currency', currency: order.currency_code || 'USD' }),
19  total_numeric: parseFloat(order.total_inc_tax || 0),
20  items: order.items_total || 0,
21  status_id: order.status_id,
22  status: statusLabels[order.status_id] || order.status || '',
23  channel_id: order.channel_id || 1,
24  payment_method: order.payment_method || '',
25  ip_address: order.ip_address || ''
26}));

Build an order detail panel that loads when an order row is selected in the main table. Create two additional queries: Order line items query: - Method: GET - Path: /v2/orders/{{ ordersTable.selectedRow.id }}/products - Set to run automatically when ordersTable.selectedRow.id changes Order shipping addresses query: - Method: GET - Path: /v2/orders/{{ ordersTable.selectedRow.id }}/shippingaddresses Display the order detail in a Container panel on the right side of the canvas. Show billing/shipping address, order line items in a nested table, payment method, and current status. Create an order status update query: - Method: PUT - Path: /v2/orders/{{ ordersTable.selectedRow.id }} - Body: { "status_id": {{ statusUpdateSelect.value }} } Set to Manual trigger. Add a Select component for 'Change Status' with the status options. Wire a 'Save Status' button to trigger this query. Add event handlers: On Success → re-trigger ordersQuery to refresh the main table, show a notification 'Order {{ ordersTable.selectedRow.id }} status updated'. For the shipment flow, create a 'Create Shipment' query: - Method: POST - Path: /v2/orders/{{ ordersTable.selectedRow.id }}/shipments - Body with tracking number, carrier name, and items shipped

1// POST body for creating a BigCommerce order shipment
2// Wire this as the JSON body for the createShipment query
3{
4  "tracking_number": "{{ trackingNumberInput.value }}",
5  "shipping_method": "{{ carrierSelect.value }}",
6  "shipping_provider": "",
7  "comments": "{{ shipmentNotesInput.value || '' }}",
8  "order_address_id": "{{ orderShippingAddressQuery.data[0]?.id }}",
9  "items": {{ JSON.parse('[' + orderProductsQuery.data.map(p => JSON.stringify({order_product_id: p.id, quantity: p.quantity})).join(',') + ']') }}
10}

Create queries for BigCommerce's v3 Catalog API to list and update products. Create a product list query: - Method: GET - Path: /v3/catalog/products - URL parameters: - include: variants,images (to get variant inventory alongside product data) - inventory_level:less_than: {{ lowStockThreshold.value || 10 }} (optional filter) - keyword: {{ productSearchInput.value || '' }} - limit: 50 - page: {{ productPagination.page || 1 }} The v3 catalog response wraps products in a data array with a meta.pagination object for cursor-based pagination. Add a transformer to flatten the response and calculate total inventory across all variants. Create an inventory update query: - Method: PUT - Path: /v3/catalog/products/{{ productsTable.selectedRow.id }} - Body: { "inventory_level": {{ inventoryInput.value }}, "inventory_tracking": "product" } For variant-level inventory (products with options like size/color), use: - Method: PUT - Path: /v3/catalog/products/{{ productsTable.selectedRow.id }}/variants/{{ variantsTable.selectedRow.id }} - Body: { "inventory_level": {{ variantInventoryInput.value }} } Drag a Table component for products and a nested Table for variants (visible when a product with variants is selected). Add an inline Number Input for quick inventory editing and a Save button that triggers the update query.

1// Transformer for BigCommerce v3 Catalog products response
2// data.data is the products array; data.meta.pagination has page info
3const products = data.data || [];
4return products.map(product => {
5  const variants = product.variants || [];
6  const totalInventory = product.inventory_tracking === 'product'
7    ? (product.inventory_level || 0)
8    : variants.reduce((sum, v) => sum + (v.inventory_level || 0), 0);
9  const lowStock = totalInventory <= 10 && product.inventory_tracking !== 'none';
10  return {
11    id: product.id,
12    name: product.name,
13    sku: product.sku,
14    price: parseFloat(product.price || 0).toFixed(2),
15    cost_price: parseFloat(product.cost_price || 0).toFixed(2),
16    inventory_level: totalInventory,
17    inventory_tracking: product.inventory_tracking || 'none',
18    low_stock: lowStock ? 'Yes' : '',
19    variant_count: variants.length,
20    status: product.availability,
21    type: product.type,
22    weight: product.weight,
23    brand_id: product.brand_id
24  };
25});

Add customer lookup functionality using BigCommerce's v2 Customers API. Create a customer search query: - Method: GET - Path: /v2/customers - URL parameters: - email: {{ customerSearchInput.value }} (exact email match) - OR use /v3/customers with filter[email:like]: {{ customerSearchInput.value }} - limit: 25 The v3 customers endpoint supports more filter options including partial name matching. Create a query for customer order history: - Method: GET - Path: /v2/orders - URL parameter: customer_id → {{ customersTable.selectedRow.id }} And a store credit query: - Method: GET - Path: /v2/customers/{{ customersTable.selectedRow.id }}/storecredit Organize the complete dashboard using a Tabs component with three tabs: 1. Orders — the order fulfillment table from step 2-3 2. Products — the product and inventory panel from step 4 3. Customers — the customer search and service panel Add a dashboard header row with Statistic components showing real-time metrics: - Pending orders count (query /v2/orders with status_id=1, return total from headers) - Today's revenue (sum of today's completed order totals from orders query) - Low stock alerts (count of products below threshold from products query) - Orders awaiting fulfillment (count with status_id=3) For complex multi-channel BigCommerce deployments with custom catalog management, order routing workflows, and ERP integrations, RapidDev's team can help architect and build your Retool solution.

1// Customer transformer for BigCommerce v3 /customers response
2const customers = data.data || [];
3return customers.map(c => ({
4  id: c.id,
5  full_name: `${c.first_name || ''} ${c.last_name || ''}`.trim(),
6  email: c.email,
7  phone: c.phone || '',
8  company: c.company || '',
9  customer_group_id: c.customer_group_id,
10  date_created: c.date_created
11    ? new Date(c.date_created).toLocaleDateString()
12    : '',
13  store_credit: c.store_credit_amounts?.length
14    ? '$' + parseFloat(c.store_credit_amounts[0]?.amount || 0).toFixed(2)
15    : '$0.00',
16  total_orders: c.orders_count || 0,
17  notes: c.notes || '',
18  accepts_marketing: c.accepts_product_review_abandoned_cart_emails ? 'Yes' : 'No'
19}));