Pull product data from Shopify with API Connect

ConvertSite can fetch product data directly from Shopify's Storefront API. This lets you display live pricing, inventory, and product details without maintaining a separate data source like Google Sheets.

How it works

API Connect makes a GraphQL request to your Shopify store and stores the response in a variable you can use throughout your site. You can then transform the JSON response into a table with GET and MAP functions, making it easy to populate questions, calculations, or pricing displays.

Before you start

You'll need:

• A Shopify Storefront API access token — This authorizes ConvertSite to read your product data

• Your shop URL — Your Shopify store's domain

• Product handles — The handles of the products you want to query

Create a Storefront API access token

Shopify uses Storefront Access Tokens to authorize read access to your product catalog.

1. In Shopify admin, go to Settings → Apps and sales channels → Develop apps

2. Click Create an app

3. Name it (e.g., "ConvertSite API")

4. Under Configuration, click Configure Storefront API scopes

5. Select the scopes you need:

   • unauthenticated_read_product_listings — to read products

   • unauthenticated_read_product_tags — if you filter by tags

6. Save and install the app

7. Copy the Storefront API access token — you'll paste this into ConvertSite

Add an API Connect action

Once you have your token, configure the API action in ConvertSite:

1. Add the API Connect action to your page

2. Set it to run on page load so the data is available before users interact with your site

Configure the request

Set the endpoint URL

Use your shop's GraphQLendpoint. Replace {shop} with your store name:

https://{shop}.myshopify.com/api/2026-04/graphql.json

Add the authorization header

In the headers section, add:

• Header name: X-Shopify-Storefront-Access-Token

• Header value: Your Storefront API access token

Write your GraphQL query

Use a GraphQL query to request the product data you need. Here's an example that fetches a product by its handle:

{
  productByHandle(handle: "your-product-handle") {
    id
    title
    variants(first: 10) {
      edges {
        node {
          id
          title
          price {
            amount
          }
          image {
            url
          }
        }
      }
    }
  }
}

Transform the response into a table

Shopify returns data as nested JSON. Use the GET and MAP functions to transform it into a usable table.

Assuming your API response is stored in a variable called API_A:

edges := GET(API_A, "data.productByHandle.variants.edges")

edges | MAP(function(edge: [GET(edge, "node.title"), GET(edge, "node.price.amount"), GET(edge, "node.image.url")])) | TABLE()

This extracts the variant title, price, and image URL from each edge and formats them as a table with three columns.

Understanding the response structure

The Shopify GraphQL response is nested. Here's a simplified version of the structure:

{
  "data": {
    "productByHandle": {
      "id": "...",
      "title": "Your Product Name",
      "variants": {
        "edges": [
          {
            "node": {
              "title": "Variant Name",
              "price": { "amount": "125.0" },
              "image": { "url": "https://..." }
            }
          }
        ]
      }
    }
  }
}

The GET function navigates this structure using dot notation: data.productByHandle.variants.edges returns the array of edges. Each edge contains a node with the actual variant data.

Use the table in your site

Once you've transformed the response into a table, you can:

• Populate dropdown questions — Use variant titles as options

• Display live pricing — Referenceprice amounts in calculations

• Show product images — Pull variant images dynamically

Example: Price lookup

To use the fetched prices in a calculation, reference the table by column index. If your table has variants in column 0 and prices in column 1:

selectedVariant := "Variant Name"
variantPrice := TABLE_YOUR_VARIANTS | FILTER(row[0] == selectedVariant) | GET(0, 1)

variantPrice * quantity

This looks up the price for the selected variant and multiplies it by the quantity.

Troubleshooting

Next steps

• Combine Shopify data with calculations to create dynamic price quotes

• Use variant titles to populate product selection dropdowns

• Fetch multiple products by querying products(first: N) instead of productByHandle