Migrate your app from legacy SDKs to Shopify App Bridge

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:

• modern front-end development workflows, including modular JavaScript
• strict versioning using SemVer, for even more stability and predictability

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.

Input modals are not supported in Shopify App Bridge.

You can use an iFrame modal instead.

Modal size is set in increments in App Bridge, and can automatically fit to the modal contents.

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.

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.setIcon or ShopifyApp.Bar.initialize with an icon param has been deprecated.

You can now set your app icon on the Configuration page in the Partner Dashboard.

Calling init with the debug option is not supported in App Bridge.

We recommend debugging using the Redux DevTools and the development version of the library instead.

Adding pagination to the title bar using ShopifyApp.Bar.initialize and ShopifyApp.Bar.setPagination has been deprecated. We recommend implenting 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.

Learn more about the TitleBar action set.

Learn more about the Polaris Page component.

Since all embedded apps must use HTTPS, the protocol parameter is no longer relevant.

The EASDK initialize function automatically updates the Shopify admin URL.

Since Shopify App Bridge is designed to accomodate a broader range of uses, it can’t make this assumption. It’s only aware of navigation using History and Redirect actions.

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 createApp()).

The POS App SDK documentation has been updated with corresponding Shopify App Bridge methods.

All cart-related functionality is handled by the Cart action set in Shopify App Bridge. There are three steps to dispatch a cart action.

1. Create the Cart action group instance:

1. Subscribe to the cart update action, which returns an unsubscribe function:

1. Dispatch the desired cart action. Depending on the action, you may need to construct the action using a method from Cart.

• A simple cart action, passing the action type to dispatch:

• A more complex cart action, using an action constructor method:

In the POS App SDK, user and location data were fetched using dedicated methods. In Shopify App Bridge, this data is accessed using app.getState().