---
title: Getting started with POS UI extensions
description: >-
  Learn how to prepare your development environment to start building POS UI
  extensions.
source_url:
  html: 'https://shopify.dev/docs/apps/build/pos/getting-started'
  md: 'https://shopify.dev/docs/apps/build/pos/getting-started.md'
---

ExpandOn this page

* [What you'll learn](https://shopify.dev/docs/apps/build/pos/getting-started.md#what-youll-learn)
* [Requirements](https://shopify.dev/docs/apps/build/pos/getting-started.md#requirements)
* [Step 1: Generate a POS UI extension](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-1-generate-a-pos-ui-extension)
* [Step 2: Run the local extension in your dev store](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-2-run-the-local-extension-in-your-dev-store)
* [Step 3: Install your app and preview your extension](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-3-install-your-app-and-preview-your-extension)
* [Step 4: Leverage developer tools to troubleshoot and refine](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-4-leverage-developer-tools-to-troubleshoot-and-refine)
* [Optional ESLint configuration](https://shopify.dev/docs/apps/build/pos/getting-started.md#optional-eslint-configuration)
* [Updating](https://shopify.dev/docs/apps/build/pos/getting-started.md#updating)
* [Next steps](https://shopify.dev/docs/apps/build/pos/getting-started.md#next-steps)

# Getting started with POS UI extensions

Learn how to prepare your development environment to start building POS UI extensions.

***

## What you'll learn

In this tutorial, you'll learn how to do the following tasks:

* Generate a POS UI extension using Shopify CLI.
* Run the local extension in your dev store.
* Test your app in Shopify POS.

***

## Requirements

* Create a [dev store](https://shopify.dev/docs/apps/tools/development-stores).
* Install or migrate to [Shopify CLI version 3.0 or higher](https://shopify.dev/docs/apps/tools/cli).
* [Scaffold an app](https://shopify.dev/docs/apps/build/scaffold-app).
* Embed [your app in Shopify POS](https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration#pos).

***

## Step 1: Generate a POS UI extension

1. Navigate to your app directory.

2. Ensure Shopify CLI is using the most up to date versions.

3. Generate your POS UI extension template.

4. Select `POS UI` under the Point-of-Sale menu.

5. Give your extension a working name.

6. Select the programming language that you want to work in.

### Generate a POS UI extension

```bash
shopify upgrade
shopify app generate extension
```

***

## Step 2: Run the local extension in your dev store

After you create your extension, you can [start a local development server](https://shopify.dev/docs/apps/build/scaffold-app#step-2-start-a-local-development-server) so that you can run your extension in your dev store.

When you start the server, Shopify CLI uses [Cloudflare](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/do-more-with-tunnels/trycloudflare/) to create a secure tunnel. Cloudflare gives your app extension a unique URL.

1. Install your project's dependencies using the command from your package manager of choice.

2. Start your local server for your extension in the app directory.

3. Follow the prompts to associate your extension with your app and dev store. Your development server should now be running.

![Local Development Server Example](https://shopify.dev/assets/assets/apps/pos/ui-ext-dev-server-console-BHc4kRfO.png)

To learn more about the processes that execute when you run `dev`, refer to the list of [Shopify CLI commands](https://shopify.dev/docs/api/shopify-cli/app/app-dev).

### Install dependencies and start a local development server

##### npm

```bash
npm i
shopify app dev
```

##### yarn

```bash
yarn
shopify app dev
```

***

## Step 3: Install your app and preview your extension

You can install your app and preview your extension in Shopify POS from the developer console.

1. With your server running, press `p` to open the developer console.

2. To preview your extension, select the **View mobile** button. This generates a deep link or QR code.

3. Using a mobile device with the Shopify POS app installed, scan the QR code. This opens Shopify POS on your device and installs the extension in preview mode. If your extension's URL changes, you will need to re-add the smart grid extension tile.

Tip

If you're using Android and your extension isn't loading, then refer to the [troubleshooting guide](https://shopify.dev/docs/apps/pos/ui-extensions/troubleshooting).

![The developer console showing a POS UI extension](https://shopify.dev/assets/assets/apps/pos/ui-ext-dev-console-DNttH7ap.png)

***

## Step 4: Leverage developer tools to troubleshoot and refine

The POS Dev Console provides quick access to extension management during your development process.

To access the POS Dev Console, tap the app icon in the global navigation on the left on tablet experiences, and via the More menu on mobile experiences.

After installing your extension, you may use the console to:

* Check for and identify errors which will appear next to your extension's name
* Toggle **App persistence** to keep your extension active between POS restarts
* Preview extension targets without needing to tap through to target locations and
* **Remove dev extensions** to uninstall all dev extensions

![POS Dev Console and its location in the sidebar](https://shopify.dev/assets/assets/apps/pos/devconsole-reference-fEwltfHT.png)

***

## Optional ESLint configuration

If your app is using ESLint, update your configuration to include the new global \`shopify\` object.

### .​eslintrc.​cjs

```js
module.exports = {
  globals: {
    shopify: 'readonly',
  },
};
```

***

## Updating

You can refer to the [developer changelog](https://shopify.dev/changelog) to see if you are using the latest one.

Merchants can manage their POS UI extensions across locations from the POS channel. You can direct merchants to this capability in your merchant facing communication: `https://admin.shopify.com/store/{shop}/apps/point-of-sale-channel/settings/pos-ui-extensions`

***

## Next steps

* Follow along with an [example discount extension](https://shopify.dev/docs/apps/pos/example-discount-extension).
* Explore the full [reference of Shopify retail APIs and components](https://shopify.dev/docs/api/pos-ui-extensions) that you can use for your POS UI extension.
* Learn how to [deploy and release an app extension](https://shopify.dev/docs/apps/deployment/app-versions).

***

* [What you'll learn](https://shopify.dev/docs/apps/build/pos/getting-started.md#what-youll-learn)
* [Requirements](https://shopify.dev/docs/apps/build/pos/getting-started.md#requirements)
* [Step 1: Generate a POS UI extension](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-1-generate-a-pos-ui-extension)
* [Step 2: Run the local extension in your dev store](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-2-run-the-local-extension-in-your-dev-store)
* [Step 3: Install your app and preview your extension](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-3-install-your-app-and-preview-your-extension)
* [Step 4: Leverage developer tools to troubleshoot and refine](https://shopify.dev/docs/apps/build/pos/getting-started.md#step-4-leverage-developer-tools-to-troubleshoot-and-refine)
* [Optional ESLint configuration](https://shopify.dev/docs/apps/build/pos/getting-started.md#optional-eslint-configuration)
* [Updating](https://shopify.dev/docs/apps/build/pos/getting-started.md#updating)
* [Next steps](https://shopify.dev/docs/apps/build/pos/getting-started.md#next-steps)