App Bridge from npm
If you created your app with Shopify CLI 3.x or higher, then your app is already set up so it can be embedded in the Shopify admin. Otherwise, you need to perform a few steps to configure your app so it can be embedded.
Turn on embedding in the Partner DashboardAnchor link to section titled "Turn on embedding in the Partner Dashboard"
By default, all new apps are embedded in the Shopify admin. You can embed an existing app with the following steps:
- From your Partner Dashboard, click Apps.
- Click the name of your app.
- Click App setup.
- In the Embedded app section, click Manage.
- In the Embed your app in Shopify admin section, click Enable.
- If you plan to embed your app in Shopify POS then, in the Embed your app in Shopify POS section, click Enable.
Serve your app over HTTPSAnchor link to section titled "Serve your app over HTTPS"
You must serve your embedded applications over HTTPS.
The Shopify admin uses HTTPS for all pages. Failure to serve an embedded app over HTTPS will cause errors in web browsers, due to mixed content restrictions.
Learn more about serving your app over HTTPS.
Set the frame-ancestors directiveAnchor link to section titled "Set the frame-ancestors directive"
The Content Security Policy
frame-ancestors directive controls where the app can be framed. You must ensure your app is only frameable by the authenticated shop domain and the admin domain to avoid clickjacking attacks.
You can do this with the Content Security Policy
Learn more about the
frame-ancestors directive and app security.
Authorize with OAuthAnchor link to section titled "Authorize with OAuth"
Follow this guide to ensure that your server implements OAuth according to Shopify's recommendations.
Set up Shopify App Bridge 3 in your appAnchor link to section titled "Set up Shopify App Bridge 3 in your app"
Initialize Shopify App Bridge in your appAnchor link to section titled "Initialize Shopify App Bridge in your app"
To keep your embedded apps secure, you need to specify the following configuration values, when intializing App Bridge:
apiKey- The client ID provided for your application in the Partner Dashboard.
host- The host of the specific shop that's embedding your app. This value is provided by Shopify as a URL query parameter that's appended to your application URL when your app is loaded inside the Shopify admin.
forceRedirect(Optional) - If set to
true, then App Bridge detects when your app is loaded outside of the Shopify admin, and automatically redirects the user to the Shopify admin page that embeds your app.
Make your first App Bridge callAnchor link to section titled "Make your first App Bridge call"
The following example uses
ResourcePicker to open a UI component that enables users to browse, find, and select products from their store using a familiar experience.
Now that you've initialized your app, you can use any Shopify App Bridge actions.
You can also debug your app with Shopify App Bridge.