How to Integrate Retool with Magento (Adobe Commerce)

Magento's recommended authentication method for API access is Integration Token — it creates a permanent OAuth access token scoped to specific Magento API resources without requiring user-specific admin credentials. Log in to your Magento Admin panel and navigate to System → Extensions → Integrations. Click the Add New Integration button. Give it a descriptive name like 'Retool Integration'. In the Identity Link URL field, you can leave this blank for server-to-server integrations. Click the API tab on the left side of the integration form. This is where you define the scope — which Magento resources this integration can access. For an operations dashboard, select the relevant resource scopes: under Sales, enable Orders, Invoices, Shipments, and Credit Memos. Under Catalog, enable Products, Categories, and Inventory. Under Customers, enable Customers and Customer Groups. You can also select All for full access, but scoping is better practice. Click Save. Magento will display the Integration activation screen — click Activate. You will see four token values: Consumer Key, Consumer Secret, Access Token, and Access Token Secret. For Retool's integration, you only need the Access Token (this is the Bearer token used in API requests). Copy the Access Token and store it securely. If you need to regenerate tokens later, you can reactivate the integration from the Integrations list.

In Retool, navigate to the Resources tab and click Add Resource. Select REST API. Name the resource 'Magento API'. In the Base URL field, enter your Magento store URL followed by /rest — for example: https://your-magento-store.com/rest. Do not include /V1 in the base URL because multi-store queries may need to prepend a store code before /V1 in individual query paths. In the Authentication section, select Bearer Token and paste your Integration Access Token. Add a default header: key Content-Type, value application/json. Add a second header: key Accept, value application/json. Click Save Changes. To test the connection, create a quick test query in a Retool app: use GET method with path /default/V1/store/storeConfigs — this returns your store configuration and confirms the token is working. If the response includes your store name and base URL, the connection is correctly configured. For multi-store Magento setups, the /default/V1/ prefix uses the default store scope. You can swap 'default' for any store code (visible in Stores → Settings → All Stores in Magento admin) to scope queries to a specific store view.

Magento's REST API uses a structured searchCriteria filter system in URL parameters for list endpoints. Understanding this syntax is critical for building useful Retool queries. The filter format is: searchCriteria[filterGroups][0][filters][0][field]=status&searchCriteria[filterGroups][0][filters][0][value]=pending&searchCriteria[filterGroups][0][filters][0][conditionType]=eq. In Retool, you configure these as URL parameters in the query editor. Create a query named 'getOrders'. Set Method to GET. Set Path to /default/V1/orders. In the URL Parameters section, add the following key-value pairs: searchCriteria[filterGroups][0][filters][0][field] → status, searchCriteria[filterGroups][0][filters][0][value] → {{ statusFilter.value || 'pending' }}, searchCriteria[filterGroups][0][filters][0][conditionType] → eq, searchCriteria[sortOrders][0][field] → created_at, searchCriteria[sortOrders][0][direction] → DESC, searchCriteria[pageSize] → {{ pagination.pageSize || 25 }}, searchCriteria[currentPage] → {{ pagination.page || 1 }}. To filter by date range, add a second filter group: searchCriteria[filterGroups][1][filters][0][field] → created_at, value → {{ dateRange.startDate }}, conditionType → gteq. Add a transformer to reshape Magento's order response for display in a Retool Table.

1// Transformer: reshape Magento orders for Retool Table
2const orders = data.items || [];
3return orders.map(order => ({
4  id: order.entity_id,
5  increment_id: order.increment_id,
6  status: order.status,
7  customer_email: order.customer_email,
8  customer_name: `${order.customer_firstname || ''} ${order.customer_lastname || ''}`.trim(),
9  grand_total: `$${parseFloat(order.grand_total || 0).toFixed(2)}`,
10  items_count: order.total_item_count,
11  store: order.store_name,
12  created_at: new Date(order.created_at).toLocaleDateString(),
13  payment_method: order.payment?.method || 'Unknown'
14}));

With working queries, build the operations dashboard UI. Drag a Table component onto the canvas and set its Data property to {{ getOrders.data }}. Configure visible columns: increment_id (as a link to https://your-magento-store.com/admin/sales/order/view/order_id/{{ row.id }}), customer_name, customer_email, status, grand_total, items_count, store, created_at. Add a Pagination component below the table and connect it to the getOrders query. Add filter controls above the table: a Select component for status with options ['pending','processing','complete','canceled','on_hold'], a Date Range Picker component, and a Text Input for customer email search. Add a Search button that triggers getOrders with these filter values. For the order detail panel, add a Container on the right side. When a row is selected in the Table, show the order detail: create a query named 'getOrderDetail' — GET /default/V1/orders/{{ ordersTable.selectedRow.id }}. Use this to display order items, shipping address, payment details, and order history comments. Add an Update Status Form with a Select for new status and Text Area for order comments. Create a query 'addOrderComment' — POST /default/V1/orders/{{ ordersTable.selectedRow.id }}/comments, with body { 'statusHistory': { 'comment': '{{ commentInput.value }}', 'status': '{{ newStatusSelect.value }}', 'is_customer_notified': {{ notifyCustomer.value }}, 'is_visible_on_front': false } }.

1// Add order comment and status update
2{
3  "statusHistory": {
4    "comment": "{{ commentInput.value }}",
5    "status": "{{ newStatusSelect.value }}",
6    "is_customer_notified": {{ notifyCustomerToggle.value }},
7    "is_visible_on_front": false,
8    "entity_name": "order"
9  }
10}

For catalog management, create a query named 'getProducts'. Set Method to GET, Path to /default/V1/products. Add searchCriteria URL parameters for pagination: searchCriteria[pageSize] → {{ catalogPagination.pageSize || 50 }}, searchCriteria[currentPage] → {{ catalogPagination.page || 1 }}. Add a search parameter to filter by SKU or name: searchCriteria[filterGroups][0][filters][0][field] → name, value → {{ productSearch.value }}, conditionType → like (Magento's LIKE operator requires % wildcards in the value, so use {{ '%' + productSearch.value + '%' }}). To get stock data alongside products, you need a second query: 'getStockStatus' — GET /default/V1/stockStatuses with a filter on product SKUs. Alternatively, Magento's /default/V1/products endpoint includes extension_attributes.stock_item for Simple products when you add fields=items[sku,name,price,status,extension_attributes] to the URL parameters. Add a Table for products showing SKU, name, price, status, and stock quantity. For bulk price updates, add a Checkbox column to the Table for multi-row selection, a Number Input for the new price, and a Button labeled 'Update Selected Prices'. Create a query named 'bulkUpdatePrice' that uses a JavaScript query type to loop through the selected rows and trigger individual PUT /default/V1/products/{{ sku }}/stockItems/1 calls. Use Promise.all to parallelize these updates.

1// JavaScript query: bulk update product prices
2const selectedProducts = catalogTable.selectedRows;
3if (!selectedProducts.length) {
4  return { updated: 0, errors: [] };
5}
6
7const updatePromises = selectedProducts.map(product =>
8  updateProductPrice.trigger({
9    additionalScope: {
10      currentSku: product.sku,
11      newPrice: bulkPriceInput.value
12    }
13  })
14);
15
16const results = await Promise.allSettled(updatePromises);
17const errors = results
18  .filter(r => r.status === 'rejected')
19  .map(r => r.reason);
20
21return {
22  updated: results.filter(r => r.status === 'fulfilled').length,
23  errors
24};