Skip to main content
Upgrade to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.

Order status

The Order status page displays details for a single order, including line items, fulfillment progress, customer information, and payment status. Extensions on this page help customers get richer context for a specific order without leaving the page.

Anchor to Use casesUse cases

  • Order tracking widgets: Display real-time shipment tracking with carrier updates and estimated delivery dates directly on the Order status page.
  • Loyalty and rewards context: Show loyalty points earned from the order or progress toward a reward tier.
  • Custom line item details: Add product care instructions, warranty information, or personalization details beneath individual line items.
  • Post-purchase upsells: Surface relevant product recommendations or subscription offers based on the items in the order.
Order status page showing all available extension target locations with highlighted slots near line items, customer information, announcements, and blocks.

Anchor to Order status static targetsOrder status static targets

Use static targets to extend specific sections of the Order status page with contextual information.

Static targets render after specific page elements, including line items, the line item list, and the customer information section. The examples demonstrate using the Order API and the Order Status Localization API or fetching data from your app's backend.

Anchor to Cart line item (render after) ,[object Object]Cart line item (render after) target

customer-account.order-status.cart-line-item.render-after

Renders after each individual line item on the Order status page. Use this target to add product-specific information like care instructions, warranty details, or personalization summaries beneath each item.

Extensions at this target can access order data through the Order API and locale context through the Order Status Localization API. This target renders once per line item.

Support
Components (63)
APIs (28)

Supported components

Available APIs

Examples
import {useState, useEffect} from 'react';
import {
reactExtension,
InlineStack,
Badge,
Text,
useTarget,
useSessionToken,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.cart-line-item.render-after',
() => <Extension />,
);

function Extension() {
const {merchandise: {title}} = useTarget();
const {getSessionToken} = useSessionToken();
const [warranty, setWarranty] = useState(null);

useEffect(() => {
async function fetchWarranty() {
const token = await getSessionToken();
const res = await fetch(
`https://your-app.com/api/warranty?product=${encodeURIComponent(title)}`,
{headers: {Authorization: `Bearer ${token}`}},
);
const data = await res.json();
setWarranty(data);
}
fetchWarranty();
}, []);

if (!warranty) return null;

return (
<InlineStack spacing="small">
<Badge>{warranty.status}</Badge>
<Text appearance="subdued">
Warranty expires {warranty.expiresAt}
</Text>
</InlineStack>
);
}

Anchor to Cart line list (render after) ,[object Object]Cart line list (render after) target

customer-account.order-status.cart-line-list.render-after

Renders after the entire line item list on the Order status page. Use this target to display order-level summaries, cross-sell recommendations, or aggregate information that applies to all items.

Extensions at this target can access order data through the Order API and locale context through the Order Status Localization API.

Support
Components (63)
APIs (28)

Supported components

Available APIs

Examples
import {useState, useEffect} from 'react';
import {
reactExtension,
BlockStack,
InlineStack,
Text,
Link,
Heading,
useSessionToken,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.cart-line-list.render-after',
() => <Extension />,
);

function Extension() {
const {getSessionToken} = useSessionToken();
const [recommendations, setRecommendations] = useState(null);

useEffect(() => {
async function fetchRecommendations() {
const token = await getSessionToken();
const res = await fetch('https://your-app.com/api/recommendations', {
headers: {Authorization: `Bearer ${token}`},
});
const data = await res.json();
setRecommendations(data.products);
}
fetchRecommendations();
}, []);

if (!recommendations || recommendations.length === 0) return null;

return (
<BlockStack spacing="base">
<Heading>You might also like</Heading>
{recommendations.map((product) => (
<InlineStack key={product.id} spacing="base">
<Text emphasis="bold">{product.title}</Text>
<Link to={product.url}>View product</Link>
</InlineStack>
))}
</BlockStack>
);
}

Anchor to Customer information (render after) ,[object Object]Customer information (render after) target

customer-account.order-status.customer-information.render-after

Renders after the customer information section on the Order status page. Use this target to display additional customer context like account tier, contact preferences, or organization details.

Extensions at this target can access order data through the Order API and locale context through the Order Status Localization API.

Support
Components (63)
APIs (28)

Supported components

Available APIs

