--- title: App surfaces description: Learn about the places where apps can add functionality to Shopify and about the tools you'll use to build apps in different parts of the Shopify platform. source_url: html: https://shopify.dev/docs/apps/build/app-surfaces md: https://shopify.dev/docs/apps/build/app-surfaces.md --- # App surfaces Shopify apps can surface functionality across multiple areas of the platform, from the Shopify admin to checkout to Point of Sale. Each area where your app can appear is called a surface, and a single app can add functionality to multiple surfaces. All UI surfaces share [Polaris](https://shopify.dev/docs/api/app-ui/using-polaris-web-components), Shopify's design system built on web components. Polaris provides UI components, patterns, and guidelines that make your app feel native to each surface. For API references and component docs, refer to [App UI references](https://shopify.dev/docs/api/app-ui). **Note:** Regardless of where you surface your app, you need to be a [user with app development permissions](https://shopify.dev/docs/apps/build/dev-dashboard/user-permissions) and create a [dev store](https://shopify.dev/docs/apps/build/dev-dashboard/development-stores) to test your app. *** ## App Home App Home is a dedicated area in the Shopify admin for your app to render its landing page and UI. It's where merchants interact with your app's core functionality, such as configuring settings, viewing data, and managing workflows. You build App Home pages using [App Bridge](https://shopify.dev/docs/api/app-bridge) and [Polaris web components](https://shopify.dev/docs/api/app-home/polaris-web-components). App Bridge handles communication between your app and the Shopify admin, while Polaris provides the UI components that make your app look and feel like a native part of the admin. To get started, [scaffold a new app](https://shopify.dev/docs/apps/build/scaffold-app) or explore the [App Home reference](https://shopify.dev/docs/api/app-home). ![A diagram that shows the Shopify admin with an app rendered in App Home. App navigation is displayed directly in the Shopify admin navigation.](https://shopify.dev/assets/assets/images/apps/platform/embedded-app-DNIz8ulq.png) *** ## Admin Admin UI extensions let you surface your app's functionality directly on resource pages in the Shopify admin, such as products, orders, and customers. Extensions appear as actions and blocks that merchants can install without leaving their current workflow. You can also build custom settings interfaces for Shopify Functions and extend the Shopify admin's data model using [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields) and [metaobjects](https://shopify.dev/docs/apps/build/custom-data/metaobjects). To get started, [build an admin action](https://shopify.dev/docs/apps/build/admin/actions-blocks/build-admin-action) or explore the [admin UI extensions](https://shopify.dev/docs/api/admin-extensions) and the [Shopify Functions](https://shopify.dev/docs/api/functions) references. ![A diagram that shows the order list page in the Shopify admin. The screenshot highlights a bulk action link that is rendered by an app extension. Multiple orders are selected, and the drop-down list where the bulk action link lives is shown.](https://shopify.dev/assets/assets/images/apps/platform/app-extension-bulk-actions-zubP3Zmq.png) *** ## Checkout Checkout is where customers complete their purchases. You can customize the checkout experience by adding UI elements and modifying backend logic like discounts and delivery options. You build checkout customizations using Checkout UI extensions for frontend elements, and Shopify Functions for backend logic like discounts, delivery options, payment options, and cart validation. To get started, [add a banner to checkout](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-banner) or explore the [Checkout UI extensions](https://shopify.dev/docs/api/checkout-ui-extensions) and [Shopify Function APIs](https://shopify.dev/docs/api/functions) references. ![A screenshot of the checkout page in the Shopify admin. An info banner is shown on the order summary page. The screenshot highlights a banner that was added by an app using a checkout UI extension.](https://shopify.dev/assets/assets/images/apps/platform/checkout-ui-banner-C-kFAMFO.png) *** ## Customer accounts Customer accounts are where customers view their order history, check order statuses, and manage their profile. You can extend these pages with custom functionality, such as loyalty programs, product reviews, or order tracking. You build customer account customizations using Customer account UI extensions that target specific pages like the order index, order status, and profile. You can also create entirely new pages using full-page extensions. To get started, [build an order status extension](https://shopify.dev/docs/apps/build/customer-accounts/inline-extensions/build-order-status) or explore the [Customer account UI extensions reference](https://shopify.dev/docs/api/customer-account-ui-extensions). ![A customer account order status page showing a loyalty points banner added by an app extension, along with order details, shipping information, and a list of purchased items.](https://shopify.dev/assets/assets/images/apps/platform/app-surfaces-customer-accounts-CObqmblj.png) *** ## Point of Sale Shopify Point of Sale (POS) is the interface merchants use to sell products in person. You can add custom functionality to POS, such as loyalty program enrollment, custom discounts, inventory alerts, or customer relationship tools. You build POS customizations using POS UI extensions that target specific areas of the interface, including the smart grid, cart, and post-purchase screens. Extensions render as native components across both iOS and Android. To get started, [build a POS UI extension](https://shopify.dev/docs/apps/build/pos/getting-started) or explore the [POS UI extensions reference](https://shopify.dev/docs/api/pos-ui-extensions). ![The Shopify POS smart grid on an iPad, showing product tiles, action tiles like Add custom sale and Ship all items, and a cart panel. A callout highlights a POS customization in the smart grid.](https://shopify.dev/assets/assets/images/apps/platform/app-surfaces-pos-Bw0VM2HD.png) *** ## Online store The online store is the merchant's storefront where customers browse and buy products. You can extend the online store by adding custom elements to themes and collecting behavioral data for marketing and analytics. You build online store integrations primarily using theme app extensions, which let merchants add dynamic elements to their themes through the theme editor without editing Liquid code. You can also use [web pixels](https://shopify.dev/docs/apps/build/marketing-analytics/build-web-pixels) to collect customer behavior data on the storefront. To get started, [build a theme app extension](https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/build) or explore the [Storefront API reference](https://shopify.dev/docs/api/storefront). ![The theme editor showing an app embed called Mega Social Icon Bar that adds social media links to the online store. The storefront preview displays the social icons on the right side of the page.](https://shopify.dev/assets/assets/images/apps/platform/app-surfaces-online-store-D5v6Zvu7.png) *** ## Shopify Flow Shopify Flow is an automation platform you can use to build custom workflows for merchants. Workflows automate tasks in their store, such as sending notifications, tagging customers, or managing inventory. You can integrate your app with Flow by building triggers that send events from your app to start workflows, actions that let Flow call your app to perform tasks when conditions are met, and templates that give merchants pre-built workflows they can install from Flow's template library. To get started, [build a Flow trigger](https://shopify.dev/docs/apps/build/flow/triggers/create) or explore the [Flow templates reference](https://shopify.dev/docs/apps/build/flow/templates/reference). ![A workflow for a low stock notification displaying a trigger, condition, and action](https://shopify.dev/assets/assets/images/apps/flow/example-workflow-inventory-quantity-changed-9tECTTxk.png) *** ## Server-only apps Server-only apps run entirely in the background without a merchant-facing user interface. They're useful when you need to sync data between Shopify and external systems, run scheduled tasks, or respond to [webhooks](https://shopify.dev/docs/apps/build/webhooks) without requiring any merchant interaction. Because server-only apps have no UI, they're typically distributed as [custom apps](https://shopify.dev/docs/apps/build/authentication-authorization/access-tokens/generate-app-access-tokens-admin) installed on a single store rather than through the Shopify App Store. To get started, [subscribe to a webhook topic](https://shopify.dev/docs/apps/build/webhooks/subscribe/get-started). *** ## Hosting Depending on how you integrate with Shopify, Shopify might host your code, or you might need to arrange hosting yourself. Shopify-hosted components run on Shopify's infrastructure and are deployed using [Shopify CLI](https://shopify.dev/docs/apps/build/cli-for-apps) and the [Dev Dashboard](https://shopify.dev/docs/apps/build/dev-dashboard). For components like your app server and App Home pages, you manage the infrastructure. To learn about deploying developer-hosted components, refer to [About deployment](https://shopify.dev/docs/apps/launch/deployment). **Info:** Even when an extension is hosted by Shopify, your app might still need a developer-hosted backend to handle tasks like calling third-party APIs or storing custom data. | Surface | Component | Hosted by Shopify | Hosted by developer | | - | - | - | - | | [App Home](#app-home) | App Home pages | | ✓ | | [Admin](#admin) | Custom data | ✓ | | | Admin UI extensions | ✓ | | | | Shopify Functions | ✓ | | | | [Checkout](#checkout) | Checkout UI extensions | ✓ | | | Shopify Functions | ✓ | | | | [Customer accounts](#customer-accounts) | Customer account UI extensions | ✓ | | | [Online store](#online-store) | Theme app extensions | ✓ | | | Web pixels | ✓ | | | | [Shopify Flow](#shopify-flow) | Actions | | ✓ | | Triggers | | ✓ | | | Templates | ✓ | | | | [Point of Sale](#point-of-sale) | POS UI extensions | ✓ | | | [Server-only apps](#server-only-apps) | | | ✓ | *** ## Next steps [Scaffold a new app\ \ ](https://shopify.dev/docs/apps/build/scaffold-app) [Use Shopify CLI to generate a new app project with everything you need to get started.](https://shopify.dev/docs/apps/build/scaffold-app) [Build your first app\ \ ](https://shopify.dev/docs/apps/build/build) [Follow an in-depth tutorial to build an app and gain experience with the most popular Shopify APIs, tools, and libraries.](https://shopify.dev/docs/apps/build/build) ***