POS UI Extensions
POS UI Extensions enable app developers to extend the capabilities of the Shopify POS app at defined extension points. You can use the POS UI Extension components and APIs to develop extensions that feel native to Shopify POS with faster performance.
For example, the following POS UI extension applies discounts to the products in the cart.
How it works
Anchor link to section titled "How it works"Developers can use Shopify CLI to get started with POS UI Extension to generate as scaffolding extension. Leveraging the defined extension points, extension API and components, developers can build a user experience to extend the capability of POS app. For example, you can build an extension that adds update cart, read cart data, apply discount to the product added in the cart and much more.
Using the Shopify CLI and Partner Portal, developers can deploy and publish extensions. Merchant can then discover and install extension in the POS app. The demo below shows how merchant can discover and add POS UI Extension in the POS app.
POS UI extensions provide UI components to build an interface with a native look and feel. Shopify POS renders the UI natively, so it's performant and accessible. Currently, these extensions are available only for the smart grid.
Refer to the POS UI Extensions reference for more information.
Extension points
Anchor link to section titled "Extension points"Extension points provide locations where merchants can insert custom content functionality. A extension point in a UI extension is a plain JavaScript function. This function receives some API for interacting with the application, and is expected to return a value in a specific shape. The input arguments and the output type are different for each extension point. Shopify POS currently has two extension points available for use. These extension points allow for the rendering of different components, as well as the ability to call different API functions.
The following extension points are available:
pos.home.tile.render: Customize the functionality of the app’s smart grid tile.pos.home.modal.render: Customize and build a full-screen modal that presents on top of the smart grid.
Developer tools and resources
Anchor link to section titled "Developer tools and resources"Explore the following developer tools and resources to learn more about building with POS UI extensions.
- Get started building a POS UI Extension.