Skip to main content

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, not once per order. Avoid making API calls in your extension's root — they'll fire for every line item. Fetch data outside the render function or memoize results.

Support
Components (60)
APIs (29)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

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

function Extension() {
const {merchandise: {title}} = shopify.target.value;
const [warranty, setWarranty] = useState(null);

useEffect(() => {
async function fetchWarranty() {
const token = await shopify.sessionToken.get();
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 (
<s-stack direction="inline" gap="small-200">
<s-badge>{warranty.status}</s-badge>
<s-text color="subdued">
Warranty expires {warranty.expiresAt}
</s-text>
</s-stack>
);
}

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 (60)
APIs (29)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

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

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

useEffect(() => {
async function fetchRecommendations() {
const token = await shopify.sessionToken.get();
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 (
<s-section heading="You might also like">
<s-stack direction="block" gap="base">
{recommendations.map((product) => (
<s-stack key={product.id} direction="inline" gap="base">
<s-text type="strong">{product.title}</s-text>
<s-link href={product.url}>View product</s-link>
</s-stack>
))}
</s-stack>
</s-section>
);
}

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 (60)
APIs (29)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

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

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

useEffect(() => {
async function fetchTier() {
const token = await shopify.sessionToken.get();
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 (
<s-stack direction="inline" gap="small-200">
<s-text color="subdued">Loyalty tier:</s-text>
<s-badge>{tier}</s-badge>
</s-stack>
);
}

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 an announcement component.

Support
Components (60)
APIs (29)

Supported components

Available APIs

Examples

jsx

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

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

function Extension() {
const order = shopify.order.value;

return (
<s-announcement>
<s-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.'}
</s-text>
</s-announcement>
);
}

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 (60)
APIs (29)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';

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

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

useEffect(() => {
async function fetchTracking() {
const token = await shopify.sessionToken.get();
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 (
<s-section heading="Shipment tracking">
<s-spinner size="base" />
</s-section>
);
}

return (
<s-section heading="Shipment tracking">
<s-stack direction="block" gap="base">
<s-stack direction="inline" gap="small-200">
<s-text type="strong">{tracking.carrier}</s-text>
<s-badge>{tracking.status}</s-badge>
</s-stack>
<s-text color="subdued">
Estimated delivery: {tracking.estimatedDelivery}
</s-text>
<s-link href={tracking.trackingUrl}>
Track on {tracking.carrier}
</s-link>
</s-stack>
</s-section>
);
}

Anchor to Best practicesBest practices

  • Guard against missing order data: Always check that shopify.order.value is defined 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.
Was this page helpful?