Shopify App Bridge introduces a new concept of actions. An action provides a way for applications and hosts to trigger events with a payload.
Using CDN-hosted App BridgeAnchor link to section titled "Using CDN-hosted App Bridge"
All other example code should function as-is.
Simple actionsAnchor link to section titled "Simple actions"
Both hosts, such as the Shopify admin or Shopify POS, and apps can dispatch actions.
This example demonstrates the app setup and dispatching a
createApp function from
@shopify/app-bridge and the
@shopify/app-bridge/actions. Then use the
createApp function to create an app.
Action setsAnchor link to section titled "Action sets"
Action sets group simple actions. Each instance of an action set has a unique ID that makes it possible for apps to subscribe to them. Think of action sets as a persisted set of actions that the app can dispatch or subscribe to at any time.
This example demostrates the use of a Toast action set.
Shopify App Bridge offers React component wrappers for some actions. This is a great option if you are already using React and want to follow familiar patterns.
You can access the App Bridge client
app inside App Bridge React using the React Context API.
<Provider> component for more information.
This example demonstrates the app setup with React and using the React
@shopify/app-bridge-react. Create a configuration object with your client ID and host, then pass that object into the
Using App Bridge React with PolarisAnchor link to section titled "Using App Bridge React with Polaris"
App Bridge React is fully compatible with Polaris. While App Bridge provides access to features outside of your app, Polaris provides components to build within your app. To use both together, wrap your app in both Polaris’s
<AppProvider> component as well as App Bridge React’s