Custom banners and fields

You can build functionality in your app that allows merchants to display and configure the following experiences:

• Custom banners in checkout
• Custom fields in checkout

You can use a checkout UI extension to build a custom banner. The following example shows how to display a banner that renders at the purchase.checkout.block.render target.

You can support static targets so that extensions can be rendered using the checkout editor in one of the supported locations in checkout.

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:

Follow tutorials to learn how to build custom banners and fields.

Build a custom banner

Learn how to add a custom banner to 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.

Explore the following developer tools and resources to get familiar with building custom banners and 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.