> Shopify Plus:
> [Checkout UI extensions](/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 available 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 [checkout UI extension](/docs/api/checkout-ui-extensions) to build a custom banner.

You can support [static targets](/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](/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`](/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](/assets/apps/checkout/custom-banner.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 [checkout UI extension](/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`](/docs/api/checkout-ui-extensions/latest/apis/extensiontargets) target:

<video style="width: 100%; height: auto;" autoplay muted loop controls>
  <source src="/assets/apps/checkout/delivery-instructions.webm" type="video/webm">
  <source src="/assets/apps/checkout/delivery-instructions.mp4" type="video/mp4">
</video>




## Getting started

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

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/checkout/fields-banners/add-banner" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/quickstart"
     data-alt-src="/assets/resource-cards/quickstart-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a custom banner
    </h3>
    <p class="resource-card__description">Learn how to add a custom banner to checkout.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/fields-banners/add-field" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a custom checkout field
    </h3>
    <p class="resource-card__description">Learn how to add custom fields to checkout that customers can use to add delivery instructions to their order.</p>
  </a>
</div>

</div>


## Developer tools and resources

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



<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/extension-targets-overview" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/build"
     data-alt-src="/assets/resource-cards/build-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout UI extensions API reference
    </h3>
    <p class="resource-card__description">Consult the API reference for checkout UI targets and their respective types.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Components for checkout UI extensions
    </h3>
    <p class="resource-card__description">Learn about the components that are available in checkout UI extensions.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/configuration" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout extension configuration
    </h3>
    <p class="resource-card__description">Learn about the properties that you can configure in your checkout UI extension.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/fields-banners/ux-for-fields" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/heart"
     data-alt-src="/assets/resource-cards/heart-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      UX guidelines for custom fields
    </h3>
    <p class="resource-card__description">Explore UX guidelines that you can refer to when building custom fields.</p>
  </a>
</div>

</div>