---
title: Note API
description: >-
  The Note API provides read-only access to the optional text note that the
  customer left during checkout. Use this API to display delivery instructions,
  special requests, or other freeform messages the customer included with their
  order.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/note-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/note-api.md
---

# Note API

The Note API provides read-only access to the optional text note that the customer left during checkout. Use this API to display delivery instructions, special requests, or other freeform messages the customer included with their order.

### Use cases

* **Display delivery instructions**: Show the customer's note containing special delivery instructions, such as "Ring the doorbell twice."
* **Show special requests**: Display any special requests the customer included with their order.
* **Conditional rendering**: Check whether a note exists and conditionally render a section in your extension.

### Support Targets (10)

### Supported targets

* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)

### Properties

The [`shopify` global object](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#target-apis-define-what-your-extension-does) provides the note that the customer left during checkout. Access the following properties on `shopify` to read the customer's note.

* **note**

  **SubscribableSignalLike\<string | undefined>**

  **required**

  A note left by the customer to the merchant, either in their cart or during checkout. The value is `undefined` if no note was provided.

### SubscribableSignalLike

Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern. This interface extends \`ReadonlySignalLike\` with deprecated fields that are still supported for backwards compatibility.

* current

  The current value of the signal. Equivalent to \`.value\`, accessing this property subscribes to changes when used in a reactive context.

  ```ts
  T
  ```

* destroy

  Cleans up the subscription and releases any resources held by this signal. After calling \`destroy()\`, the signal stops receiving updates from the main thread.

  ```ts
  () => Promise<void>
  ```

* subscribe

  Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.

  ```ts
  (fn: (value: T) => void) => () => void
  ```

* value

  The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.

  ```ts
  T
  ```

Examples

### Examples

* ####

  ##### Description

  Show the note that the customer left for the merchant during checkout. This example reads \`shopify.note\` and displays the text, with a fallback message when no note is present.

  ##### jsx

  ```jsx
  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  function Extension() {
    const note = shopify.note.value;

    return (
      <s-box>
        <s-text type="strong">Order note</s-text>
        <s-text>
          {note || 'No note provided'}
        </s-text>
      </s-box>
    );
  }
  ```

* ####

  ##### Description

  Only render a note section when the customer left a note on the order. This example checks whether \`shopify.note\` is defined and returns \`null\` when no note exists, avoiding empty UI.

  ##### jsx

  ```jsx
  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  function Extension() {
    const note = shopify.note.value;

    if (!note) {
      return null;
    }

    return (
      <s-box>
        <s-text type="strong">Order note</s-text>
        <s-text>{note}</s-text>
      </s-box>
    );
  }
  ```

* ####

  ##### Description

  Show the order note in a styled banner component for visual emphasis. This example reads \`shopify.note\` and wraps the text in an \`s-banner\` with an informational status.

  ##### jsx

  ```jsx
  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  function Extension() {
    const note = shopify.note.value;

    if (!note) {
      return null;
    }

    return (
      <s-banner tone="info">
        <s-text type="strong">
          Note from buyer
        </s-text>
        <s-text>{note}</s-text>
      </s-banner>
    );
  }
  ```

***

## Limitations

* Only a single note is supported per order. There's no way to retrieve multiple notes or a note history.

***