Choose a version:

Order API

The Order API provides read-only access to order data. Use this API to get order information and build contextual experiences based on the selected order context. The API offers order details for implementing order-specific functionality and workflows.

Anchor to Use casesUse cases

Order access: Access the order identifier to implement order-specific functionality.
Order display: Build extensions showing order information or management tools.
Contextual UI: Create interfaces that adapt based on the current order context.
External integrations: Link order data with external systems or order management platforms.

Support

Targets (12)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides access to order data for the active context. Access the following properties on shopify to get order information including the order identifier, name, and associated customer.

Anchor to id id number required: The unique identifier for the order. Use for order lookups, implementing order-specific functionality, and integrating with external systems.
Anchor to name name string required: The name of the order as configured by the merchant. Use for order identification, displays, and customer-facing interfaces.
Anchor to customerId customerId number: The unique identifier of the customer associated with the order. Returns undefined if no customer is associated. Use for customer-specific functionality and personalized experiences.

Examples

jsx

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

const Extension = () => {

return (

<s-page heading="Order Api">

<s-scroll-box>

<s-text>Order ID: {shopify.order.id}</s-text>

</s-scroll-box>

</s-page>

);

};

Examples

Description
Access the unique identifier of the current order in an order detail action context. This example shows how to use `shopify.order.id` to retrieve the order ID. This can be used for fetching additional order data, tracking, or implementing order-specific functionality and post-purchase workflows.
jsx
```
import {render} from 'preact';

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

const Extension = () => {
  return (
    <s-page heading="Order Api">
      <s-scroll-box>
        <s-text>Order ID: {shopify.order.id}</s-text>
      </s-scroll-box>
    </s-page>
  );
};
```

Description

Access multiple order properties including the order name and customer ID. This example demonstrates accessing `shopify.order.id`, `shopify.order.name`, and `shopify.order.customerId` to display comprehensive order information. Use this pattern for order management workflows and customer service features.

jsx

import {render} from 'preact';

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

const Extension = () => {
  const {id, name, customerId} = shopify.order;

  return (
    <s-page heading="Order Details">
      <s-scroll-box>
        <s-stack direction="block">
          <s-text>Order ID: {id}</s-text>
          <s-text>Order Name: {name}</s-text>
          {customerId ? (
            <s-text>Customer ID: {customerId}</s-text>
          ) : (
            <s-text>No customer associated with this order</s-text>
          )}
        </s-stack>
      </s-scroll-box>
    </s-page>
  );
};

Anchor to Best practicesBest practices

Use order ID for data lookups: Use the order ID to fetch additional order information from external systems, order management platforms, or Shopify APIs when building comprehensive order experiences.
Implement order-specific features: Use the order context to enable specialized functionality like order fulfillment, customer communication, or order modification workflows.
Validate order access: Verify that the order ID is valid before performing order-specific operations or external API calls.

Anchor to LimitationsLimitations

Order data reflects the current POS session and may not include real-time updates from other channels until the session is refreshed.

Was this page helpful?