> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Notes block
> The Aftersell Cart Notes block: a collapsible order-notes field that saves shopper instructions to the cart and order.
> The **Notes** block is a collapsible field where shoppers can add order notes or special instructions (gift messages, delivery instructions, and so on) without leaving the cart. The note is saved to the cart and carried through to the order.
## Behavior
* The field is a **collapsible disclosure**, collapsed by default. Collapsing is visual only — a saved note still applies. When collapsed with a note saved, a check mark shows so the shopper knows their note is stored.
* The note **saves when the shopper clicks away** (on blur), with saving / saved / error status feedback.
* If the cart note changes elsewhere — the `/cart` page or another tab — the field syncs to it, unless the shopper has already started typing, so their in-progress note is never overwritten.
## Settings
| Setting | What it controls | Default |
| --------------- | ------------------------------------------- | ------------------------------------- |
| **Title** | The field's label. Rich text, translatable. | `Order notes` |
| **Placeholder** | The input's placeholder text. Translatable. | `Special instructions for your order` |
## Placement and limits
* **Region:** body or bottom.
* **Maximum:** 1 per cart state.
* **State:** filled cart only.
* Not added by default. Not locked — you can remove or hide it.
## Custom template
Supports a [custom template](/aftersell/cart/custom-templates) from its Code tab, which replaces this block's built-in markup with your JSX. These are the props it receives.
| Prop | Type | What it's for |
| --------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| `titleHtml` | `string` | Sanitized rich-text title HTML. Empty when the merchant left the title blank. |
| `titleText` | `string` | Plain-text title. Use it for the textarea's `aria-label`, and as the heading when there's no rich text. |
| `hasTitle` | `boolean` | Whether either title form is present. Gates the heading and the toggle's `aria-label`. |
| `placeholder` | `string` | Placeholder shown in the empty note field. |
| `noteInput` | `string` | Current note text. |
| `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Save lifecycle. Drives the spoken status live region. |
| `statusLabel` | `string` | Resolved live-region announcement for `status`. Empty when idle. |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Status for the icon. Like `status`, except a collapsed note with text reads as `saved`. |
| `isExpanded` | `boolean` | Whether the note field is expanded. Collapsing is visual only; the note always persists. |
| `onNoteChange` | `(value: string) => void` | Updates the note text. Call with the new value, for example from the textarea's `onInput`. |
| `onNoteBlur` | `(event: unknown) => void` | Saves the note. Attach directly to the textarea's `onBlur`; it reads the value off the event. |
| `onToggle` | `() => void` | Toggles the expand and collapse state. |
**The note saves on `onNoteBlur`, not on every keystroke.** Wire both `onNoteChange` and `onNoteBlur`, or notes silently never persist. Keep the status text in a live region so screen readers announce saving and saved.
## Design
Style this block with its **Design** section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.
### Text
The **Text** section in Design lets you control the typography of two elements. Use the **Text element** picker to switch between them.
**Title** — the section heading above the note field. Bold is set in the Rich Text Editor above (in the Settings tab). Text color is set in the Toggle section of Design.
| Setting | What it controls | Default |
| ------------------ | ---------------------------- | ------- |
| **Size** | Font size. | `14px` |
| **Line height** | Line height multiplier. | `1.4` |
| **Letter spacing** | Tracking between characters. | Normal |
**Note field** — the text inside the textarea where shoppers type their note.
| Setting | What it controls | Default |
| ------------------ | -------------------------------------------------------- | ----------------------------- |
| **Text color** | Color of the note text. | Inherits from cart text color |
| **Size** | Font size. | `14px` |
| **Weight** | Font weight — Light, Regular, Medium, Semibold, or Bold. | Regular (400) |
| **Line height** | Line height multiplier. | `1.5` |
| **Letter spacing** | Tracking between characters. | Normal |
What are design settings? Learn more here: [Design settings](/aftersell/cart/design-settings).