App Bridge APIs and web methods

This section covers two types of APIs you can use in your app:

App Bridge APIs provide functionality that isn't available through standard web APIs, such as rendering UI outside of the app's iframe or launching native Shopify admin pages and workflows.
Standard web APIs, such as fetch, work in your app but might behave differently because your app runs in an iframe. Where behavior differs, this section documents the correct usage.

All App Bridge APIs are available through the shopify global object. If you're building with React, you can use the useAppBridge hook to access the same object.

Anchor to Adding App Bridge to your appAdding App Bridge to your app

When you scaffold your app using Shopify CLI, the App Bridge library is added to your app automatically. You can also manually add App Bridge in any framework by adding the following script tag to your app's HTML head:

<head>

</head>

// app/root.tsx

export default function App() {

return (

<html>

<head>

</head>

</html>

);

}

HTML

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

Remix

// app/root.tsx
export default function App() {
  return (
    <html>
      <head>
        <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
        <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" />
      </head>
    </html>
  );
}

For TypeScript users, Shopify provides a companion npm library for App Bridge types, available at @shopify/app-bridge-types. You can install this library in your project using yarn or npm. Loading App Bridge in your app from cdn.shopify.com/shopifycloud/app-bridge.js installs the latest version of the library. To keep your types in step, specify @shopify/app-bridge-types@latest in your package.json file.

Anchor to Available APIsAvailable APIs

Anchor to Authentication and dataAuthentication and data

Use authentication and data APIs to generate ID tokens, access app and environment context, and manage scopes. You can use these APIs to customize behavior based on user preferences or validate permissions before performing actions.

Name	Description
App API	Access information about your app including its ID, configuration settings, and metadata.
Config API	Retrieve app configuration values and settings defined in your `shopify.app.toml` file.
Environment API	Get information about the platform and environment where your app is running.
ID Token API	Generate ID tokens for secure server-to-server authentication and API requests.
Scopes API	Query current scopes, request additional optional scopes from merchants, or revoke existing scopes.
User API	Access information about the currently logged-in merchant including their name, email, and locale.
Resource Fetching API	Use the standard fetch API to make authenticated requests to the GraphQL Admin API or any other web resources your app needs.

Anchor to User interface and interactionsUser interface and interactions

Use user interface and interaction APIs to trigger Shopify workflows, navigate between pages, display selection interfaces, and provide feedback to merchants. These APIs use familiar Shopify patterns with native UI elements to ensure that the merchant experience is consistent and intuitive.

Name	Description
Intents API	Launch native Shopify admin workflows like creating products, customers, or orders.
Navigation API	Navigate within your app or to other areas of Shopify admin using standard web navigation methods.
Picker API	Display selection interfaces for files, dates, and other common data types.
Resource Picker API	Let merchants search and select Shopify resources like products, collections, or variants.
Loading API	Display loading indicators to show progress during long-running operations.
Modal API	Show confirmation dialogs and modal prompts for important user decisions.
Save bar API	Display a contextual save bar when forms have unsaved changes.
Toast API	Show toast notifications to provide feedback and status updates to merchants.
Reviews API	The Reviews API lets you request an app review modal overlaid on your app in the Shopify admin.
Support API	The Support API lets you register a custom handler when merchants request support through App Bridge.

Anchor to Device and platform integrationDevice and platform integration

Use device and platform APIs to detect the POS environment, access device cameras and scanners, print documents, share content, request app reviews, provide support resources, and monitor app performance metrics.

Name	Description
POS API	Detect when your app is running in Shopify POS and access POS-specific functionality.
Print API	Use the standard print API to send documents to printers or trigger the device print dialog for receipts and labels.
Scanner API	Access device cameras and barcode scanners to capture product codes and QR codes.
Share API	Trigger the native share dialog on mobile devices to share content.
Web Vitals API	Monitor and report web performance metrics for your app.

Was this page helpful?