Methods

Initialization methods

Shopify App Bridge provides two methods that are used to initialize your app instance.

Using modular JavaScript:

import createApp from '@shopify/app-bridge';
const app = createApp({
  apiKey: 'API key from Shopify Partner Dashboard',
  shopOrigin: shopOrigin,
});

Using ES5 and the CDN-hosted version:

var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
const app = createApp({
  apiKey: 'API key from Shopify Partner Dashboard',
  shopOrigin: shopOrigin,
});

createApp(config)

Returns an app object. Used to initialize your application.

The config hash can contain the following keys:

  • apiKey (string) The API key provided for your application in the Partners Dashboard.
  • shopOrigin (string) The origin/domain of the Shopify shop. This should be stored in the session; it is returned from the Shopify API and should be set dynamically for each different merchant/shop. The format is similar to "example.myshopify.com".

app object methods

app.dispatch(action)

Dispatches an action to Shopify App Bridge. Hosts (like admin) can subscribe to actions to listen for these dispatches.

  • action (Action) One of Shopify App Bridge’s included actions.
app.dispatch(
  Redirect.toRemote({
    url: 'http://example.com',
  }),
);

app.error(callback)

Subscribe to all errors, including those that are caused by actions. Returns a method you can use to unsubscribe from all errors.

  • callback (function) The function you want to execute when an error occurs.
const unsubscribe = app.error((data) => {
  // type will be the error type
  // action will contain the original action including its id
  // message will contain additional hints on how to fix the error
  const {type, action, message} = data;
  // Handle all errors here

  switch(type) {
    case Error.ActionType.INVALID_PAYLOAD:
    //Do something with the error
    break;
  }
});

// Unsubscribe from all errors
unsubscribe();

app.getState()

Returns a Promise which, when resolved, returns information about your app’s current state, including the currently logged in staff member.

app.getState().then((data) => {
  const {appInfo, loading, modal, navigation, pos, resourcePicker, staffMember, titleBar, toast} = data;
});

app.subscribe(callback, id?) and app.subscribe(eventNameSpace, callback, id?)

Subscribe to actions. When no eventNameSpace or id are provided, this method subscribes to all actions. Returns a method you can use to unsubscribe.

  • eventNameSpace (string) (optional) Include this to subscribe only to actions of a particular type (for example, Modal.Action.OPEN).
  • callback (function) The function you want to execute when an action is dispatched.
  • id (int) The id of a particular action instance to subscribe to.
const unsubscribe = app.subscribe((data) => {
  // Handle all actions here
  console.log(data);
});

// Unsubscribe from all actions
unsubscribe();

Sign up for a Partner account to get started.

Sign up