Getting started with Shopify App Bridge

Embed your app in the Shopify admin

First, follow the Getting started guide to create a development store and an app.

By default, new apps are embedded in the Shopify admin. If you need to turn on embedding for an app, follow these steps:

  1. From your Partner dashboard, click Apps.
  2. Click the name of your app.
  3. From the app overview screen, click Extensions.
  4. In the Embed in Shopify Admin section.
  5. Click Save at the top of the screen to confirm the changes to your app.

After you've enabled embedding for an app, Shopify attempts to load your app inside an iframe in the admin.

Embed your app in Shopify POS

First, follow the Getting Started guide to create a development store and an app.

To embed your app in Shopify POS:

  1. From your Partner Dashboard, click Apps.

  2. Click the name of your app.

  3. Click Extensions.

  4. In the Embedded in Shopify POS section, click Embed in POS.

  5. Save your changes.

After you've enabled embedding for an app, your app appears in the Shopify POS mobile app.

HTTPS, SSL certificates, and mixed content restrictions

The Shopify admin uses HTTPS for all pages. Mixed content restrictions in web browsers require all embedded applications to also use HTTPS.

Failure to use SSL when running an embedded app will cause errors in web browsers, due to mixed content restrictions.

X-Frame-Options header

Web servers have the option of setting a response header of X-Frame-Options: DENY, which causes the web browser to refuse to render that page if the content window is inside some kind of frame. Since all embedded applications are rendered inside an iframe, this option must be turned off on your web server.

To learn more about X-Frame-Option headers, see the MDN web docs.

Set up Shopify App Bridge in your app

Shopify App Bridge is available as a JavaScript module on npm. To install it in your app (to use with bundlers or build systems like webpack), you can use npm or yarn:

npm install --save @shopify/app-bridge

or

yarn add @shopify/app-bridge

Shopify App Bridge can also be included directly on a page with a <script> tag pointing to a CDN-hosted copy of the library. Unpkg is an example of a CDN that hosts npm modules.

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
  var AppBridge = window['app-bridge'];
  var actions = window['app-bridge'].actions;
</script>

Sign up for a Partner account to get started.

Sign up