Build a discount extension for Shopify POS
This tutorial shows you how to use the pos.home.tile.render and pos.home.modal.render extension points to build a simple POS UI extension that quickly applies discounts to items in the cart.
You'll develop the scaffolded extension into a smart grid tile that becomes enabled when the cart reaches a total value. When tapped, the tile opens a modal that presents buttons representing available discounts. When tapped, these buttons apply a discount to the cart and present a toast for notification of success.
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:
- Enable or disable the tile based on cart contents.
- Add buttons to the modal that apply a discount and show a toast when tapped.
- Give your extension a useful description.
- Deploy your extension to Shopify, create a version, and publish.
Requirements
Anchor link to section titled "Requirements"- You've completed the Getting started with POS UI extensions guide.
Sample code
Anchor link to section titled "Sample code"The sample code imports some extension components to build the UI. The tile contains the logic to control its enablement based on the cart subtotal. The modal contains the logic to apply discounts based on button tap.
You can copy and paste the following code into your index file. You can also update your extension's configuration file following the shopify.extension.toml example.
The rest of the tutorial walks through this sample code step-by-step.
Step 1: Enable or disable the tile based on cart contents
Anchor link to section titled "Step 1: Enable or disable the tile based on cart contents"You can enable or disable the tile based on cart contents by accessing its subscribable.
In the tile code, initialize state based on the
initialvalue of thesubscribable.In the tile code, subscribe to cart changes and mutate state based on the updated cart.
Step 2: Add buttons to the modal that apply a discount and display a toast when tapped
Anchor link to section titled "Step 2: 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.
Define an
onPressfunction to apply the discount and show the toast.
Step 3: Give your extension a useful description
Anchor link to section titled "Step 3: Give your extension a useful description"Your extension's description will be visible to the merchant when they discover and add it to their POS.
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).
Step 4: Deploy and release your extension
Anchor link to section titled "Step 4: Deploy and release your extension"Refer to Deploy app extensions for more information.
Debug POS UI Extension.
Learn more about building with POS UI extensions by exploring the POS UI extension reference.