---
title: App home
description: The [app home](/docs/apps/admin/embedded-app-home) is the primary surface for merchants to interact with your app, providing access to data and UI rendering within the Shopify Admin. Using Polaris components and App Bridge, you can integrate using the Web Platform APIs you're already familiar with, making it easy to build and maintain performant apps on the Shopify platform.
api_name: app-home
source_url:
html: https://shopify.dev/docs/api/app-home
md: https://shopify.dev/docs/api/app-home.md
---
# App home
The [app home](https://shopify.dev/docs/apps/admin/embedded-app-home) is the primary surface for merchants to interact with your app, providing access to data and UI rendering within the Shopify Admin. Using Polaris components and App Bridge, you can integrate using the Web Platform APIs you're already familiar with, making it easy to build and maintain performant apps on the Shopify platform.
## Getting started
To build for the App Home we recommend adding App Bridge and the Polaris Web Components to your application.
Polaris web components provide a consistent UI experience that matches the Shopify Admin while leveraging standard web platform features. To use these components in your app, you need to include the Polaris script in your application.
Apps that use these components can also include pre-built UI [patterns](https://shopify.dev/docs/api/app-home/patterns) that are implemented using Polaris web components. These patterns help you quickly build consistent, familiar experiences for merchants that follow Shopify's design guidelines.
New React Router Application
Start building your app fast with the Shopify CLI and the [Shopify React Router App template](https://github.com/Shopify/shopify-app-template-react-router). The CLI will set up App Bridge and the Polaris Web Components for you.
You will need to select:
1. Select Build a React Router app (recommended)
2. Select JavaScript OR TypeScript.
Existing Remix Application
Add the Polaris Web Components script tag to your `app/root.tsx` file's ``.
To use the Remix router you will need to control the custom event `shopify:navigate` and push that into `useNavigate`.
Build your own way
When building your own way add the script tag right after the existing App Bridge script tag in your HTML head.
### Examples
* #### Setup
##### Default
```shell
shopify app init
```
## Resources
[](https://shopify.dev/docs/api/app-home/polaris-web-components)
[Polaris web components](https://shopify.dev/docs/api/app-home/polaris-web-components)
[View all available components](https://shopify.dev/docs/api/app-home/polaris-web-components)
[](https://shopify.dev/docs/api/app-home/patterns)
[Patterns](https://shopify.dev/docs/api/app-home/patterns)
[Common app home patterns](https://shopify.dev/docs/api/app-home/patterns)
[](https://storybook.polaris-admin.shopify.dev/)
[Storybook](https://storybook.polaris-admin.shopify.dev/)
[Explore component examples](https://storybook.polaris-admin.shopify.dev/)
[](https://shopify.dev/docs/apps/design-guidelines)
[App Design Guidelines](https://shopify.dev/docs/apps/design-guidelines)
[Follow our UX guidelines when you're designing your app to ensure that they're predictable and easy to use.](https://shopify.dev/docs/apps/design-guidelines)
[](https://community.shopify.com/c/shopify-cli-and-tools/bd-p/tools)
[Shopify CLI and Tools forum](https://community.shopify.com/c/shopify-cli-and-tools/bd-p/tools)
[Visit our Shopify CLI and Tools forum if you need help using Shopify App Bridge.](https://community.shopify.com/c/shopify-cli-and-tools/bd-p/tools)
[](https://www.figma.com/community/file/1554895871000783188/polaris-ui-kit-community)
[Figma Kit](https://www.figma.com/community/file/1554895871000783188/polaris-ui-kit-community)
[Download the Figma Kit](https://www.figma.com/community/file/1554895871000783188/polaris-ui-kit-community)
## Your first API call
The following example uses [`Resource Picker`](https://shopify.dev/docs/api/app-home/apis/resource-picker) to open a UI component that enables users to browse, find, and select products from their store using a familiar experiences.
### Examples
* #### Resource Picker
##### Default
```html
```
## 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](https://shopify.dev/docs/api/app-bridge-library#react), then the types package is already included.
Additionally, Shopify provides a companion npm library for Polaris web components types, available at [`@shopify/polaris-types`](https://www.npmjs.com/package/@shopify/polaris-types).
App Bridge Installation
The `@shopify/app-bridge-types` package can be installed using `yarn` or `npm`.
App Bridge Configuration
Adding the `@shopify/app-bridge-types` package to your `tsconfig.json` file will enable type checking for all files in your project.
Polaris Web Components Installation
The `@shopify/polaris-types` package can be installed using `yarn` or `npm`. Specify `latest` in package.json if using .
Polaris Web Components Configuration
Adding the `@shopify/polaris-types` package to your `tsconfig.json` file will enable type checking for all files in your project.
### Examples
* #### Installation
##### npm
```shell
npm install --save-dev @shopify/app-bridge-types
```
##### yarn
```shell
yarn add --dev @shopify/app-bridge-types
```
## 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](https://shopify.dev/docs/api/app-home/apis/toast) or [retrieving app configuration details](https://shopify.dev/docs/api/app-home/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
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](https://shopify.dev/docs/apps/tools/cli/configuration#admin) in your app TOML file, along with whether you want to use direct API access with [online access](https://shopify.dev/docs/apps/auth/oauth/access-modes#online-access) or [offline access](https://shopify.dev/docs/apps/auth/oauth/access-modes#offline-access) mode.
[](https://shopify.dev/docs/apps/tools/cli/configuration)
[Learn more about API access modesConfiguration guide](https://shopify.dev/docs/apps/tools/cli/configuration)
### Examples
* #### Query Shopify data
##### Fetch directly from the Admin API
```js
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);
```
## Migration
If you have an app that uses components and hooks from Shopify App Bridge React 3.x.x, then you can follow the [migration guide](https://shopify.dev/docs/api/app-bridge/migration-guide) to upgrade your components and hooks to the latest version.
## Next steps
Now that you've initialized your app, you can use any [Shopify App Bridge features](https://shopify.dev/docs/api/app-home/apis).
Support
If you need help using Shopify App Bridge, please visit our [API & SDK forum](https://community.shopify.com/c/shopify-apis-and-sdks/bd-p/shopify-apis-and-technology?shpxid=6f68a110-2319-4947-FFF2-CDCEF85022D4). 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](https://github.com/Shopify/shopify-app-bridge/issues).