Admin UI extensions
Admin UI extensions make it possible to surface contextual app functionality within the Shopify Admin interface.
Anchor to overviewOverview
Extend the Shopify Admin with UI Extensions.

Anchor to getting-startedGetting Started
Use the Shopify CLI to generate a new extension within your app.
If you already have a Shopify app, you can skip right to the last command shown here.
Generate an extension
CLI
Anchor to app-authenticationApp Authentication
Admin UI extensions can also make authenticated calls to your app's backend. When you use fetch()
to make a request to your app's configured auth domain or any of its subdomains, an Authorization
header is automatically added with a Shopify OpenID Connect ID Token. There's no need to manually manage session tokens.
Relative URLs passed to fetch()
are resolved against your app's . This means if your app's backend is on the same domain as your
, you can make requests to it using
fetch('/path')
.
Make requests to your app's backend
Get Product Data
Anchor to direct-api-accessDirect API access
You can make Shopify Admin API requests directly from your extension using the query API or the standard web fetch API!
Any fetch()
calls from your extension to Shopify's Admin GraphQL API are automatically authenticated by default. These calls are fast too, because Shopify handles requests directly.
Direct API requests use online access mode by default. If you want to use offline access mode, you can set the property to
offline
in your app TOML file.
Note: Direct API can't be used to manage storefront access tokens.
Query Shopify data
Anchor to custom-protocolsCustom Protocols
Custom protocols make it easier to navigate to common locations, and construct URLs.
Anchor to custom-protocols-shopify-protocolShopify Protocol
Use the shopify:admin
protocol when you want to construct a URL with a root of the Shopify Admin.
Anchor to custom-protocols-app-protocolApp Protocol
Use the app:
protocol to construct a URL for your app. Shopify will handle constructing the base URL for your app. This works for both embedded and non-embedded apps.
Anchor to custom-protocols-extension-protocolExtension Protocol
Triggers an action extension from a block extension using the extension:
protocol. The is the target of the action extension. The handle is the handle of the action extension that will be opened.
Anchor to custom-protocols-relative-urlsRelative Urls
Relative urls are relative to your app and are useful when you want to link to a route within your app. This works for both embedded and non-embedded apps.
Shopify:admin
Anchor to deployingDeploying
Use the Shopify CLI to deploy your app and its extensions.
Deploy an extension
CLI
Anchor to securitySecurity
UI Extensions run on a different origin than the Shopify Admin. For network calls to succeed, your server must support cross-origin resource sharing (CORS) for the origin https://extensions.shopifycdn.com
.
If you have a custom Access-Control-Allow-Origin
header set, you must include https://extensions.shopifycdn.com
in the list of allowed origins.
If you are using the Shopify App Remix Template, this is done automatically for you.