App Bridge

App Bridge is the JavaScript SDK for [Embedded Apps](/docs/apps/admin/embedded-app-home), providing access to data and UI rendering within the Shopify Admin. App Bridge integrates directly into standard Web Platform APIs you're already familiar with, making it easy to build and maintain performant apps on the Shopify platform. For more information about the motivation behind App Bridge, refer to [Shopify's platform is the Web platform](https://shopify.engineering/shopifys-platform-is-the-web-platform).

Getting started

Getting started

If you created your app using the [Shopify Remix App template](https://github.com/Shopify/shopify-app-template-remix), then your app is already set up with App Bridge. If not, you can add App Bridge to your app by including the app-bridge.js script tag and your apiKey as seen in the example. The app-bridge.js script loads directly from Shopify and automatically keeps itself up-to-date so you can start building right away.

Setup

<head>
  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>

Your first API call

Your first API call

The following example uses [`Resource Picker`](https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker) to open a UI component that enables users to browse, find, and select products from their store using a familiar experiences.

Resource Picker

<!DOCTYPE html>

<head>
  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>

<body>
  <button id="open-picker">Open resource picker</button>
  <script>
    document
      .getElementById('open-picker')
      .addEventListener('click', async () => {
        const selected = await shopify.resourcePicker({type: 'product'});
        console.log(selected);
      });
  </script>
</body>

React

React

Shopify App Bridge provides a companion npm library for React components and hooks, available at [`@shopify/app-bridge-react`](https://www.npmjs.com/package/@shopify/app-bridge-react). For more information about the React library, see the documentation on [React components](/docs/api/app-bridge-library/react-components) and [React hooks](/docs/api/app-bridge-library/react-hooks).

Installation

npm install @shopify/app-bridge-react

yarn add @shopify/app-bridge-react

TypeScript

Installation

The @shopify/app-bridge-types package can be installed using yarn or npm.

Installation

npm install --save-dev @shopify/app-bridge-types

yarn add --dev @shopify/app-bridge-types

Configuration

Adding the @shopify/app-bridge-types package to your tsconfig.json file will enable type checking for all files in your project.

Configuration

{
  "compilerOptions": {
    "types": ["@shopify/app-bridge-types"]
  }
}

TypeScript

Shopify App Bridge provides a companion npm library for TypeScript types, available at [`@shopify/app-bridge-types`](https://www.npmjs.com/package/@shopify/app-bridge-types). If you're using the [React library](/docs/api/app-bridge-library#react), then the types package is already included.

Global variable

Global variable

After App Bridge is set up in your app, you have access to the shopify global variable. This variable exposes various App Bridge functionalities, such as [displaying toast notifications](/docs/api/app-bridge-library/apis/toast) or [retrieving app configuration details](/docs/api/app-bridge-library/apis/config). To explore all the functionality available on the shopify global variable: 1. Open the Chrome developer console while in the Shopify admin. 2. Switch the frame context to your app's iframe. 3. Enter shopify in the console.

Direct API access

Direct API access

You can make requests to the Admin API directly from your app using the standard [web `fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/fetch)! Any `fetch()` calls from your app to Shopify's Admin GraphQL API are automatically authenticated by default. These calls are fast too, because Shopify handles requests directly. Direct API access is disabled by default. It can be [enabled](/docs/apps/tools/cli/configuration#admin) in your app TOML file, along with whether you want to use direct API access with [online access](/docs/apps/auth/oauth/access-modes#online-access) or [offline access](/docs/apps/auth/oauth/access-modes#offline-access) mode.

Query Shopify data

const res = await fetch('shopify:admin/api/graphql.json', {
  method: 'POST',
  body: JSON.stringify({
    query: `
      query GetProduct($id: ID!) {
        product(id: $id) {
          title
        }
      }
    `,
    variables: {id: 'gid://shopify/Product/1234567890'},
  }),
});

const {data} = await res.json();
console.log(data);

Next steps

Next steps

Now that you've initialized your app, you can use any [Shopify App Bridge features](/docs/api/app-bridge-library/apis).

Resources

Resources