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
Anchor link to section titled "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 development store.
- Test your app in Shopify POS.
Requirements
Anchor link to section titled "Requirements"- Create a development store.
- Install or migrate to Shopify CLI version 3.0 or higher.
- Create an app.
- Embed your app in Shopify POS.
Step 1: Generate a POS UI Extension
Anchor link to section titled "Step 1: Generate a POS UI Extension"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.
Step 2: Run the local extension in your development store
Anchor link to section titled "Step 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 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.
Launch the UI extension developer console by opening the preview URL provided in the terminal. It should look something like
https://attitudes-stays-recommend-beatles.trycloudflare.com/extensions/dev-console
.
To learn more about the processes that execute when you run dev
, refer to the Shopify CLI command reference.
Step 3: Install your app & preview your extension in Shopify POS
Anchor link to section titled "Step 3: Install your app & preview your extension in Shopify POS"In the UI extension developer console, you can install your app to your development store by opening the Preview link. It should open up a new URL and prompt you to install your app.
To preview your extension, select the View mobile button and this should generate 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 will open Shopify POS on your device, and install the extension. If your extension's URL changes, then you need to re-add the smart grid extension tile.
You can refer to the list of the available POS UI Extension versions to see if there are any updates you can use.
- 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 publish a UI extension.