Getting started with building delivery customizations
You can use delivery customizations to hide, reorder, and rename the delivery options that are available to buyers during checkout. In this tutorial, you'll use Shopify Functions to rename a delivery option offered to customers at checkout, based on the shipping destination.
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:
- Generate starter code for Shopify Functions.
- Use GraphQL to define the input of your function.
- Deploy functions to the Shopify platform.
- Review logs for your function.
Requirements
Anchor link to section titled "Requirements"- You've created a Partner account.
- You've created a development store.
You've created an app that uses Shopify CLI 3.0 or higher. If you previously installed Shopify CLI, then make sure you're using the latest version.
If you plan to create a UI for your extension, then start with the Remix app template.
You've installed Node.js 16 or higher.
You've installed your app on the development store.
Rust-specific requirements
Anchor link to section titled "Rust-specific requirements"The following requirements are specific to Rust-based development with Shopify Functions.
You've installed Rust.
On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.
You've installed cargo-wasi:
Step 1: Create the delivery customization function
Anchor link to section titled "Step 1: Create the delivery customization function"To create your delivery customization function, you can use Shopify CLI to generate a starter function, specify the inputs for your function using an input query, and implement your function logic using JavaScript or Rust.
Navigate to your app directory:
Run one of the following commands to create a new delivery customization extension:
Choose the language that you want to use. For this tutorial, you should select either JavaScript or Rust.
Navigate to
extensions/delivery-customization
:Replace the contents of
input.graphql
file with the following code.input.graphql
defines the input for the function. You need the cart delivery groups, with the delivery state/province code and available delivery options.If you're using JavaScript, then run the following command to regenerate types based on your input query:
Replace the
src/index.js
orsrc/main.rs
file with the following code.This function logic appends a message to all delivery options if the shipping address state or province code is
NC
. You can adjust this to the state or province of your choice.
Step 2: Preview the function on a development store
Anchor link to section titled "Step 2: Preview the function on a development store"To test your function, you need to make it available to your development store.
If you're developing a function in a language other than JavaScript, TypeScript, or Rust, ensure you have configured
build.watch
in your function settings.Navigate back to your app root:
Use the Shopify CLI
dev
command to start app preview:You can keep the this preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.
Follow the CLI prompts to preview your app, and install it on your development store.
Step 3: Create the delivery customization with GraphiQL
Anchor link to section titled "Step 3: Create the delivery customization with GraphiQL"To activate your function, you must create a delivery customization on the store where you installed your app. You can do this using the deliveryCustomizationCreate
GraphQL mutation.
In subsequent tutorials, you'll use metafields on this delivery customization to configure your function, and create a user interface so merchants can configure the function themselves.
Install the Shopify GraphiQL app on your store. If you've already installed GraphiQL, then you should do so again to select the necessary access scopes for delivery customizations.
In the GraphiQL app, in the API Version field, select the 2023-07 version.
Find the ID of your function by executing the following query:
The result contains a node with your function's ID:
Execute the following mutation and replace
YOUR_FUNCTION_ID_HERE
with the ID of your function:You should receive a GraphQL response that includes the ID of the created delivery customization. If the response includes any messages under
userErrors
, then review the errors, check that your mutation andfunctionId
are correct, and try the request again.
Step 4: Test the delivery customization
Anchor link to section titled "Step 4: Test the delivery customization"- From the Shopify admin, go to Settings > Shipping and delivery.
Check the Delivery customizations section. You should find the Add message to delivery options for state/province delivery customization that you created with GraphiQL.
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.
To debug your function, or view its output, you can review its logs in your Partner Dashboard.
- Log in to your Partner Dashboard and navigate to Apps > {your app} > Extensions > delivery-customization.
- Click on any function run to view its input, output, and any logs written to
STDERR
.
- Add configuration to your delivery customization using metafields.