We’ve completed all the required setup for our embedded Shopify app. Earlier, we were using only the Next.js App Router, but now we’re using a hybrid setup with both the Pages Router and App Router.
The Shopify App Bridge CDN script is loading first and synchronously, without using async or defer. We’ve tested everything carefully on both the server and the browser, and all checks look correct.
Server-side tests:
All validations are passing, including CDN source, script order, synchronous loading, CSP headers, HTTPS, and authentication/callback routes.
Client-side tests:
Most important checks are passing, such as iframe detection, embedded app status, App Bridge availability, CDN script source, and script position. Only the API key check fails, which is expected and acceptable.
Even after all this, the Shopify automated check “Use the latest App Bridge CDN” is still not passing. We’re currently blocked at this step and would appreciate any guidance on what might be missing.
Just taking a look here at our docs: https://shopify.dev/docs/api/app-bridge-library and we mention that you need a <meta name="shopify-api-key" content="YOUR_API_KEY" /> tag placed immediately before the App Bridge script in your <head>.
Could you let me know if this meta tag is present on all pages of your app and that it contains your actual Client ID value? I’m wondering if this could be triggering that check to fail.
Additionally, since you’re using a hybrid Next.js setup with both Pages Router and App Router, I’d also recommend checking View Page Source (not just DevTools Elements) on multiple routes to verify the meta tag and script are consistently rendered in the correct order across both routers. Could you also let me know if you’ve installed the app on a development store and actively interacted with it, since the automated check requires session data to validate.
If you can share the HTML output from View Page Source when your app loads in the Shopify Admin, that would help us pinpoint exactly what the automated check might be seeing differently. Happy to help with this!
Thanks a lot for pointing this out that was exactly the missing piece.
The <meta name="shopify-api-key" content="CLIENT_ID" /> tag was not consistently rendered before the App Bridge CDN script across all routes. After ensuring the meta tag is present on all pages, contains the correct Client ID, and appears immediately before the App Bridge script in the <head> for both the Pages Router and App Router, the automated check is now passing.
We also verified the output using View Page Source on multiple routes and confirmed the correct order, and we had already installed and actively interacted with the app on a development store to generate session data.
Really appreciate the detailed guidance this helped us resolve the issue. Thanks again!
Thanks for reaching out.