---
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'
api_name: checkout-ui-extensions
---

# 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://shopify.dev/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.

[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)

[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.

[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)

[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)

[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)

[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)

***