Getting started

What you get

The Embedded App SDK has a robust API that provides:

  • Custom modal windows
  • Top bar with buttons and breadcrumbs
  • Flash messages (a.k.a. Toasts)
  • Loading indicator
  • Resource pickers for products and collections

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 will be 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 on the name of your app.
  3. From the app overview screen, click Extensions.
  4. Expand the Embedded App section.
  5. Click Manage embedded app.
  6. Click Enable.
  7. Click Save at the top of the screen to confirm the changes to your app.

Once enabled, Shopify will attempt to load your app inside an iframe in the admin.

HTTPS, SSL Certificates and mixed content restrictions

The Shopify Admin uses HTTPS for all pages. Mixed content restrictions in web browsers requires all embedded applications to also run on HTTPS.

Publishing an embedded app in the App Store requires the app to have an SSL certificate. Failure to use SSL when running an embedded app will cause errors in web browsers, due to mixed content restrictions.

Set the frame-ancestors directive

Shopify apps have the option of setting the frame-ancestors content security policy directive to control where the site can be framed:

The frame-ancestors directive replaces the X-Frame-Options response header and can be used to implement clickjacking protection. To learn more about the frame-ancestors directive, refer to MDN Web Docs.

Set up the EASDK in your app

To use the EASDK you must include app.js in your page.