Build Better Point-of-Sale Apps with POS UI Extensions

Shopify POS is a flexible, customizable tool for brick-and-mortar retailers, thanks to the support of third-party apps. Apps are an easy and effective way to build and solve essential in-store and omnichannel tasks, and positively impact the merchant experience. Unlike traditional point-of-sale (POS) systems, apps are front and center of the Shopify POS experience, making it easier than ever to customize workflows to suit any business need.

Now, with new POS UI extensions, you have the technology to extend the functionality of the Shopify platform like never before. POS UI extensions enable developers to write simple React or JavaScript/TypeScript code that is translated into native app code, which is seamlessly integrated into the POS experience while preserving performance and rendering native UI.

In this article, we take a look at the details of how POS UI extensions work, and how some app developers are capitalizing on the opportunity of extending into Shopify POS.

Why we’re building POS UI extensions

Using UI extensions to extend apps into the Shopify POS takes the guesswork out of the user experience both for merchants, and for you as a developer. You can now build specific POS workflows using components and libraries built by experienced developers, without sacrificing performance.

The benefits of building with POS UI extensions are:

• Improved app performance thanks to faster load times
• Higher user engagement in-app through highly-integrated workflows
• Easy implementation process so you can capitalize on new opportunities

We have launched two new extension points for the Smart Grid. The Smart Grid is the home screen on the Shopify POS app where you can add different tiles representing frequently accessed products, collections, features and third-party apps. The two new extensions available for the Smart Grid are the Tile and the Modal.

1. The Smart Grid Tile extension

The Smart Grid Tile extension point displays information about the extension and opens the Modal, which contains the primary app functionality.

The tile is fully dynamic and can respond to changes in the cart or the backend of your app. For example, using the updated Receive Transfers POS UI extension, the tile could display a subtitle indicating the number of transfers, prompting the user to investigate.

The tile can also be a quick and powerful shortcut on the Smart Grid. For example, a discount app could apply 50% off a purchase when a customer buys five items. The tile could detect the five items in the cart and go from a disabled state to an enabled state, displaying 50% off available.

2. Modal extension

The Modal extension point is a full screen display. Using the Modal extension allows for more space to visualize information and complex workflows, improving the UI experience.

Modal components

Worrying about styling updates and keeping up with Shopify’s design system Polaris meant maintaining a bunch of CSS files. Now, building with POS UI extensions means using modal extension components that mirror the look and feel of the Shopify POS experience. When Shopify makes an update to the component library, the extension is automatically updated.

How Shopify developers are already working with POS UI extensions

We opened access to POS UI extensions to a few select developers, to help implement and test how these extensions really worked in retail and omnichannel environments. One such developer was Sammy Isseyegh and the team atStackable Discounts, a POS app that combines multiple promotions from discounts to manual codes, giving customers the benefits of cost savings and merchants a handy way to apply multiple discounts to the cart. The team at Stackable Discounts rebuilt their app using POS UI extensions.

“Because of the nature of the app opening multiple times during a single checkout, the time it took to load the screen and for our app to do the calculations and apply the discounts was difficult for merchants,” says Sammy.

Stackable Discount was built usingPOS Link,反应s to changes to the cart. Once items are scanned, users click the Stackable Discounts tile on the Smart Grid to calculate and apply discounts.

“The app is now just a fundamentally better experience,” explains Sammy. “It is ten times faster, consistent across iOS and Android, and solves top pain points for merchants. The code is much cleaner and easier to look after.”

Andrew Cargill and the team at app development companyZapietagree. Their app helps merchants maximize sales and stay in control of orders and logistics with delivery, pickup, and scheduling functionality. Retail is a priority for them.

“Our app is all about physical retail stores,” Andrew shares. “Merchants are always interacting with Zapiet.”

Zapiet also built their POS app using POS Link. It looked exactly like the desktop version, containing all the features and elements you would expect when administering orders from the Shopify admin.

“When you are at the POS in a busy shop and a customer is standing in front of you, you don’t need all the elements in the admin dashboard. It is a very different customer experience.”

Zapiet’s customers were reporting slow load times, but the development team had limited options due to a long integration authentication process. “We were prepared to build something ourselves just to make it faster and easier for our customers.”

Zapiet joined the early access program for POS UI extensions to jump at the opportunity to solve this challenge. They had the basics of the rebuilt app up and running in two days, plus a few weeks to build out the rest.

“It was super fast to get up and running. You code and instantly see the changes locally in real time,” says Andrew. “It is a huge help. The development speed is significantly faster. We are just writing with React and it's beautiful out of the box.”

More flexibility to come with POS UI extensions

While we’re starting with the Smart Grid Tile and Modal, since they’re such an interactive part of POS, we have plans to add new components to continue extending the POS functionality. So, whether you’re getting started with building an app for retail for the very first time, improving the efficiency of a current extension, or building totally new functionality, POS UI extensions will transform app performance using the extensible platform that will power the future of apps for Shopify POS.

Additionally, POS is a growing market with exciting opportunities to grow your business into new spaces. Buyers want a seamless and engaging retail experience, and merchants are looking for opportunities to meet this demand. The opportunity for apps to support these requirements and facilitate these experiences directly from POS is expanding.

Whether you are looking to improve the efficiency of a current extension or build totally new functionality, retail is a green space in theShopify App Store.

To get started building POS UI extensions, visit ourdeveloper documentation. We’ve got everything you need to start building your customized workflows including a step-by-step guide, code snippets, screen shots, and more.