Embedded app

Embedded app is a wrapper for your entire application which provides access to the Shopify admin using the Embedded App SDK (EASDK). The props passed to this component initialize your connection to the Shopify admin. Once connected, components in your application can send and receive messages using the EASDK.

This component only works within embedded apps. Read the EASDK getting started guide for more details on how to use the EASDK with Polaris.


Examples

You must store your API key and the shopOrigin provided by the Shopify API somewhere on the page so you can use them to initialize your application.

// We are accessing the apiKey and shopOrigin
// from content in script tags.
const shopOrigin = document.querySelector('#ShopOrigin').textContent;
const apiKey = document.querySelector('#APIKey').textContent;

ReactDOM.render(
  <EmbeddedApp
    shopOrigin={shopOrigin}
    apiKey={apiKey}
  >
    <ResourcePicker
      open
      products
      onSelection={(resources) => console.log('Selected resources ', resources)}
    />
  </EmbeddedApp>
)
Name
Type
Description
apiKey
string
The API key for your application from the Partner dashboard
shopOrigin
string
The current shop’s origin, provided in the session from the Shopify API
forceRedirect
boolean
Forces a redirect to the relative admin path when not rendered in an iframe
debug
boolean
Prints logs of each message passed through the EASDK