---
title: Order status
description: >-
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 track shipments, view order context, or
access additional order-level information.
api_version: 2026-04
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/order-status
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/order-status.md
---
# Order status
The Order status page displays details for a single order, including line items, [fulfillment progress](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/fulfillment-status), customer information, and [payment status](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/payments-and-returns). Extensions on this page help customers get richer context for a specific order without leaving the page.
### Use 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 static targets
Use [static targets](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#building-your-extension) 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and the [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-status-localization-api) or fetching data from your [app's backend](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#app-authentication).
### 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and locale context through the [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/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 (62) APIs (29)
### Supported components
* [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation)
* [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement)
* [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip)
* [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item)
* [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox)
* [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field)
* [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action)
* [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker)
* [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details)
* [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image)
* [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group)
* [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link)
* [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map)
* [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu)
* [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal)
* [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list)
* [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page)
* [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field)
* [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon)
* [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field)
* [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover)
* [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button)
* [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail)
* [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress)
* [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code)
* [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container)
* [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box)
* [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select)
* [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet)
* [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph)
* [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch)
* [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field)
* [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time)
* [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip)
* [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list)
* [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field)
### Available APIs
* [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api)
* [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api)
* [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api)
* [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api)
* [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api)
* [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api)
* [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api)
* [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api)
* [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api)
* [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api)
* [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api)
* [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api)
* [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api)
* [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api)
* [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api)
* [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api)
* [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api)
* [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api)
* [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api)
* [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api)
* [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api)
* [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api)
* [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api)
* [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api)
* [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api)
* [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api)
* [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api)
* [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api)
* [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api)
Examples
### Examples
* ####
##### Description
Show warranty details beneath each line item on the Order status page. This example reads the line item's product title from \`shopify.target.value\` and fetches warranty data from your app's backend.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, 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 (
{warranty.status}
Warranty expires {warranty.expiresAt}
);
}
```
* ####
##### Description
Display care instructions beneath a line item based on the product title. This example reads the line item from \`shopify.target.value\` and uses \`shopify.i18n.translate\` to render localized care text.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default async () => {
render(, document.body);
};
function Extension() {
const {merchandise: {title}} = shopify.target.value;
const translate = shopify.i18n.translate;
return (
{title}
{translate('care.instructions')}
);
}
```
### 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and locale context through the [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-status-localization-api).
### Support Components (62) APIs (29)
### Supported components
* [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation)
* [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement)
* [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip)
* [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item)
* [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox)
* [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field)
* [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action)
* [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker)
* [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details)
* [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image)
* [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group)
* [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link)
* [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map)
* [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu)
* [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal)
* [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list)
* [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page)
* [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field)
* [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon)
* [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field)
* [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover)
* [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button)
* [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail)
* [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress)
* [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code)
* [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container)
* [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box)
* [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select)
* [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet)
* [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph)
* [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch)
* [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field)
* [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time)
* [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip)
* [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list)
* [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field)
### Available APIs
* [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api)
* [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api)
* [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api)
* [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api)
* [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api)
* [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api)
* [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api)
* [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api)
* [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api)
* [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api)
* [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api)
* [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api)
* [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api)
* [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api)
* [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api)
* [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api)
* [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api)
* [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api)
* [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api)
* [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api)
* [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api)
* [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api)
* [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api)
* [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api)
* [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api)
* [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api)
* [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api)
* [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api)
* [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api)
Examples
### Examples
* ####
##### Description
Display product recommendations below the order's line items. This example fetches related products from your app's backend and renders them as a list with links.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, 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 (
{recommendations.map((product) => (
{product.title}
View product
))}
);
}
```
* ####
##### Description
Display the total loyalty points earned from the order below the line item list. This example fetches points data from your app's backend using the session token.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, document.body);
};
function Extension() {
const [points, setPoints] = useState(null);
useEffect(() => {
async function fetchPoints() {
const token = await shopify.sessionToken.get();
const res = await fetch('https://your-app.com/api/order-points', {
headers: {Authorization: `Bearer ${token}`},
});
const data = await res.json();
setPoints(data.pointsEarned);
}
fetchPoints();
}, []);
if (!points) return null;
return (
{points} points earned
View your rewards
);
}
```
### 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and locale context through the [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-status-localization-api).
### Support Components (62) APIs (29)
### Supported components
* [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation)
* [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement)
* [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip)
* [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item)
* [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox)
* [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field)
* [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action)
* [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker)
* [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details)
* [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image)
* [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group)
* [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link)
* [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map)
* [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu)
* [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal)
* [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list)
* [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page)
* [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field)
* [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon)
* [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field)
* [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover)
* [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button)
* [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail)
* [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress)
* [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code)
* [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container)
* [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box)
* [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select)
* [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet)
* [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph)
* [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch)
* [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field)
* [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time)
* [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip)
* [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list)
* [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field)
### Available APIs
* [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api)
* [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api)
* [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api)
* [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api)
* [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api)
* [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api)
* [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api)
* [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api)
* [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api)
* [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api)
* [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api)
* [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api)
* [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api)
* [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api)
* [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api)
* [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api)
* [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api)
* [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api)
* [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api)
* [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api)
* [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api)
* [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api)
* [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api)
* [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api)
* [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api)
* [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api)
* [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api)
* [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api)
* [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api)
Examples
### Examples
* ####
##### Description
Show the customer's loyalty tier after the customer information section. This example fetches the tier from your app's backend and renders it as a badge.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, 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 (
Loyalty tier:
{tier}
);
}
```
* ####
##### Description
Display the order confirmation number after the customer information section. This example reads \`shopify.order\` to show the confirmation number when available.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default async () => {
render(, document.body);
};
function Extension() {
const order = shopify.order.value;
if (!order?.confirmationNumber) return null;
return (
Confirmation number:
{order.confirmationNumber}
);
}
```
***
## Order status announcement and block targets
Use [static and block targets](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#building-your-extension) 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](https://help.shopify.com/manual/checkout-settings/customize-checkout-configurations/checkout-editor). The examples demonstrate using the [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-status-localization-api) or fetching data from your [app's backend](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#app-authentication).
### 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and locale context through the [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-status-localization-api). The root element should be an [announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/announcement) component.
### Support Components (62) APIs (29)
### Supported components
* [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation)
* [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement)
* [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip)
* [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item)
* [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox)
* [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field)
* [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action)
* [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker)
* [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details)
* [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image)
* [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group)
* [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link)
* [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map)
* [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu)
* [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal)
* [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list)
* [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page)
* [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field)
* [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon)
* [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field)
* [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover)
* [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button)
* [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail)
* [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress)
* [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code)
* [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container)
* [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box)
* [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select)
* [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet)
* [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph)
* [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch)
* [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field)
* [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time)
* [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip)
* [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list)
* [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field)
### Available APIs
* [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api)
* [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api)
* [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api)
* [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api)
* [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api)
* [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api)
* [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api)
* [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api)
* [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api)
* [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api)
* [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api)
* [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api)
* [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api)
* [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api)
* [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api)
* [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api)
* [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api)
* [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api)
* [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api)
* [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api)
* [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api)
* [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api)
* [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api)
* [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api)
* [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api)
* [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api)
* [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api)
* [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api)
* [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api)
Examples
### Examples
* ####
##### Description
Display a dismissable announcement about a shipping delay for the current order. This example reads from \`shopify.order\` to include the order name in the message.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default async () => {
render(, document.body);
};
function Extension() {
const order = shopify.order.value;
return (
{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.'}
);
}
```
* ####
##### Description
Display a localized confirmation announcement on the Order status page. This example uses \`shopify.i18n.translate\` to render the message in the customer's language.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default async () => {
render(, document.body);
};
function Extension() {
const translate = shopify.i18n.translate;
return (
{translate('orderStatus.confirmation')}
{translate('orderStatus.viewAllOrders')}
);
}
```
* ####
##### Description
Display a shipping policy announcement based on the buyer's country. This example reads \`shopify.localization.country\` from the \[Order Status Localization API]\(/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-status-localization-api) and shows relevant shipping information for the buyer's region.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default async () => {
render(, document.body);
};
function Extension() {
const country = shopify.localization.country.value;
if (!country) return null;
const isDomestic = country.isoCode === 'US';
const translate = shopify.i18n.translate;
return (
{isDomestic
? translate('shipping.domestic')
: translate('shipping.international', {country: country.isoCode})}
{translate('shipping.viewOrders')}
);
}
```
### 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](https://help.shopify.com/manual/checkout-settings/customize-checkout-configurations/checkout-editor). To preview your extension in each supported location, use the placement reference for that location as a URL parameter.
### Support Components (62) APIs (29)
### Supported components
* [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation)
* [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement)
* [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip)
* [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item)
* [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox)
* [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field)
* [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action)
* [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker)
* [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details)
* [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image)
* [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group)
* [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link)
* [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map)
* [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu)
* [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal)
* [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list)
* [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page)
* [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field)
* [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon)
* [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field)
* [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover)
* [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button)
* [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail)
* [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress)
* [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code)
* [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container)
* [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box)
* [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select)
* [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet)
* [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph)
* [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch)
* [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field)
* [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time)
* [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip)
* [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list)
* [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field)
### Available APIs
* [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api)
* [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api)
* [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api)
* [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api)
* [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api)
* [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api)
* [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api)
* [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api)
* [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api)
* [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api)
* [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api)
* [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api)
* [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api)
* [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api)
* [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api)
* [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api)
* [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api)
* [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api)
* [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api)
* [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api)
* [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api)
* [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api)
* [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api)
* [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api)
* [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api)
* [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api)
* [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api)
* [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api)
* [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api)
Examples
### Examples
* ####
##### Description
Show real-time tracking information for the order as an inline block. This example fetches tracking data from your app's backend and displays the current status with a link to the carrier's tracking page.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, 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 (
);
}
return (
{tracking.carrier}
{tracking.status}
Estimated delivery: {tracking.estimatedDelivery}
Track on {tracking.carrier}
);
}
```
* ####
##### Description
Display an estimated delivery date block on the Order status page. This example fetches delivery estimates from your app's backend and shows the date range.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
export default async () => {
render(, document.body);
};
function Extension() {
const [estimate, setEstimate] = useState(null);
useEffect(() => {
async function fetchEstimate() {
const token = await shopify.sessionToken.get();
const res = await fetch('https://your-app.com/api/delivery-estimate', {
headers: {Authorization: `Bearer ${token}`},
});
const data = await res.json();
setEstimate(data);
}
fetchEstimate();
}, []);
if (!estimate) return null;
return (
{estimate.earliestDate} – {estimate.latestDate}
{estimate.message}
);
}
```
***
## Best practices
* **Guard against missing order data**: Always check that [`shopify.order.value`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) 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.
***