Initialization

To expose the JavaScript API to your app, simply include the app.js at the top of your app's <head> element. It has no dependencies but plays well with other libraries like jQuery.

<head>
  <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
  ...
</head>

The SDK should be initialized with the API key and shop's origin immediately after including the app.js file.

<head>
  <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
  <script type="text/javascript">
    ShopifyApp.init({
      apiKey: 'YOUR_APP_API_KEY',
      shopOrigin: 'https://CURRENT_LOGGED_IN_SHOP.myshopify.com'
    });
  </script>
  ...
</head>

This makes the ShopifyApp object available and ready for use.

The script detects if your app was loaded inside an iframe. If not, it will create a redirection back into the relative embedded URL in the Shopify admin. This functionality can be disabled by passing forceRedirect: false as a configuration option.

You can include a debug: true option as well to get detailed output into console.log.

On every page of your app that you'd like embedded, you should include an inline script tag which defines the behavior of the Shopify admin chrome in relation to your application. Here is a sample inline script for an embedded app view:

<script type="text/javascript">
  ShopifyApp.ready(function(){
    ShopifyApp.Bar.initialize({
      icon: 'http://localhost:3001/assets/header-icon.png',
      title: 'The App Title',
      buttons: {
        primary: {
          label: 'Save',
          message: 'save',
          callback: function(){
            ShopifyApp.Bar.loadingOn();
            doSomeCustomAction();
          }
        }
      }
    });
  });
</script>

Once initialized, you can use any of the API methods and features provided with the SDK Embedded App SDK. Learn more about the available API methods in the Shopify Embedded App SDK ›