The Shopify admin is where users configure their stores and manage their businesses. Integrating your app with the admin gives users functionality that feels familiar and can be easily found.

This guide explains the different ways that you can use Shopify Extensions to integrate your app with the Shopify admin.

## App home

The primary place where users engage with your app is its app home. This is the location where merchants are directed when they navigate to your app in Shopify.

The Shopify admin provides a surface for apps to render the UX for their app home. On the web, the surface is an iframe and in the Shopify mobile app, the surface is a WebView.

![A diagram that shows the Shopify admin. The screenshot highlights an app home. The app navigation is rendered directly in the Shopify admin navigation.](/assets/apps/platform/embedded-app.png)

By combining [Shopify App Bridge](/docs/api/app-bridge) and [Polaris React](https://polaris-react.shopify.com), you can make your app display seamlessly in the Shopify admin. Polaris React enables apps to match the visual appearance of the admin by using the same design components. App Bridge enables apps to communicate with the Shopify admin and create UI elements outside of the app's surface. Such elements include navigation menus, modals that cover the entire screen, and contextual save bars that prevent users from navigating away from the page when they have unsaved changes.

When you're building your app home, follow the [App Design Guidelines](/docs/apps/design-guidelines) and the [admin performance best practices](/docs/apps/build/performance/admin-installation-oauth) to ensure that you create a great experience for users.

## UI extensions in admin

To display a user interface in Shopify admin, apps can include UI extensions. Shopify admin can display three types of UI extensions: admin actions, action print actions, and admin blocks.

### Admin actions

[Admin actions](/docs/apps/build/admin/actions-blocks#admin-action-ui-extensions) are powered by UI extensions and enable your app to embed transactional workflows that display as modals. These UI extensions let users interact with your app directly from key pages of the Shopify admin, such as the **Products**, **Customers**, and **Orders** pages. You can also create UI extensions that become available when users select multiple resources in an index table, for example, selecting multiple products on the **Products** index page.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/admin/admin-actions-and-block/action-extension-example-static-a8d95207226887699ab3723dc7486ff100f642fc9b957047d669de9cad698ff3.png" class="lazyload" alt="An example admin action UI extension displaying as a modal on the Products page of the Shopify admin, with fields for merchants to input data." width="2400" height="1600"></figure>

### Admin print actions

Admin print actions are a special form of UI extension designed to let your app print documents from key pages in the Shopify admin. Unlike a typical admin actions, these UI extensions are found under the **Print** menu on orders and product pages. Additionally, they contain special APIs to let your app display a preview of a document and print it.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/admin/admin-actions-and-block/build-an-admin-print-action/print-action-extension-example-60a96ec09556371d9ef33e4f9ead21e501b876c88855195b98c597521130be1a.png" class="lazyload" alt="An example admin print action UI extension." width="2604" height="1646"></figure>

### Admin blocks

[Admin block UI extensions](/docs/apps/build/admin/actions-blocks#admin-blocks-ui-extensions) let your app embed contextual experiences that display as cards on key pages of the admin, such as the **Products**, **Customers**, and **Orders** pages. Blocks enable your app to persistently display relevant information to users. They also let users edit your app's data and other product data. After admin block UI extensions are built and deployed, users have the option to add your app's block to resource pages and edit its location on the pages.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/admin/admin-actions-and-block/block-extension-example-static-7f7965a5aa9ba1bb71f0f92ef7023c4c02f94b83a10c3231be3d51c3426b8d9e.png" class="lazyload" alt="An example admin block UI extension." width="2400" height="1600"></figure>

## Admin link extensions

[Admin link extensions](/docs/apps/build/admin/admin-links) create links from resource pages in the Shopify admin to related pages of your app. You should use them sparingly because they have the potential to disrupt user workflows with slow, full-page navigations.

## Developer tools and resources

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/api/app-bridge" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/library"
     data-alt-src="/assets/resource-cards/library-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify App Bridge
    </h3>
    <p class="resource-card__description">A JavaScript library that lets you embed app pages in the Shopify admin.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="https://polaris-react.shopify.com/" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Polaris React design system
    </h3>
    <p class="resource-card__description">Design patterns and a library of UI components, tokens, and icons to build app home pages.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/design-guidelines/" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/bfsgem"
     data-alt-src="/assets/resource-cards/bfsgem-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      App Design Guidelines
    </h3>
    <p class="resource-card__description">Directives to show you what great Shopify apps look like and how they’re crafted.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/performance/admin-installation-oauth" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/hearts"
     data-alt-src="/assets/resource-cards/hearts-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Performance best practices
    </h3>
    <p class="resource-card__description">A set of best practices for building fast and responsive apps in the Shopify admin.</p>
  </a>
</div>
</div>


## Next steps

- [Create an app home page](/docs/apps/build/scaffold-app) in the Shopify admin.