How to Integrate FlutterFlow with Shopify Storefront API

In FlutterFlow, go to API Manager → Add API Group. Name it ShopifyStorefront. Set the Base URL to https://YOUR-STORE.myshopify.com/api/2024-01/graphql.json — replace YOUR-STORE with your Shopify store handle (visible in your Shopify admin URL). Set the Method on the group level to POST (all Storefront API calls are POST requests). Under Headers, add one header: Name: X-Shopify-Storefront-Access-Token, Value: your Storefront Access Token. Store the token value in FlutterFlow Secrets (Settings → Secrets → Add Secret named SHOPIFY_STOREFRONT_TOKEN) and reference it as [secretName] in the header value field rather than pasting it directly. Set Content-Type: application/json as a second header. Save the API Group.

In the ShopifyStorefront API Group, add an endpoint named getProducts. The request body (JSON field named 'query') contains the GraphQL products query: {"query": "{ products(first: 20) { edges { node { id title description images(first: 1) { edges { node { url } } } variants(first: 10) { edges { node { id title price { amount currencyCode } availableForSale } } } } } } }"}. Click Test to verify the response. FlutterFlow will parse the JSON response — navigate to the response structure and mark the fields you need: products.edges[].node.id, title, description, images.edges[0].node.url, and the first variant's price.amount. Create a ProductCatalog page, add a Backend Query using the getProducts API call. Add a ListView bound to the query result's products.edges array using Generate Dynamic Children. Each child is a ProductCard Component with: an Image widget bound to node.images.edges[0].node.url, a Text for node.title, and a Text for the price formatted with a Custom Function.

Add a getProductById endpoint to the ShopifyStorefront API Group. Request body: {"query": "{ product(id: \"PRODUCT_ID\") { id title descriptionHtml images(first: 5) { edges { node { url } } } variants(first: 20) { edges { node { id title price { amount currencyCode } availableForSale inventoryQuantity } } } } }"} with a variable PRODUCT_ID. Create a ProductDetail page with a Page Parameter named productId (String). Add a Backend Query using getProductById, passing productId as the PRODUCT_ID variable. Add a PageView or Stack widget with images bound to the images.edges array for a swipeable image gallery. Add a DropDown widget for variant selection bound to the variants.edges array — display variant.title and store the selected variant.id in a Page State variable named selectedVariantId. Add an Add to Cart Button — On Tap: store {variantId: selectedVariantId, quantity: 1, productTitle: title, price: selectedVariant.price.amount} to App State cartItems (List of JSON).

Add two endpoints to ShopifyStorefront: createCheckout and addLineItems. createCheckout request body: {"mutation": "mutation checkoutCreate { checkoutCreate(input: {}) { checkout { id webUrl } checkoutUserErrors { message } } }"}. This returns a checkout.id and checkout.webUrl. addLineItems request body: {"mutation": "mutation addItems($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) { checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) { checkout { id webUrl subtotalPrice { amount currencyCode } lineItems(first: 10) { edges { node { title quantity variant { price { amount } } } } } } checkoutUserErrors { message } } }"} with variables checkoutId and lineItems (array of {variantId, quantity}). Create a Cart page displaying the App State cartItems. Add a Checkout Button with an Action Flow: call createCheckout to get the checkoutId, then call addLineItems passing checkoutId and the cart items array mapped to [{variantId, quantity}] format using a Custom Function. Save the returned webUrl to App State checkoutUrl.

1// Custom Function: buildLineItemsPayload
2// Converts App State cartItems List<dynamic> to Shopify lineItems format
3List<dynamic> buildLineItemsPayload(List<dynamic> cartItems) {
4  return cartItems.map((item) => {
5    'variantId': item['variantId'],
6    'quantity': item['quantity'] ?? 1,
7  }).toList();
8}
9
10// Custom Function: formatPrice
11// Formats '29.99' + 'USD' → '$29.99'
12String formatPrice(String amount, String currencyCode) {
13  final value = double.tryParse(amount) ?? 0.0;
14  return '\$${value.toStringAsFixed(2)}';
15}

On the Cart page, add a Proceed to Checkout Button. In its Action Flow: call the createCheckout and addLineItems mutations (from Step 4), then add a Launch URL action using the checkoutUrl stored in App State. Shopify handles all payment, address entry, and order confirmation on their hosted page — PCI compliance and fraud detection are fully managed by Shopify. For order confirmation back in your app: create a Cloud Function with an HTTPS trigger and register its URL as a webhook in Shopify Admin → Settings → Notifications → Webhooks → Add webhook, Topic: orders/create. The Cloud Function receives the order JSON and writes to a Firestore orders/{orderId} collection. Back in FlutterFlow, show an OrderConfirmation page that queries the Firestore orders collection filtered by the customer's email from Firebase Auth.