Choose a version:

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.

Anchor to Use casesUse 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

Anchor to PropertiesProperties

The shopify global object provides the note that the customer left during checkout. Access the following properties on shopify to read the customer's note.

Anchor to note note <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.
```
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.
```
() => 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.
```
(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.
```
T
```

Examples

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>

);

}

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

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

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

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>
  );
}

Anchor to LimitationsLimitations

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

Was this page helpful?