Collecting delivery instructions at checkout
Previously, you created a checkout UI extension that renders some text in the checkout flow. Now you want to add custom fields to checkout, to capture information from the customer.
In this tutorial, you'll use the
Checkout::ShippingMethods::RenderAfter extension point, checkout UI components, and UI extensions APIs to create a custom field for collecting delivery instructions from customers, and then save those instructions to a metafield.
This tutorial is for delivery instructions, but you can use it as the basis for building other use cases for custom fields.
What you'll learnAnchor link to section titled "What you'll learn"
In this tutorial, you'll learn how to do the following tasks:
Render an optional input field for customers to add a note
Save the note to a metafield
RequirementsAnchor link to section titled "Requirements"
- You've completed the getting started guide.
Sample codeAnchor link to section titled "Sample code"
The sample code imports several checkout components, including
TextField to compose the user interface that renders at the
Checkout::ShippingMethods::RenderAfter extension point. The code uses the
applyMetafieldChange extension point API to update a metafield with a customer value.
You can copy and paste the following code into your
index file and add a few example values to get the extension to render in the browser.
You'll also need to update your extension's configuration file with the information in the code example.
The rest of the tutorial walks through this sample code step-by-step.
Step 1: Set up the extension pointAnchor link to section titled "Step 1: Set up the extension point"
Checkout::ShippingMethods::RenderAfter extension point renders the extension after the shipping methods section on the shipping step of the checkout.
Step 2: Set up a metafieldAnchor link to section titled "Step 2: Set up a metafield"
Now that you've set up the extension point, you'll save custom fields using public metafields. Public metafields are available to any app or extension.
Access the metafield and set that as your initial value, and use
applyMetafieldsChange()to update and persist that value.
Step 3: Render the note box and set the valueAnchor link to section titled "Step 3: Render the note box and set the value"
In this step, you'll render a checkbox that toggles an input where customers can add a note, which is then saved to a
TextField components display the offer to the customer.
To set the note value, you'll make a request to the
applyMetafieldChange extension point API with the
namespace values for the metafield.
Step 4: Show the note in the Shopify adminAnchor link to section titled "Step 4: Show the note in the Shopify admin"
After you've saved the note metafield to the order, display it on the order details page in the Shopify admin so that merchants can view it.
Add a metafield definition for Orders. Use the same
key as defined in the extension config file.
Your extension in the Shopify admin should now look similar to the following image:
Localize checkout UI extensions
Localize checkout UI extensions for international merchants and customers.
Checkout UI extension points API
Checkout UI extension components