---
title: Attributes
description: The API for interacting with cart and checkout attributes.
api_version: 2025-10
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/apis/order-status-api/attributes
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/apis/order-status-api/attributes.md
---

# Attributes

The API for interacting with cart and checkout attributes.

## OrderStatusApi

The API object provided to this and other `customer-account.order-status` extension targets.

* attributes

  SubscribableSignalLike\<Attribute\[] | undefined>

  required

  Custom attributes left by the customer to the merchant, either in their cart or during checkout.

### SubscribableSignalLike

Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with \[Preact's ReadonlySignal]\(https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709). Some fields are deprecated but still supported for backwards compatibility. In version 2025-10, \[\`StatefulRemoteSubscribable\`]\(https://github.com/Shopify/remote-dom/blob/03929aa8418a89d41d294005f219837582718df8/packages/async-subscription/src/types.ts#L17) was replaced with \`ReadonlySignalLike\`. Checkout will remove the old fields some time in the future.

* current

  ```ts
  T
  ```

* destroy

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

* subscribe

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

* value

  ```ts
  T
  ```

```ts
export interface SubscribableSignalLike<T> extends ReadonlySignalLike<T> {
  /**
   * @deprecated Use `.value` instead.
   */
  readonly current: T;
  /**
   * @deprecated No longer needed. Use Preact Signal management instead.
   */
  destroy(): Promise<void>;
}
```

### Attribute

* key

  The key for the attribute.

  ```ts
  string
  ```

* value

  The value for the attribute.

  ```ts
  string
  ```

```ts
export interface Attribute {
  /**
   * The key for the attribute.
   */
  key: string;

  /**
   * The value for the attribute.
   */
  value: string;
}
```

Examples

### Examples

* #### Extension.jsx

  ##### Default

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

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

  function Extension() {
    const buyerSelectedFreeTShirt =
      shopify.attributes.value
        ?.buyerSelectedFreeTShirt || false;
    const tshirtSize =
      shopify.attributes.value?.tshirtSize || '';

    if (Boolean(buyerSelectedFreeTShirt) === true) {
      return (
        <s-text>
          You selected a free t-shirt, size:{' '}
          {tshirtSize}
        </s-text>
      );
    }

    return null;
  }
  ```