Migrate your app from legacy SDKs to Shopify App Bridge
Using Shopify App Bridge directlyAnchor link to section titled "Using Shopify App Bridge directly"
If your app is using either the Embedded App SDK (EASDK) or the POS App SDK, then we recommend that you update your app using the Shopify App Bridge. The EASDK and POS App SDK will no longer receive updates.
If you update your app using the Shopify App Bridge actions directly, then you get the following benefits:
- strict versioning using SemVer, for even more stability and predictability
Migrating your EASDK appAnchor link to section titled "Migrating your EASDK app"
The best place to start is the Embedded App SDK (EASDK) documentation, which has been updated with corresponding App Bridge methods. Here are a few additional things to keep in mind when migrating an existing app from EASDK to Shopify App Bridge.
Deprecated featuresAnchor link to section titled "Deprecated features"
Shopify.API.Modal.inputAnchor link to section titled "Shopify.API.Modal.input"
Input modals are not supported in Shopify App Bridge.
You can use an iFrame modal instead.
Shopify.API.Modal.setHeightAnchor link to section titled "Shopify.API.Modal.setHeight"
Modals will not accept URLs from outside of your app’s origin.
To embed content from another domain, create an iFrame modal and embed the content there.
Tertiary modal buttonsAnchor link to section titled "Tertiary modal buttons"
Because Shopify App Bridge gives you full control over button styling, primary and secondary buttons can now cover all use cases.
Setting an app icon via
ShopifyApp.Bar.initialize with an
icon param has been deprecated.
You can now set your app icon on the App setup page in the Partners Dashboard
ShopifyApp.init with debug optionAnchor link to section titled "ShopifyApp.init with debug option"
init with the
debug option is not supported in App Bridge.
Adding pagination to the title bar using
ShopifyApp.Bar.setPagination has been deprecated. We recommend implementing pagination within your app’s UI. If you’re using Polaris, then you can use the pagination controls provided by the Polaris Page component.
If you prefer to keep pagination in your app’s titlebar, then you can use Shopify App Bridge to add pagination buttons to the titlebar.
Use Shopify App Bridge to add pagination buttons to the title barAnchor link to section titled "Use Shopify App Bridge to add pagination buttons to the title bar"
Use the Polaris Page component pagination controlsAnchor link to section titled "Use the Polaris Page component pagination controls"
protocol URL parameterAnchor link to section titled "protocol URL parameter"
Since all embedded apps must use HTTPS, the
protocol parameter is no longer relevant.
Keeping the frame URL in syncAnchor link to section titled "Keeping the frame URL in sync"
initialize function automatically updates the Shopify admin URL.
If your app uses links or server-side redirects for navigation, you can keep the URL in sync by dispatching a
History.Action.REPLACE action wherever you called EASDK’s
initialize method (for example, after
Using ES5 and the CDN-hosted libraryAnchor link to section titled "Using ES5 and the CDN-hosted library"
Migrating your POS App SDK appAnchor link to section titled "Migrating your POS App SDK app"
The POS App SDK documentation has been updated with corresponding Shopify App Bridge methods.
Cart actionsAnchor link to section titled "Cart actions"
All cart-related functionality is handled by the
Cart action set in Shopify App Bridge.
There are three steps to dispatch a cart action.
- Create the
Cartaction group instance:
- Subscribe to the cart update action, which returns an unsubscribe function:
- Dispatch the desired cart action. Depending on the action, you may need to construct the action using a method from
- A simple cart action, passing the action type to
- A more complex cart action, using an action constructor method:
Fetching user and location dataAnchor link to section titled "Fetching user and location data"
In the POS App SDK, user and location data were fetched using dedicated methods.
In Shopify App Bridge, this data is accessed using