Shopify App Bridge

App Bridge enables Shopify apps to render outside of the usual app surface and communicate with the rest of the Shopify admin.

The Shopify admin is the back office where users manage their business. Shopify apps are embedded within the admin so that they can seamlessly integrate into user workflows. The Shopify admin provides a surface for embedded apps to render their UI. On the web, the surface is an iframe and in the Shopify mobile app, the surface is a WebView.

The App Bridge library provides UI components to enable Shopify apps to render outside of this surface, both within and above the Shopify admin.

A diagram that shows the Shopify admin. The screenshot highlights an App Bridge component, which is controlled by the app but rendered by Shopify. The screenshot also highlights the other parts of the admin, which are rendered by Shopify, and the app surface, which is rendered by the app with Polaris.

For example, App Bridge enables the Shopify admin to do the following on behalf of the app:

  • Render a navigation menu on the left of the Shopify admin.
  • Render a modal that appears above the app, blocking input on the entire admin behind it and providing a surface inside the modal for the app to provide custom content.
  • Render a contextual save bar above the admin top bar.
  • Provide a temporary fullscreen surface that the app, above the rest of the admin UI, for use in specific situations. Use the Polaris Fullscreen bar so that app users can exit this mode.

App Bridge provides this functionality through actions. Apps can invoke these actions using vanilla Javascript functions as well as React component and hook wrappers.

On this page