Skip to main content

App Bridge

App Bridge is the JavaScript SDK for Embedded Apps, 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.

Anchor to getting-startedGetting started

If you created your app using the Shopify Remix App template, 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

CDN-hosted

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

Anchor to your-first-api-callYour first API call

The following example uses 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>

Anchor to reactReact

Shopify App Bridge provides a companion npm library for React components and hooks, available at @shopify/app-bridge-react.

For more information about the React library, see the documentation on React components and React hooks.

Installation

npm install @shopify/app-bridge-react

Anchor to typescriptTypeScript

Shopify App Bridge provides a companion npm library for TypeScript types, available at @shopify/app-bridge-types.

If you're using the React library, then the types package is already included.

Anchor to typescript-installationInstallation

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

Anchor to typescript-configurationConfiguration

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

Installation

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

Anchor to shopify-global-variableGlobal 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 or retrieving app configuration details.

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.

Anchor to direct-api-accessDirect API access

You can make requests to the Admin API directly from your app using the standard web fetch API!

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 in your app TOML file, along with whether you want to use direct API access with online access or offline access mode.

Learn more about API access modesConfiguration guide

Query Shopify data

Use specific GraphQL API version

const res = await fetch('shopify:admin/api/2025-04/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);

Anchor to next-stepsNext steps

Now that you've initialized your app, you can use any Shopify App Bridge features.

Support

If you need help using Shopify App Bridge, please visit our API & SDK forum. It is the best place to discuss libraries and get support. If you have a specific bug report or feature request for App Bridge, please visit the App Bridge issue tracker on GitHub.

Anchor to resourcesResources

Polaris
Use Polaris to create a familiar and consistent user experience.
App Design Guidelines
Follow our UX guidelines when you're designing your app to ensure that they're predictable and easy to use.
Shopify CLI and Tools forum
Visit our Shopify CLI and Tools forum if you need help using Shopify App Bridge.