Choose a version:

Draft Order API

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

Anchor to Use casesUse cases

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

Support

Targets (3)

Supported targets

Anchor to PropertiesProperties

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

Anchor to id id number required: The unique identifier for the draft order. Use for draft order lookups, implementing order-specific functionality, and integrating with external systems.
Anchor to name name string required: The name of the draft order as configured by the merchant. Use for draft order identification, displays, and customer-facing interfaces.
Anchor to customerId customerId number: The unique identifier of the customer associated with the draft 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='Draft Order Details Action'>

<s-scroll-box>

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

</s-scroll-box>

</s-page>

);

};

Examples

Description

Access the unique identifier of the current draft order in a draft order detail context. This example shows how to use `shopify.draftOrder.id` to retrieve the draft order ID. This can be used for fetching additional order data, implementing custom workflows, or building draft order-specific features.

jsx

import {render} from 'preact';

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

const Extension = () => {
  return (
    <s-page heading='Draft Order Details Action'>
      <s-scroll-box>
        <s-text>Order ID: {shopify.draftOrder.id}</s-text>
      </s-scroll-box>
    </s-page>
  );
};

Description

Access multiple properties from the draft order object including name, ID, and customer information. This example demonstrates using `shopify.draftOrder` to retrieve comprehensive draft order details. This enables building contextual interfaces and implementing order-specific workflows.

jsx

import {render} from 'preact';

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

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

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

Anchor to Best practicesBest practices

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

Anchor to LimitationsLimitations

Draft 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?