--- title: About custom banners and fields description: Learn about building custom banners and fields in Shopify checkout. source_url: html: https://shopify.dev/docs/apps/build/checkout/fields-banners md: https://shopify.dev/docs/apps/build/checkout/fields-banners.md --- ExpandOn this page * [How it works](https://shopify.dev/docs/apps/build/checkout/fields-banners#how-it-works) * [Getting started](https://shopify.dev/docs/apps/build/checkout/fields-banners#getting-started) * [Developer tools and resources](https://shopify.dev/docs/apps/build/checkout/fields-banners#developer-tools-and-resources) # About custom banners and 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 custom banners and fields, and describes the resources that you can use to build them in Shopify checkout. *** ## How it works You can build functionality in your app that allows merchants to display and configure the following experiences: * [Custom banners](#custom-banners) in checkout * [Custom fields](#custom-fields) in checkout ### Custom banners A custom banner is a notice that you can display to customers. For example, you might want to show a banner that indicates that items are final sale and can't be returned or exchanged. You can use a [UI extension](https://shopify.dev/docs/api/checkout-ui-extensions) to build a custom banner. You can support [static targets](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview#static-extension-targets) so that extensions can be rendered using the checkout editor in one of the [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview) in checkout. The following example shows how to display a banner that renders at the [`purchase.checkout.block.render`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/extensiontargets) target. ![The custom banner in checkout, indicating that items are final sale and can't be returned or exchanged](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/checkout/custom-banner-BGu9rm9u.png) ### 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. You can use a [UI extension](https://shopify.dev/docs/api/checkout-ui-extensions) 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`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/extensiontargets) extension target: *** ## Getting started Follow tutorials to learn how to build custom banners and fields. [![](https://shopify.dev/images/icons/48/flag.png)![](https://shopify.dev/images/icons/48/flag-dark.png)](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-banner) [Build a custom banner](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-banner) [Learn how to add a custom banner to checkout.](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-banner) [![](https://shopify.dev/images/icons/48/growth.png)![](https://shopify.dev/images/icons/48/growth-dark.png)](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field) [Build a custom checkout field](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field) [Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order.](https://shopify.dev/docs/apps/build/checkout/fields-banners/add-field) *** ## Developer tools and resources Explore the following developer tools and resources to get familiar with building custom banners and fields. [![](https://shopify.dev/images/icons/48/build.png)![](https://shopify.dev/images/icons/48/build-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview) [Checkout UI extensions API reference](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview) [Consult the API reference for checkout UI targets and their respective types.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview) [![](https://shopify.dev/images/icons/48/blocks.png)![](https://shopify.dev/images/icons/48/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components) [Components for checkout UI extensions](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components) [Learn about the components that are available in checkout UI extensions.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components) [![](https://shopify.dev/images/icons/48/gear.png)![](https://shopify.dev/images/icons/48/gear-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration) [Checkout extension configuration](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration) [Learn about the properties that you can configure in your checkout UI extension.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration) [![](https://shopify.dev/images/icons/48/heart.png)![](https://shopify.dev/images/icons/48/heart-dark.png)](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields) [UX guidelines for custom fields](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields) [Explore UX guidelines that you can refer to when building custom fields.](https://shopify.dev/docs/apps/build/checkout/fields-banners/ux-for-fields) *** * [How it works](https://shopify.dev/docs/apps/build/checkout/fields-banners#how-it-works) * [Getting started](https://shopify.dev/docs/apps/build/checkout/fields-banners#getting-started) * [Developer tools and resources](https://shopify.dev/docs/apps/build/checkout/fields-banners#developer-tools-and-resources)