Shopify apps can appear in and add functionality to nearly every area of the Shopify platform. A single app can add functionality to multiple areas of the platform. Shopify provides multiple tools and resources to surface apps in each area. Depending on the tool that you're using, Shopify might host your code, or you might have to arrange for hosting yourself.

> Note:
> Regardless of where you surface your app, you need to create a [Shopify Partner account](https://www.shopify.com/partners) and create a [development store](/docs/api/development-stores) to test your app.

## The Shopify admin

The Shopify admin is the primary interface for merchants to manage their stores, and core Shopify objects such as products, orders, and customers. The Shopify admin is also the place where merchants can manage their apps. Developers can surface their app's functionality in the Shopify admin using the following technologies:

- [Embedded app pages](#embedded-app-pages)
- [Custom data](#custom-data)
- [App extensions](#admin-app-extensions)

### Embedded app pages

You can embed your app user interface, or parts of your app user interface, directly inside of the Shopify admin. Embedding your app in the Shopify admin makes your app feel familiar, gives you access to Shopify user interface elements, and lets merchants use your app on mobile devices.

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

#### Tools, APIs, and resources

You can use the following Shopify resources to build embedded app pages:

<div class="resource-card-grid">
  <p><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>

<div>
  <a class="resource-card" href="/docs/apps/build/cli-for-apps" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI
    </h3>
    <p class="resource-card__description">A command-line tool that helps you build Shopify apps faster, and provides an easy way to clone boilerplate code for embedded app pages.</p>
  </a>
</div>

</div>


<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="https://polaris.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 design system
    </h3>
    <p class="resource-card__description">Design patterns and guidance, including a library of UI components, tokens, and icons to build embedded app pages.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/admin-graphql" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/graphql"
     data-alt-src="/assets/resource-cards/graphql-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      GraphQL Admin API
    </h3>
    <p class="resource-card__description">The GraphQL Admin API lets you read and write Shopify resource data, including products, customers, orders, inventory, fulfillment, and more.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/tools#app-templates" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify app templates
    </h3>
    <p class="resource-card__description">App templates in Remix, Node.js, and Ruby that provide a starting point for building embedded app pages.</p>
  </a>
</div>
</div>


### Custom data

Shopify's platform includes data models for basic commerce concepts such as products, collections, and orders. However, merchants might require more complex or specific data models. Apps can extend the data models of Shopify's platform by creating custom data models using metafields and metaobjects. Metafields let you add new fields on Shopify-defined resources like orders or products. Metaobjects are custom data structures that your app can define and create to store your app's information. Similar to metafields, metaobjects can be associated with a Shopify resource such as a product or a collection. However, metaobjects can also exist on their own. Metafields and metaobjects can be connected to Shopify resources, and used by merchants in the Shopify admin.

![A screenshot of the orders page in the Shopify admin. There is a pinned metafield definition that is visible to merchants. The screenshot is annotated to explain that an app added the metafield to the order.](/assets/apps/platform/metafield-definition.png)

#### Tools, APIs, and resources

You can use the following Shopify resources to build with custom data:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/custom-data/metafields" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/app"
     data-alt-src="/assets/resource-cards/app-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Metafields overview
    </h3>
    <p class="resource-card__description">Learn about creating and defining custom fields on resources in Shopify.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/custom-data/metaobjects" 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">
      Metaobjects overview
    </h3>
    <p class="resource-card__description">Get started with defining and creating metaobjects to extend your store&#39;s data model.</p>
  </a>
</div>
</div>


### Admin app extensions

App extensions allow you to add your app's functionality to the Shopify admin. For example, a bulk action link extension lets you make your app accessible to merchants wherever action drop-down lists are available in the Shopify admin.

![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](/assets/apps/platform/app-extension-bulk-actions.png)

#### Tools, APIs, and resources

You can use the following Shopify resources to build embedded app extensions:

<div class="resource-card-grid">
  <p><div>
  <a class="resource-card" href="/docs/apps/build/admin/actions-blocks" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/tool"
     data-alt-src="/assets/resource-cards/tool-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Admin actions and blocks
    </h3>
    <p class="resource-card__description">Learn about admin action and block extensions that appear as modals and cards in the Shopify admin.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/admin/admin-links/add-admin-links" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create admin app extensions
    </h3>
    <p class="resource-card__description">Learn how to create some basic app extensions that display in the Shopify admin, including admin links, bulk action links, and navigation links.</p>
  </a>
</div></p>

<div>
  <a class="resource-card" href="/docs/apps/build/app-extensions/list-of-app-extensions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/docs"
     data-alt-src="/assets/resource-cards/docs-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      List of app extensions
    </h3>
    <p class="resource-card__description">Review the available app extension types and learn how to create them.</p>
  </a>
</div>

</div>


## Checkout

Merchants use Shopify checkout to accept orders and receive payments wherever they sell online. You can add functionality to Shopify checkout by building an app. Apps can extend Shopify checkout using the following technologies:

- [Checkout UI extensions](#checkout-ui-extensions)
- [Shopify Functions](#shopify-functions)
- [Post-purchase checkout extensions](#post-purchase-checkout-extensions)

### Checkout UI extensions

Checkout UI extensions allow app developers to build custom UI components and functionality that merchants can install at defined points in the checkout flow. For example, app developers can create extensions for custom fields and product offers that render directly in the checkout flow.

![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.](/assets/apps/platform/checkout-ui-banner.png)

#### Tools, APIs, and resources

You can use the following Shopify resources to build Checkout UI extensions:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/checkout" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout overview
    </h3>
    <p class="resource-card__description">Learn more about customizing checkout UI extensions with our tutorials for building common use cases.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/apis/extensiontargets" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/graphql"
     data-alt-src="/assets/resource-cards/graphql-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout UI target APIs
    </h3>
    <p class="resource-card__description">APIs and JavaScript functions for rendering a user interface and adding functionality to checkout.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/components" 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">
      Checkout UI extension components
    </h3>
    <p class="resource-card__description">A library of vanilla JavaScript components and React components that checkout UI extensions can use to render an interface.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/cli-for-apps" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI
    </h3>
    <p class="resource-card__description">A command-line tool to help you build Shopify apps, and create and register Checkout UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/app-extensions/build-extension-only-app" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/docs"
     data-alt-src="/assets/resource-cards/docs-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Extension-only apps
    </h3>
    <p class="resource-card__description">Learn how to create an extension-only app.</p>
  </a>
</div>
</div>


### Shopify Functions

Shopify Functions let developers customize the backend logic that powers parts of Shopify. Developers can write code to create custom discount logic, customize the names and sort order for checkout delivery and payment options, provide custom checkout and cart validation, and more. This code is pushed to Shopify and executed on Shopify’s infrastructure.

<iframe width="100%" height="500" src="https://www.youtube.com/embed/wNdvxLzWUQg?start=63" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

#### Tools, APIs, and resources

You can use the following Shopify resources to build Shopify Functions:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/functions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/docs"
     data-alt-src="/assets/resource-cards/docs-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify Functions overview
    </h3>
    <p class="resource-card__description">Understand what Shopify Functions are and how to use them to customize the backend logic that powers parts of Shopify.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/functions#getting-started" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify Functions tutorials
    </h3>
    <p class="resource-card__description">Learn more about Shopify Functions with our tutorials for building common use cases.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/functions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/graphql"
     data-alt-src="/assets/resource-cards/graphql-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Functions API reference
    </h3>
    <p class="resource-card__description">Explore the Functions API reference to learn about the backend logic that you can customize.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/cli-for-apps" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI
    </h3>
    <p class="resource-card__description">A command-line tool to help you build Shopify apps, and create and register app extensions that use Shopify Functions.</p>
  </a>
</div>
</div>


### Post-purchase checkout extensions

Post-purchase checkout extensions let merchants add a post-purchase page directly into the Shopify checkout. You can use these extensions to add custom content such as product offers, survey requests, and important information about the order.

#### Tools, APIs and resources

You can use the following Shopify resources to build post-purchase checkout extensions:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/checkout/product-offers/build-a-post-purchase-offer" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Tutorial: Building a post-purchase checkout extension
    </h3>
    <p class="resource-card__description">Learn how to build a post-purchase checkout extension.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/checkout-extensions/post-purchase/components" 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">
      Checkout extension component library
    </h3>
    <p class="resource-card__description">A library of vanilla JavaScript components and React components that post-purchase checkout extensions can use to render an interface.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/cli-for-apps" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI
    </h3>
    <p class="resource-card__description">A command-line tool to help you build Shopify apps, and create and register post-purchase checkout extensions.</p>
  </a>
</div>
</div>


## Online store

The online store is a storefront that merchants use to sell their products. You can add functionality to the online store using the following technologies:

- [Theme app extensions](#theme-app-extensions)
- [Web pixels](#web-pixels)
- [Storefront API](#storefront-api)

### Theme app extensions

Theme app extensions let merchants add dynamic elements to their themes without having to interact with Liquid templates or code. Theme app extensions automatically expose your app in the theme editor. You can leverage the editor’s visual editing capabilities without needing to replicate them in your app. Apps that are built in the theme app extension framework don't edit theme code, which decreases the risk of introducing breaking changes to the theme. This makes it easier to iterate on the content of the integration and provides for a better merchant experience, such as upgrading a theme.

#### Tools, APIs and resources

You can use the following Shopify resources to build theme app extensions:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/online-store/theme-app-extensions/build" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Tutorial: Building a theme app extension
    </h3>
    <p class="resource-card__description">Learn how to build a theme app extension.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/cli-for-apps" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI
    </h3>
    <p class="resource-card__description">A command-line tool to help you build Shopify apps, and create and register theme app extensions.</p>
  </a>
</div>

</div>


### Web pixels

Web pixels are JavaScript code snippets that run on the online store and collect behavioral data, which are referred to as customer events, for marketing campaign optimization and analytics. After you’ve created your web pixel and configured it to a merchant’s store, your pixel can load in the store's online store. As a customer browses the online store, they’ll trigger customer events that your pixel can subscribe to.

#### Tools, APIs and resources

You can use the following Shopify resources to build web pixels:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/marketing-analytics/pixels" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Web pixels overview
    </h3>
    <p class="resource-card__description">Learn more about how your app can use web pixels.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/web-pixels-api/standard-events" 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">
      Customer events reference
    </h3>
    <p class="resource-card__description">Learn about the ways of tracking and sending events with web pixels.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/web-pixels-api" 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">
      Web pixel extension API
    </h3>
    <p class="resource-card__description">Learn about the sandboxing modes for web pixels and the API references that are available for the sandbox.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/cli-for-apps" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI
    </h3>
    <p class="resource-card__description">A command-line tool to help you build Shopify apps faster and create and register web pixels.</p>
  </a>
</div>

</div>


### Storefront API

Storefront API allows you to retrieve customer-facing values with built-in contextualization, such as international pricing and translations.

#### Tools, APIs and resources

You can use the following Shopify resources to build with Storefront API:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/api/usage/access-scopes#unauthenticated-access-scopes" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Storefront access scopes
    </h3>
    <p class="resource-card__description">Learn about the different Storefront access scopes you can request for your app. These access scopes don&#39;t require authentication.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/headless/building-with-the-storefront-api/markets/international-pricing" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/globe"
     data-alt-src="/assets/resource-cards/globe-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      International pricing
    </h3>
    <p class="resource-card__description">Learn how to use the Storefront API to retrieve international pricing for products that the merchant has configured.</p>
  </a>
</div>
</div>


## Shopify Flow

Shopify Flow is an app and platform that lets merchants customize their store through automation. You can integrate your app with Shopify Flow through custom triggers, actions, and templates. Triggers enable your app to start a Flow workflow. Actions enable Flow to call your app or service in a workflow to do work. Templates are example workflows that showcase your custom triggers and actions.

### Tools, APIs and resources

You can use the following Shopify resources to build with Shopify Flow:

<div class="resource-card-grid">
  <p><div>
  <a class="resource-card" href="/docs/apps/build/flow/triggers" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/forum"
     data-alt-src="/assets/resource-cards/forum-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify Flow triggers
    </h3>
    <p class="resource-card__description">Learn how to create Shopify Flow triggers, which enable your app to start a workflow.</p>
  </a>
</div></p>

<div>
  <a class="resource-card" href="/docs/apps/build/flow/actions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/tool"
     data-alt-src="/assets/resource-cards/tool-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify Flow actions
    </h3>
    <p class="resource-card__description">Learn how to create Shopify Flow actions. Actions enable Flow to call your app or service in a workflow to do work.</p>
  </a>
</div>

</div>


## Point of Sale

Shopify Point of Sale (POS) is a point of sale app that merchants can use to sell products in person. Merchants can create a cart for each customer, customize the cart in several ways, and then accept payment with a wide range of payment methods. You can surface your app's functionality in Shopify POS through standardized APIs and extensions.

### Tools, APIs, and resources

You can use the following Shopify resources to build POS apps:

<div class="resource-card-grid">
  <p><div>
  <a class="resource-card" href="/docs/api/pos-ui-extensions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/tool"
     data-alt-src="/assets/resource-cards/tool-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      POS UI extensions
    </h3>
    <p class="resource-card__description">Build extensions that use interface elements and behaviors that mirror the look and feel of the POS retail experience.</p>
  </a>
</div></p>

<div>
  <a class="resource-card" href="/docs/apps/build/pos/embed-app-in-pos" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Embedded apps
    </h3>
    <p class="resource-card__description">Embed your app into Shopify Point of Sale (POS).</p>
  </a>
</div>

</div>


## Server-only apps

Some apps might not provide a user interface for merchants. Instead, they might provide backend functionality for other apps, or sync data from Shopify to another system.

> Note:
> Apps that don't provide a user interface for merchants can't be distributed through the Shopify App Store.

### Tools, APIs, and resources

You can use the following Shopify resources to build server-only apps:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/distribution#capabilities-and-requirements" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/docs"
     data-alt-src="/assets/resource-cards/docs-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      App distribution models
    </h3>
    <p class="resource-card__description">Learn about the ways that you can distribute your app, and the capabilities and requirements for each distribution method.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/authentication-authorization/access-tokens/generate-app-access-tokens-admin" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/authentication"
     data-alt-src="/assets/resource-cards/authentication-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Authentication for custom apps in the Shopify admin
    </h3>
    <p class="resource-card__description">Create a new custom app directly from the Shopify admin.</p>
  </a>
</div>
</div>


## Hosting

Depending on how you're integrating with Shopify, Shopify might host your code, or you might have to arrange for hosting yourself. Shopify-hosted tools are hosted on Shopify's infrastructure, which require deployment to Shopify and can be viewed and managed in the Partner Dashboard. For app components such as the app server and embedded admin pages, the app developer manages the infrastructure. Shopify provides [resources](/docs/apps/launch/deployment) for deploying CLI-generated apps to common hosting providers.

<table>
  <caption></caption>
  <thead>
    <tr>
      <th scope=“col”>Shopify surface</th>
      <th scope=“col”>App component</th>
      <th scope=“col”>Hosted by Shopify</th>
      <th scope=“col”>Hosted by developer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope=“row” rowspan=3><a href="#the-shopify-admin">The Shopify admin</a></td>
      <td><a href="#embedded-app-pages">Embedded app pages</a></td>
      <td></td>
      <td>✓</td>
    </tr>
    <tr>
      <td><a href="#custom-data">Custom data</a></td>
      <td>✓</td>
      <td></td>
    </tr>
    <tr>
      <td><a href="#admin-app-extensions">Admin UI extensions</a></td>
      <td>✓</td>
      <td></td>
    </tr>
    <tr>
      <td scope=“row” rowspan=3><a href="#checkout">Checkout</a></td>
      <td><a href="#checkout-ui-extensions">Checkout UI extensions</a></td>
      <td>✓</td>
      <td></td>
    </tr>
    <tr>
      <td><a href="#shopify-functions">Shopify Functions</a></td>
      <td>✓</td>
      <td></td>
    </tr>
    <tr>
      <td><a href="#post-purchase-checkout-extensions">Post-purchase checkout extensions</a></td>
      <td>✓</td>
      <td></td>
    </tr>
    <tr>
      <td scope=“row” rowspan=2><a href="#online-store">Online Store</a></td>
      <td><a href="#theme-app-extensions">Theme app extensions</a></td>
      <td>✓</td>
      <td></td>
    </tr>
    <tr>
      <td><a href="#web-pixels">Web pixels</a></td>
      <td>✓</td>
      <td></td>
    </tr>
    <tr>
      <td scope="row" rowspan=1> <a href="#shopify-flow"> Shopify Flow </a> </td>
      <td></td>
      <td></td>
      <td>✓</td>
    </tr>
    <tr>
      <td scope="row" rowspan=1> <a href="#point-of-sale"> Point of Sale</a> </td>
      <td></td>
      <td></td>
      <td>✓</td>
    </tr>
    <tr>
      <td scope="row" rowspan=1> <a href="#server-only-apps"> Server-only apps</a> </td>
      <td></td>
      <td></td>
      <td>✓</td>
    </tr>
  </tbody>
</table>

## Next steps

- Follow this [in-depth tutorial](/docs/apps/build/build) to gain experience with the most popular Shopify APIs, tools, and libraries, while building a QR code generator app.