How to Integrate Retool with PrestaShop

Before configuring Retool, you need to enable PrestaShop's Webservice and generate an API key. Log into your PrestaShop back office and navigate to Advanced Parameters → Webservice. Toggle 'Enable PrestaShop's Webservice' to Yes and save. Next, click 'Add new webservice key' to create a new key for Retool. In the Key field, either paste a custom 32-character key or click 'Generate' to auto-generate one. Add a description such as 'Retool Integration' to identify this key's purpose. In the Permissions section, grant the permissions Retool needs. For a read-only reporting dashboard, enable GET permission for: orders, order_states, order_details, customers, products, stock_availables, and carriers. For a management panel that can update records, also enable PUT. For order creation, enable POST. Avoid granting unnecessary permissions — follow the principle of least privilege. Click Save to create the key. Copy the generated API key string — you'll need it for the Retool resource configuration. Note: PrestaShop's Webservice returns XML by default. You can request JSON by appending ?output_format=JSON to all API requests, which is much easier to work with in Retool.

Go to the Resources tab in your Retool instance and click Add Resource. Select REST API from the resource type list. Name the resource 'PrestaShop API'. In the Base URL field, enter your PrestaShop store URL followed by /api — for example, https://your-store.com/api. Do not include a trailing slash after /api. For authentication, PrestaShop Webservice uses Basic Auth where the API key is the username and the password is empty. Select Basic Auth from the Authentication dropdown. In the Username field, enter your Webservice API key. Leave the Password field completely empty. PrestaShop requires the output_format=JSON parameter on every request to return JSON instead of XML. Add this as a default URL parameter at the resource level: click Add URL parameter, enter key = output_format and value = JSON. This ensures every query automatically requests JSON without needing to add it to each individual query. Optionally, store your API key as a Retool configuration variable for better security: Settings → Configuration Variables → create PRESTASHOP_API_KEY as a Secret variable, then use {{ retoolContext.configVars.PRESTASHOP_API_KEY }} in the Basic Auth username field. Click Save Changes. Test the connection by clicking Test Connection or by creating a simple test query.

Create your first Retool query to fetch orders. In your app's Code panel, click + to add a new query. Name it getOrders and select the PrestaShop API resource. Set Method to GET. In the Path field, enter /orders. Add URL parameters: - key = display, value = full (returns all order fields instead of just IDs) - key = sort, value = id_DESC (latest orders first) - key = limit, value = 50 - key = filter[current_state], value = {{ dropdown_status.value || '' }} (optional status filter) The display=full parameter is critical — without it, PrestaShop returns only the list of order IDs, not the actual order data. Similarly, create a getProducts query (GET, /products) with display=full, limit=100, and a filter[name] parameter: {{ '%' + textInput_search.value + '%' }} for name search. For order states (status names), create a getOrderStates query (GET, /order_states, display=full). Run this on page load to populate your status filter dropdown with human-readable state names like 'Payment Accepted', 'Shipped', 'Delivered'. Bind getOrders data to a Table component. Set the table's Data property to {{ getOrders.data.orders }} and configure relevant columns: reference, id, total_paid_tax_incl, date_add, current_state.

1// JavaScript transformer — flatten PrestaShop orders for Table display
2const orders = data.orders || [];
3const orderStates = getOrderStates.data?.order_states || [];
4
5// Build a map of state ID -> state name for display
6const stateMap = {};
7orderStates.forEach(state => {
8  stateMap[state.id] = state.name?.[0]?.value || `State ${state.id}`;
9});
10
11return orders.map(order => ({
12  id: order.id,
13  reference: order.reference || `#${order.id}`,
14  customer_id: order.id_customer,
15  total: `€${parseFloat(order.total_paid_tax_incl || 0).toFixed(2)}`,
16  status: stateMap[order.current_state] || `State ${order.current_state}`,
17  payment_method: order.payment || 'N/A',
18  date: order.date_add
19    ? new Date(order.date_add).toLocaleDateString('en-GB')
20    : 'N/A',
21  carrier_id: order.id_carrier
22}));

