Build the UI for the delivery customization function
Merchants create and manage delivery customizations in the Shopify admin. Shopify uses URLs that you configure to render the delivery customization creation and editing experience for the merchant. You can customize this UI for your function's configuration needs, or to meet other requirements of your app.
Anchor to What you'll learnWhat you'll learn
In this tutorial, you'll learn how to do the following tasks:
- Create an App Bridge UI that enables users to create a function owner.
- Configure the UI paths for your function.

Anchor to RequirementsRequirements
- You've completed the Add configuration to your delivery customization tutorial.
- You created your app with the Remix app template.
Anchor to Step 1: Create the frontend UI for your functionStep 1: Create the frontend UI for your function
The following example builds a React-based page that enables merchants to create and configure a new delivery customization. The code renders a frontend page in your app and uses the GraphQL Admin API to create a delivery customization.
-
In
app/routes
, create a new file namedapp.delivery-customization.$functionId.$id.jsx
.The Shopify Remix app template uses file-based routing, so the file name determines the page's URL. The
$
prefix indicatesfunctionId
andid
are dynamic segments. The path for this page is/app/delivery-customization/{functionId}/{id}
. -
Add the following code in
app.delivery-customization.$functionId.$id.jsx
:- The
loader
function handles fetching the data to populate the form and is used when this page has anid
value that is notnew
. - The
action
function handles submitting the form data to Shopify to create the delivery customization. - The
DeliveryCustomization
function renders the page and form components using Polaris components and Remix hooks.
app/routes/app.delivery-customization.$functionId.$id.jsx
import { useState, useEffect } from "react";import {Banner,Card,FormLayout,Layout,Page,TextField,} from "@shopify/polaris";import {Form,useActionData,useNavigation,useSubmit,useLoaderData,} from "@remix-run/react";import { json } from "@remix-run/node";import { authenticate } from "../shopify.server";export const loader = async ({ params, request }) => {const { functionId, id } = params;const { admin } = await authenticate.admin(request);if (id != "new") {const gid = `gid://shopify/DeliveryCustomization/${id}`;const response = await admin.graphql(`#graphqlquery getDeliveryCustomization($id: ID!) {deliveryCustomization(id: $id) {idtitleenabledmetafield(namespace: "$app:delivery-customization", key: "function-configuration") {idvalue - The
Anchor to Step 2: Update your input query to use an app-owned namespaceStep 2: Update your input query to use an app-owned namespace
In the previous tutorial, you used a metafield namespace that was accessible to any app, so that the metafield namespace could be populated using GraphiQL. To make your function ready for production, you should update the metafield namespace to use a reserved prefix so that other apps can't use your metafield.
Replace the code in the extensions/delivery-customization/src/run.graphql
file with the following code. The query differs slightly in Rust and JavaScript due to code generation requirements.
run.graphql
src/run.graphql
query RunInput {
cart {
deliveryGroups {
deliveryAddress {
provinceCode
}
deliveryOptions {
handle
title
}
}
}
deliveryCustomization {
metafield(namespace: "$app:delivery-customization", key: "function-configuration") {
value
}
}
}
query Input {
cart {
deliveryGroups {
deliveryAddress {
provinceCode
}
deliveryOptions {
handle
title
}
}
}
deliveryCustomization {
metafield(namespace: "$app:delivery-customization", key: "function-configuration") {
value
}
}
}
Anchor to Step 3: Configure the create UI path for your functionStep 3: Configure the create UI path for your function
In shopify.extension.toml
, define the URLs that users will access to create and edit delivery customizations using your function. Shopify automatically fills in any dynamic tokens in these URLs.
In extensions/delivery-customization/shopify.extension.toml
, populate the two settings directly under [ui.paths]
. This change is automatically reflected as long as you're running dev
.
extensions/delivery-customization/shopify.extension.toml
Anchor to Step 4: Update your app access scopesStep 4: Update your app access scopes
You must request the write_delivery_customizations
access scope to invoke delivery customization mutations in the Admin API.
-
In
shopify.app.toml
in the root of your app, add thewrite_delivery_customizations
scope.shopify.app.toml
# This file stores configurations for your Shopify app.scopes = "write_products, write_delivery_customizations" -
Deploy your updated configuration to Shopify:
Terminal
shopify app deploy -
Restart your app:
Terminal
shopify app dev -
Use the URL provided by the CLI to open and re-install your app. You should be prompted to accept the new access scope permissions in your store.
Anchor to Step 5: Create and test your delivery customizationStep 5: Create and test your delivery customization
- From the Shopify admin, go to Settings > Shipping and delivery.
- Under the Delivery customizations section, click Manage.
- If you have existing customizations from previous tutorials, then click the checkbox next to each of them, and then click Deactivate.
- Click Add a customization and then click delivery-customization by {your app}.
- Fill in the delivery customization form, then click Save.
- Open your development store, build a cart, and proceed to checkout.
- Enter a delivery address that doesn't use the specified state/province code. You shouldn't see any additional messaging on the delivery options.
- Change your shipping address to use your chosen state/province code. Your delivery options should now have the additional messaging.
Anchor to Next stepsNext steps
- Learn more about how Shopify Functions work and the benefits of using Shopify Functions.
- Consult the API references for Shopify Functions.
- Learn how to use variables in your input query.
- Review the UX guidelines to learn how to implement delivery customizations in user interfaces.