Examples
import {useState, useEffect} from 'react';
import {
reactExtension,
InlineStack,
Text,
Badge,
useSessionToken,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.customer-information.render-after',
() => <Extension />,
);

function Extension() {
const {getSessionToken} = useSessionToken();
const [tier, setTier] = useState(null);

useEffect(() => {
async function fetchTier() {
const token = await getSessionToken();
const res = await fetch('https://your-app.com/api/loyalty-tier', {
headers: {Authorization: `Bearer ${token}`},
});
const data = await res.json();
setTier(data.tier);
}
fetchTier();
}, []);

if (!tier) return null;

return (
<InlineStack spacing="small">
<Text appearance="subdued">Loyalty tier:</Text>
<Badge>{tier}</Badge>
</InlineStack>
);
}

Anchor to Order status announcement and block targetsOrder status announcement and block targets

Use static and block targets to extend the Order status page with announcements and custom block content.

Announcement targets render as dismissable banners at the top of the page, while block targets display as inline cards that merchants can position using the checkout and accounts editor. The examples demonstrate using the Order Status Localization API or fetching data from your app's backend.

Anchor to Order status announcement ,[object Object]Order status announcement target

customer-account.order-status.announcement.render

Renders a dismissable announcement at the top of the Order status page. Use this target to surface time-sensitive information like delivery updates, delays, or order-specific promotions.

Extensions at this target can access order data through the Order API and locale context through the Order Status Localization API. The root element should be a Banner component.

Support
Components (63)
APIs (28)

Supported components

Available APIs

Examples
import {
reactExtension,
Banner,
Text,
useOrder,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.announcement.render',
() => <Extension />,
);

function Extension() {
const order = useOrder();

return (
<Banner>
<Text>
{order
? `There's a shipping delay on ${order.name}. We'll update you when it ships.`
: "There's a shipping delay on your order. We'll update you when it ships."}
</Text>
</Banner>
);
}

Anchor to Order status block ,[object Object]Order status block target

customer-account.order-status.block.render

Renders inline content on the Order status page. Use this target to display persistent information like tracking widgets, estimated delivery dates, or order-specific recommendations.

Extensions at this target appear as blocks that merchants can position using the checkout and accounts editor. To preview your extension in each supported location, use the placement reference for that location as a URL parameter.

Support
Components (63)
APIs (28)

Supported components

Available APIs

Examples
import {useState, useEffect} from 'react';
import {
reactExtension,
BlockStack,
InlineStack,
Text,
Badge,
Link,
Heading,
Spinner,
useSessionToken,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.block.render',
() => <Extension />,
);

function Extension() {
const {getSessionToken} = useSessionToken();
const [tracking, setTracking] = useState(null);

useEffect(() => {
async function fetchTracking() {
const token = await getSessionToken();
const res = await fetch('https://your-app.com/api/tracking', {
headers: {Authorization: `Bearer ${token}`},
});
const data = await res.json();
setTracking(data);
}
fetchTracking();
}, []);

if (!tracking) {
return (
<BlockStack spacing="base">
<Heading>Shipment tracking</Heading>
<Spinner size="base" />
</BlockStack>
);
}

return (
<BlockStack spacing="base">
<Heading>Shipment tracking</Heading>
<InlineStack spacing="small">
<Text emphasis="bold">{tracking.carrier}</Text>
<Badge>{tracking.status}</Badge>
</InlineStack>
<Text appearance="subdued">
Estimated delivery: {tracking.estimatedDelivery}
</Text>
<Link to={tracking.trackingUrl}>
Track on {tracking.carrier}
</Link>
</BlockStack>
);
}

Anchor to Best practicesBest practices

  • Guard against missing order data: Always check that useOrder returns a value before rendering order-specific content. The order data loads asynchronously and might be undefined on the initial render.
  • Return null for empty states: If your extension has no data to display, such as missing warranty or tracking information, return null to avoid rendering an empty container on the page.
  • Keep announcements order-specific: Unlike order index announcements, order status announcements should relate to the specific order being viewed. Include the order name or relevant order details in the message.

Anchor to LimitationsLimitations

  • Cart line item target renders per item: The customer-account.order-status.cart-line-item.render-after target renders once per line item, not once per order. Ensure your extension handles this correctly and doesn't make redundant API calls for each item.
Was this page helpful?