---
gid: 9ad299f7-c3a6-4026-9289-37d818259abe
title: Build a discounts UI with Remix
description: Create a UI that merchants can use to configure your discount function.
---
import RequirementPartial from 'app/views/partials/apps/discounts/requirements_partial.mdx';
import ReviewFunctionExecution from 'app/views/partials/apps/app-extensions/review-function-execution.md';
import DeployAndReinstallApp from 'app/views/partials/apps/discounts/deploy-and-reinstall-app.mdx';
import NextStepsDiscounts from 'app/views/partials/apps/discounts/next-steps-discounts.mdx';
To build a UI that merchants can use to configure a Discount Function, you can use Admin UI Extensions to display a form on the discount details page, or you can add a page to a Remix app. This tutorial describes how to add a page to a Remix app, which will render the Discount Function editing UI at a path of your own specification.
## What you'll learn
In this tutorial, you'll learn how to do the following tasks:
1. **Scaffold a Remix app with the Shopify CLI**
Build your app using the provided template with all necessary components.
2. **Review frontend UI components**
Explore the app structure, including routes, forms, and Polaris components that create the merchant interface for discount configuration.
3. **Set up a discount Function**
Configure the discount function to handle product, order, and shipping discounts using metafields and GraphQL operations.
4. **Deploy the app to Shopify**
Push your app to Shopify and install it in your development store.
5. **Configure a test discount**
Using your app's interface, create an automatic discount with specific percentages for products, orders, and shipping.
6. **Verify the discount functionality**
Test the discount in your development store's cart and checkout flow, confirming all discount types apply correctly.
Install Node.js 22 or higher.
On Windows, Rust requires the [Microsoft C++ Build Tools](https://docs.microsoft.com/en-us/windows/dev-environment/rust/setup). Make sure to select the **Desktop development with C++** workload when installing the tools.
To ensure compatibility with the latest version of Rust, install the `wasm32-wasip1` target.
## Scaffold the Remix app
To scaffold a complete Remix app, run this command to set up your development environment with a fully functional Remix app.
```bash
shopify app init --template https://github.com/Shopify/discounts-reference-app/examples/remix-app
```
This command sets up your development environment with a fully functional Remix app. The next steps walk you through the key components.
## Understand the discount configuration UI
The app structure includes these key directories.
- 📁 `components/` Reusable UI components
- 📁 `graphql/` GraphQL queries and mutations for functions, collections, and discounts
- 📁 `hooks/` Custom React hooks, including `useDiscountForm` for discount management
- 📁 `routes/` Remix routes handling app navigation, authentication, and discount management
- 📁 `types/` TypeScript definitions including form types, admin types, and generated types
- 📁 `utils/` Utility functions including navigation helpers
The app integrates [@shopify/polaris](https://www.npmjs.com/package/@shopify/polaris) components to match the Shopify admin interface.
## Review routes, UI components, and discount configuration
The route files manage discount creation and editing.
### Ensure the correct access scopes are set
Review the `shopify.app.toml` file to ensure the correct access scopes are set. Your app needs `write_discounts` and `read_products` scopes.
### Explore the create discount route
Review the discount creation logic in the create route file.
The [`action`](https://remix.run/docs/main/route/action) function processes form submissions through the [`discountCodeAppCreate`](/docs/api/admin-graphql/latest/mutations/discountCodeAppCreate) mutation.
### Examine the edit discount route
To understand discount editing, review the edit route file.
### Review the `DiscountForm` component
The DiscountForm component is responsible for rendering the form that allows merchants to configure the discount:
This form includes fields required by the discount creation mutation:
- `title`
- `method`
- `code`
- `combinesWith`
- `discountClasses`
- `usageLimit`
- `appliesOncePerCustomer`
- `startsAt`
- `endsAt`
- `metafield`
### Understand the `discountClasses` configuration
The form includes a section for selecting discount classes. This section allows merchants to apply discounts to `PRODUCT`, `ORDER`, and `SHIPPING` classes.
### Review the discount percentage configuration
Examine how merchants set discount percentages.
This section of the form allows merchants to set the discount percentage for each class, using a number input.
### Explore the `CollectionPicker` component
Review how collection selection works.
This section uses the AppBridge `ResourcePicker` component to allow merchants to select collections, to make sure that discounts are applied to the expected products.
The discount configuration uses metafields for storage. Learn more about [using metafields with input queries](/docs/apps/build/functions/input-output/metafields-for-input-queries).
## Review server-side discount management
To learn how the Remix app handles server-side operations, examine the files in the app/models directory. These files query and mutate resources using Shopify's GraphQL Admin API.
### Explore functions server file
This file queries the Functions associated with your app. We use this query to populate the `functionId` field used in the `discountAutomaticAppCreate` and `discountCodeAppCreate` mutations.
### Review collections server file
This file handles collection data stored in discount metafields. We use this query to populate the list of collections displayed in the section where merchants can select collections to target with the discount. When editing a discount, we use this query to populate the list of collections displayed below the resource picker.
### Examine discounts server file
This file manages discount creation, updates, and retrieval. We use this file to create, read, and update discounts.
## Review GraphQL operations
In this step, you'll examine the app's GraphQL queries and mutations. These operations communicate with the Shopify Admin GraphQL API to create, read, and update discounts, retrieve collections, and retrieve functions.
### Review discount graphql file
These queries and mutations handle, retrieving discounts, creating code and automatic discounts, and updating code and automatic discounts.
### Examine collections graphql file
This file contains queries for collection data which is used to populate the list of collections displayed in the section where merchants can select collections. When editing a discount, we use this query to populate the list of collections displayed below the resource picker.
### Review functions graphql file
This query returns functions for your app when the app is installed on a merchant's store. This example uses this query to populate the app's home page, which allows you to navigate to the create discount page and it also populates the `functionId` field used in the `discountAutomaticAppCreate` and `discountCodeAppCreate` mutations.
## Set up the Discount Function
Now, create a Discount Function. This function will be used to apply discounts to products, orders, and shipping, and merchants can configure these discounts using your Remix app's UI.
Run this command to scaffold your Discount Function:
```bash
shopify app generate extension --template discount --name discount-function-rs
```
```bash
shopify app generate extension --template discount --name discount-function-js
```
## Configure the Discount Function
In this step, you'll configure the Discount Function to apply discounts to products, orders, and shipping based on the discount configuration that is stored on the discount instance and its metafield.
Your Function should only return operations for `discountClasses` that the discount applies to. For example, if the discount is configured to apply to `PRODUCT` and `ORDER`, but not `SHIPPING`, your Function should only return operations for `PRODUCT` and `ORDER`.
### Define the UI paths and input variables
1. Update the UI paths in `shopify.extension.toml`. This property tells the Shopify admin where to find the UI that allows merchants to configure discounts associated with your Discount Function.
1. Register a metafield variable that your Function will use as a dynamic input. Refer to [variables in input queries](/docs/apps/build/functions/input-output/use-variables-input-queries) for more information. In this example, the `collectionIds` property of the metafield object is used as the input variable for the Function.
### Query the data needed for your Function cart run target
The `cart_lines_discounts_generate_run.graphql` file drives your function logic by querying essential cart data which is used as the input for your Function. This file queries:
- Cart properties to use with the `inAnyCollection` field for determining which collections your Function will target, `$collectionIds` are passed to the query as a variable.
- The `discountClasses` property to identify which discount classes (PRODUCT, ORDER, SHIPPING) your Function will return discounts for.
- Metafield data to retrieve collection IDs and discount percentage values. The metafield is queried by its key and namespace.
The [`inAnyCollection`](/docs/api/functions/reference/discount/graphql/common-objects/product) field is used to determine whether a product belongs to one of the specified collections. This field is `true` when a product variant is associated with the specified set of collections, and `false` otherwise. Note that if the collection set is empty, it returns `false`.
### Query the data needed for your Function delivery run target
The `cart_delivery_options_discounts_generate_run.graphql` file drives your function logic by querying essential delivery data which is used as the input for your Function. This file queries:
- Cart `deliveryGroups` to retrieve the delivery options available to the customer.
- The `discountClasses` property to determine whether the SHIPPING discount class is set.
- Metafield data to retrieve the discount percentage for delivery options. The metafield is queried by its key and namespace.
### Create your cart run Function logic
Using the input data from the `cart_lines_discounts_generate_run.graphql` file, you can create your Function's logic.
In this example, you retrieve the metafield object which contains the cart line and order discount percentages, the collection IDs for which the discount applies and the discountClasses that your discount will apply to. You can then use this data to create your Function's logic.
First, you parse the metafield, then you can conditionally add [ProductDiscountsAddOperation](/docs/api/functions/reference/discount/graphql/common-objects/productdiscountsaddoperation) and [OrderDiscountsAddOperation](/docs/api/functions/reference/discount/graphql/common-objects/orderdiscountsaddoperation) operations to the return value based on whether the cart line's product is part of a collection that your discount targets, and whether the discountClasses for the discount are set to `PRODUCT` or `ORDER`.
### Create your delivery run Function logic
Using the input data from the `cart_delivery_options_discounts_generate_run.graphql` file, you can create your Function's logic.
In this example, you retrieve the metafield object which contains the delivery discount percentage. You can then use this data to create your Function's logic.
First, you parse the metafield, then you can conditionally add [DeliveryDiscountsAddOperation](/docs/api/functions/reference/discount/graphql/common-objects/deliverydiscountsaddoperation) operations to the return value based on whether the discountClasses for the discount are set to `SHIPPING`.
## Deploy and test
## Create a test discount
1. In your Shopify admin, navigate to **Discounts**.
1. To prevent conflicting discounts from activating, deactivate any existing discounts.
1. Click **Create discount**.
1. Under your app name, select your discount function.
1. Configure the discount with these values:
- **Method**: **Automatic**
- **Title**: **Product, Order, Shipping Discount**
- **DiscountClasses**: Select **Product**, **Order**, and **Shipping**
- **Product discount percentage**: **20**
- **Order discount percentage**: **10**
- **Shipping discount percentage**: **5**
- **Collection IDs**: Select your test collections
1. Click **Save**
## Test the discount
1. Open **Discounts** in your Shopify admin
1. Locate your new cart line, order, and shipping discount
1. Now, go to your development store and add products to your cart.
Your cart page displays:
- Product line discounts
- Order subtotal discount
Your checkout page displays:
- Product line discounts
- Order subtotal discount
- Shipping rate discounts (after entering shipping address)
### Review the execution of the Function