Create write queries to update records in PrestaShop from Retool. PrestaShop's Webservice uses PUT for updates and requires you to send the full XML or JSON representation of the resource — not just the changed fields. This is different from PATCH-style partial updates. For updating order status, create a query named updateOrderState. Set Method to PUT. Path = /orders/{{ table_orders.selectedRow.id }}. Set Body type to JSON. In the body, construct the full order object with the updated current_state field: Note: PrestaShop's PUT endpoint requires the complete order object, not just the changed fields. The safest approach is to first fetch the full order, modify the current_state field, and then PUT the modified object back. Create a JavaScript query that combines these two steps. For updating product prices, create a query named updateProductPrice (PUT, /products/{{ table_products.selectedRow.id }}) with a body containing the full product object with an updated price field. Add a Dropdown component for order state selection with options populated from getOrderStates.data.order_states. Add an 'Update Status' button that triggers updateOrderState. In the On Success event handler, trigger getOrders to refresh the table and show a success notification. For complex multi-step operations that fetch-then-update PrestaShop resources, RapidDev's team can help architect reliable Retool Workflow patterns for bulk operations across large PrestaShop catalogs.

1// JavaScript query — fetch order then update its state
2// Step 1: Get the current order data
3const orderResponse = await getOrderById.trigger();
4const order = orderResponse.order;
5
6// Step 2: Modify only the current_state field
7const updatedOrder = {
8  ...order,
9  current_state: dropdown_status.value
10};
11
12// Step 3: PUT the modified order back
13const updateResponse = await utils.sendRequest({
14  url: `${context.baseUrl}/orders/${order.id}`,
15  method: 'PUT',
16  body: JSON.stringify({ order: updatedOrder }),
17  headers: { 'Content-Type': 'application/json' }
18});
19
20return updateResponse;

Create a customer service view that combines customer profile data with their order history. Add a TextInput component named textInput_email for email search. Create a query named searchCustomers (GET, /customers) with URL parameters: - display = full - filter[email] = {{ '%' + textInput_email.value + '%' }} - limit = 20 When a customer is selected from the results table, trigger a second query named getCustomerOrders (GET, /orders) with parameters: - display = full - filter[id_customer] = {{ table_customers.selectedRow.id }} - sort = id_DESC - limit = 50 Create a query named getCustomerAddresses (GET, /addresses) with filter[id_customer] = {{ table_customers.selectedRow.id }} to load the customer's saved addresses. Build the layout with a search bar at the top, a customers table showing matching results, and a detail panel below (or to the right) that shows the selected customer's profile, address list, and order history when a customer row is clicked. Add a stat row above the orders table showing computed values: total orders, total spend, average order value, and last order date — computed from the customer's order data using a JavaScript transformer. Finally, add a 'View in PrestaShop' button that opens the customer's back office page: {{ 'https://your-store.com/admin/index.php?controller=AdminCustomers&id_customer=' + table_customers.selectedRow.id + '&viewcustomer' }}. This gives support staff a quick escape hatch to the full PrestaShop UI for complex cases.

1// JavaScript transformer — compute customer order summary stats
2const orders = getCustomerOrders.data?.orders || [];
3
4if (orders.length === 0) {
5  return { total_orders: 0, total_spend: '€0.00', avg_order: '€0.00', last_order: 'Never' };
6}
7
8const totalSpend = orders.reduce((sum, o) =>
9  sum + parseFloat(o.total_paid_tax_incl || 0), 0);
10
11const sortedDates = orders
12  .map(o => new Date(o.date_add))
13  .sort((a, b) => b - a);
14
15return {
16  total_orders: orders.length,
17  total_spend: `€${totalSpend.toFixed(2)}`,
18  avg_order: `€${(totalSpend / orders.length).toFixed(2)}`,
19  last_order: sortedDates[0].toLocaleDateString('en-GB')
20};