Connect Theme App Extension with Admin API

Shopify Apps
,

Topic summary

A developer is struggling to connect a Shopify theme app extension with their backend Express server via App Proxy. They configured the proxy with subpath “apps/adara” pointing to their ngrok URL, but requests from the storefront aren’t reaching their Express routes despite showing HTTP 200 status.

Key Technical Issue:

  • Theme app extension fetch requests to /apps/adara don’t trigger Express route handlers
  • Developer attempted various route configurations including wildcard routes without success
  • Goal is to query Shopify Admin API (GraphQL) from the theme extension through their backend

Solution Provided:
The Express server routes are designed for the admin dashboard app, not storefront requests. To properly connect:

  • Set up App Proxy in Partner Dashboard to forward storefront requests to a separate backend
  • Backend should use the merchant’s offline access token (saved during app installation) to query Shopify APIs
  • Return queried data in the response to the theme extension

Follow-up Question:
Another user asks whether to use the app’s URL as the base for building the proxy URL, noting they receive 200 responses with HTML but no actual backend data.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am trying to show some products of merchants in my theme app extension block.

I don’t understand how can I communicate from my theme app extension block to the backend of my app. I am using the template that the Shopify v3 CLI gave me with Express in the backend. I set up an App Proxy, but I can’t catch the requests in the Express Server that I send from the client to my backend. The requests always show HTTP status 200.

My App Proxy configuration is this:

  • Subpath prefix: apps
  • Subpath: adara
  • Proxy URL: https://<<Ngrok ID>>.sa.ngrok.io/api

My client code is this:

(async () => {
    const ids = ["gid://shopify/ProductVariant/1234567890", "gid://shopify/ProductVariant/1234567891"];
    const fetchOptions = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
        }
    };
    const response = await fetch(`/apps/adara?ids=[${ids}]`, fetchOptions);
    console.log(response);
})();

In web/index.js I write a new route in the Express Server:

app.get("apps/adara", (req, res) => {
  res.status(201).send("Succeed")
})

Even if I put it on top of the other routes, I can’t catch the request. I have also tried the route “*” without success.

Is there something that I am missing?

If I want to make a GraphQL query to the admin API, do I need anything else in order to make the request inside the Express route?

Thanks in advance.

2 Likes
2

Hello, did you find a way to communicate with API?

Thanks.

F.

1 Like
3

It seems that the Express Server with the routes is meant to serve the app that runs on the merchant’s admin dashboard. It does not receive the requests that are created from the storefront or from the theme app extension. To communicate the theme app extension with the backend of the shop, you need to setup an app proxy that forwards the request to your own backend. To setup this App Proxy, you must go to App Setup in partners.shopify.com and forward the requests to your own backend.

Then in your backend, you query the Shopify APIs using the shop’s offline token (which you should have saved in your database when the merchant install your app) and return the queried data in the response.

1 Like
4

Hi in setting up my app proxy, do I use the app’s app url as the base url to build my app proxy url? When I do that I got a 200 response in html. It says the request is successful but didn’t actually return the data from backend.