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 merchants manage their business. Shopify apps are embedded within the admin so that they can seamlessly integrate into merchant 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.
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 merchants 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.
Inside the app surface, we encourage you to use Polaris to create familiar and consistent user experiences for merchants. Your app should import the Polaris React library, which defines the components for the Shopify admin. Then, follow both the App Design Guidelines and the broader Polaris Guidelines to create familiar and consistent user experiences.