Getting started with POS UI extensions

This tutorial shows you how to set up your development environment so that you can begin developing a POS UI extension.

What you'll learn

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

Navigate to your app directory.
Ensure @shopify/cli and @shopify/app packages are using the most up to date versions.
Generate your POS UI extension template.
Select POS UI under the Point-of-Sale menu.
Give your extension a working name.
Select the programming language that you want to work in.

After you create your extension, you can start a local development server so that you can run your extension in your development store.

When you start the server, Shopify CLI uses Cloudflare to create a secure tunnel. Cloudflare gives your app extension a unique URL.

Install your project's depdencies using the command from your package manager of choice.
Start your local server for your extension in the app directory.
Follow the prompts to associate your extension with your app and development store. Your development server should now be running.

To learn more about the processes that execute when you run dev, refer to the list of Shopify CLI commands.

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

To install your app, click on the preview link for the POS UI extension.
To preview your extension, select the View mobile button. This generates a deep link or QR code.

Using a mobile device with the Shopify POS app installed, scan the QR code that was generated from your developer console. This opens Shopify POS on your device, and installs the extension. If your extension's URL changes, then you need to re-add the smart grid extension tile.

The developer console showing a POS UI extension

You can refer to the list of the available POS UI Extension versions to see if you are using the latest one.