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:
- From your Partner dashboard, click Apps.
- Click on the name of your app.
- From the app overview screen, click Extensions.
- Expand the Embedded App section.
- Click Manage embedded app.
- Click Enable.
- 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:
Content-Security-Policy: frame-ancestors 'self' https://example.myshopify.com;
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.