Custom fields

A custom field is a property that allows users to enter text into a user interface. For example, you might want to create a custom field that collects delivery instructions from customers. This guide introduces how custom fields work, and describes the available resources that you can use to build custom fields.

How it works

Anchor link to section titled "How it works"

You can use a checkout UI extension to build a custom field. The following example shows a custom field that collects delivery instructions and renders at the purchase.checkout.shipping-option-list.render-after target:

Getting started

Anchor link to section titled "Getting started"

Follow the getting started tutorial to learn how to build custom fields in checkout.

Build a custom checkout field

Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order.

Developer tools and resources

Anchor link to section titled "Developer tools and resources"

Explore the following developer tools and resources to get familiar with building custom fields.

Checkout UI extensions API reference

Consult the API reference for checkout UI targets and their respective types.

Components for checkout UI extensions

Learn about the components that are available in checkout UI extensions.

Checkout extension configuration

Learn about the properties that you can configure in your checkout UI extension.

UX guidelines for custom fields

Explore UX guidelines that you can refer to when building custom fields.

Next steps

Anchor link to section titled "Next steps"

Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order.