--- title: UX for fields description: Understand the UX guidelines for adding a custom field to checkout to capture delivery instructions, and learn how to design the best experience for customers and merchants. source_url: html: https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields md: https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields.md --- ExpandOn this page * [Placement](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#placement) * [Components](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#components) * [Layout](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#layout) * [UX guidelines](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#ux-guidelines) * [Next steps](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#next-steps) # UX for fields Plus [Checkout UI extensions](https://shopify.dev/docs/api/checkout-ui-extensions) that render on the information and shipping and payment steps in checkout are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan. This guide introduces UX guidelines for adding custom fields to checkout. *** ## Placement A static extension target lets you define the placement for the extension. Depending on your use case, you might also define multiple static targets to place your extension. For example, you might want to give the option to place the delivery instructions extension either before or after the shipping methods section. ## shopify.extension.toml ```toml [[extensions.targeting]] module = "./src/ShippingBefore.jsx" target = "purchase.checkout.shipping-option-list.render-before" [[extensions.targeting]] module = "./src/ShippingAfter.jsx" target = "purchase.checkout.shipping-option-list.render-after" ``` Place the delivery instructions extension in close proximity to the checkout step that it's related to. In this case, the [static extension targets](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview#static-extension-targets) `purchase.checkout.shipping-option-list.render-before` or `purchase.checkout.shipping-option-list.render-after` are the best locations for this extension type because it concerns delivery instructions. Note In some cases, extensions might not render if the static extension target being used is tied to an area that isn't rendered for the customer. For example, extensions using the `purchase.checkout.shipping-option-list.render-after` target won't show in a checkout with only digital products, because they won't be shipped. ![An example of where the purchase.checkout.shipping-option-list.render-after target will render, below the shipping options at checkout.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/delivery-instructions-render-example-BYqoAfq_.png) *** ## Components The components to create a custom field to capture delivery instructions depend on the extension's possible states. The delivery instructions use case can have the following states: * `Checkbox` is unchecked * `Checkbox` checked, `TextArea` then becomes visible * `TextArea` with value | Component | Preview | Tips | | - | - | - | | [`Checkbox`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/forms/checkbox) | ![The Checkbox component with a label beside it that says 'Provide delivery instructions'](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/delivery-instructions-checkbox-example-D1ceLhic.png) | N/A | | [`TextArea`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/forms/textarea) | ![The TextArea component with ghost text inside it that says 'Delivery instructions'](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/delivery-instructions-textfield-example-Bgv74Dhb.png) | Only show this component when the customer has expressed interest in adding delivery instructions. | *** ## Layout You can stack the `Checkbox` and `TextArea` components in the `Stack` component. | Component | Preview | | - | - | | [`Stack`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/stack) | ![A stacked Checkbox and TextArea demonstrating Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/delivery-instructions-blockstack-example-CU1R91tv.png) | ### Stack In the following example, `base` is the spacing value between the `Checkbox` and `TextArea` components. It prevents the extension from being too cramped or too spacious. ![An example of a Stack with base spacing.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/ux-guidelines/stack-spacing-DPjUzO3a.png) ![An example of a Checkbox and TextArea with base spacing.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/delivery-instructions-blockstack-example-CU1R91tv.png) *** ## UX guidelines Adhere to the following guidelines when you're designing a delivery instructions use case for checkout UI extensions, so that you can help merchants gain customer trust and provide a great checkout experience: ### Reveal information progressively and strategically Display a simplified state of the extension by default. In the following example, the customer can choose to add delivery instructions to an order. If the customer chooses to add delivery instructions, then the `TextArea` is displayed. It doesn't display otherwise. ![An example of how to use custom fields to capture delivery instructions progressively by revealing information with a checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/delivery-instructions-do-dont-vaaqoCXb.png) ### Capture and remember customer inputs Preserve inputs through the experience. For example, if the customer writes their delivery instructions in the `TextArea` component, then unchecks the `Checkbox` component and checks it again, the instructions should still display rather than having the customer type them again. *** ## Next steps * Explore [UX guidelines](https://shopify.dev/docs/apps/build/checkout/ux-for-checkout) for the entire checkout experience. - For practical guidance on how to design a user interface for the Shopify admin, refer to Shopify's [App Design Guidelines](https://shopify.dev/docs/apps/design-guidelines). - Get familiar with Polaris [accessibility](https://polaris.shopify.com/foundations/accessibility) and [content](https://polaris.shopify.com/content/merchant-to-customer) guidelines. *** * [Placement](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#placement) * [Components](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#components) * [Layout](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#layout) * [UX guidelines](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#ux-guidelines) * [Next steps](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields#next-steps)