Initializing Shopify App Bridge

Once you’ve added Shopify App Bridge to your app, you need to initialize it by passing in your API key and the shop name.

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.default;
var app = createApp({
  apiKey: 'API key from Shopify Partner Dashboard',
  shopOrigin: shopOrigin,
});

The script detects if your app was loaded inside an iframe. If it wasn't, then the script creates a redirection back into the relative embedded URL in the Shopify admin. You can disable this functionality by passing forceRedirect: false as a configuration option.

Set up the Shopify TitleBar

On every page of your app, you should define the behavior of the Shopify TitleBar in relation to your application. For single-page apps (SPAs) you can update the title bar based on your app state. The following example script updates the TitleBar.

Using modular JavaScript:

import {TitleBar, Button, Redirect} from '@shopify/app-bridge/actions';


const breadcrumb = Button.create(app, {label: 'My breadcrumb'});
breadcrumb.subscribe(Button.Action.CLICK, () => {
  app.dispatch(Redirect.toApp({path: '/breadcrumb-link'}));
});

const titleBarOptions = {
  title: 'My page title',
  breadcrumbs: breadcrumb,
};

const myTitleBar = TitleBar.create(app, titleBarOptions);

Using CDN-hosted version:

var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Redirect = actions.Redirect;

var breadcrumb = Button.create(app, {label: 'My breadcrumb'});
breadcrumb.subscribe(Button.Action.CLICK, function() {
  app.dispatch(Redirect.toApp({path: '/breadcrumb-link'}));
});

var titleBarOptions = {
  title: 'My page title',
  breadcrumbs: breadcrumb,
};

var myTitleBar = TitleBar.create(app, titleBarOptions);

Actions

After you've initialized your app, you can use any Shopify App Bridge actions. To learn more about the supported actions, see Actions.

Sign up for a Partner account to get started.

Sign up