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 learn
Anchor 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
Requirements
Anchor link to section titled "Requirements"- You've completed the getting started guide.
Sample code
Anchor link to section titled "Sample code"The sample code imports several checkout components, including BlockStack, Checkbox, and 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 point
Anchor link to section titled "Step 1: Set up the extension point"The 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 metafield
Anchor 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 value
Anchor 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 metafield. The Checkbox and 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 key and namespace values for the metafield.
Step 4: Show the note in the Shopify admin
Anchor 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 namespace and key as defined in the extension config file.
Your extension in the Shopify admin should now look similar to the following image:
