Getting started with POS UI extensions
Learn how to prepare your development environment to start building POS UI extensions.
Anchor to what-youll-learnWhat 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 development store.
- Test your app in Shopify POS.
Anchor to requirementsRequirements
- Create a development store.
- Install or migrate to Shopify CLI version 3.0 or higher.
- Create an app.
- Embed your app in Shopify POS.
Anchor to step-1-generate-a-pos-ui-extensionStep 1: Generate a POS UI Extension
Navigate to your app directory.
Ensure Shopify CLI is using the most up to date versions.
Generate your POS UI extension template.
Select
under the Point-of-Sale menu.
Give your extension a working name.
Select the programming language that you want to work in.
Generate a POS UI Extension
Anchor to step-2-run-the-local-extension-in-your-development-storeStep 2: Run the local extension in your development store
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 dependencies 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.
Install dependencies and start a local development server
Anchor to step-3-install-your-app-and-preview-your-extensionStep 3: Install your app and preview your extension
You can install your app and preview your extension in Shopify POS from the developer console.
With your server running, press
p
to open the developer console.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. 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.
If you're using Android and your extension isn't loading, then refer to the troubleshooting guide.
Anchor to updatingUpdating
You can refer to the list of the available POS UI Extension versions 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:
Anchor to next-stepsNext steps
- Follow along with an example discount extension.
- Explore the full reference of Shopify retail APIs and components that you can use for your POS UI extension.
- Learn how to deploy and release an app extension.