Skip to main content

Build a discount UI extension

This tutorial shows you how to use the pos.home.tile.render and pos.home.modal.render extension targets to build a simple POS UI extension that quickly applies discounts to items in the cart.

You'll create a smart grid tile that's enabled after a cart reaches a specified value. Tapping the tile will open a modal displaying buttons for available discounts. Pressing a button will apply a discount to the cart and present a success notification.

POS UI extensions discount example app

Anchor to What you'll learnWhat you'll learn

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

  • Subscribe to cart changes.
  • Enable or disable the tile based on cart contents.
  • Add buttons to the modal that apply a discount and show a toast when tapped.
  • Deploy your extension to Shopify, create a version, and publish.

Requirements

Create a Partner account
Create a development store
Scaffold an app

Scaffold an app using Shopify CLI. This tutorial is compatible with the extension-only template.

Generate a POS UI extension

Generate a POS UI extension using the Shopify CLI.

Project

Anchor to Subscribe to cart changesSubscribe to cart changes

You previously created an app and generated a POS UI extension using Shopify CLI. You now need to subscribe to cart changes to get the contents of a cart. By subscribing to cart changes, you'll be able to control whether the smart grid tile is enabled after a cart reaches a specified value.

In the tile code, subscribe to cart changes and mutate the state based on the updated cart.

Anchor to Enable or disable the tile based on cart contentsEnable or disable the tile based on cart contents

With the cart contents in place, you can now enable or disable the tile based on cart contents. You can enable or disable the tile based on cart contents by accessing its subscribable property.

In the tile code, initialize the state based on the initial value of the subscribable property.

Anchor to Add buttonsAdd buttons

With the cart contents in place, you can now add buttons to the modal that apply a discount and display a toast when tapped. You can add buttons to the modal that trigger some action on press.

Create the buttons on the modal. Note that most components belong in a ScrollView.

Anchor to Define a function to trigger an actionDefine a function to trigger an action

To trigger an action when the button is pressed, you need to define an onPress function. In the context of this tutorial, you'll apply the discount and show the toast.

Define an onPress function to apply the discount and show the toast.

Anchor to Add a description for your extensionAdd a description for your extension

In POS, the description is used to help merchants discover and add your extension. This description is used as the label for your extension in POS.

Your extension's description will be visible to the merchant when they discover and add it to their POS.

Extension description

When you generate a POS UI extension from Shopify CLI, the extension description defaults to the name of the extension. You can update the description in the generated toml file (shopify.extension.toml).

Note

name is an internal value that is visible in the Partner Dashboard as the title of an extension on the page that displays the extensions list.

Anchor to Test the extensionTest the extension

To test the extension, you'll need to run your app locally and test the extension in the POS.

  1. Navigate to your app directory and start your development server.

  2. Press p to open the developer console.

  3. In the developer console, click on the view mobile button or scan the provided QR code to preview your extension.

Anchor to Deploy and releaseDeploy and release

Congratulations! You've created a POS UI extension that applies discounts to items in the cart. Now you can deploy and release your extension.

Refer to Deploy app extensions for more information.

Was this page helpful?