--- title: Fulfillment status description: >- Fulfillment status extensions render inside the delivery status cards on the Order status page. Use them to display tracking notices, delivery instructions, or contextual information alongside fulfillment details. api_version: 2026-04 source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/fulfillment-status md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/fulfillment-status.md --- # Fulfillment status Fulfillment status extensions render inside the delivery status cards on the Order status page. These cards appear alongside Shopify's native fulfillment UI so customers see your extension content in direct context with their shipment details. ### Use cases * **Tracking notices:** Display courier-specific information or tracking update delays for fulfilled shipments. * **Delivery instructions:** Provide delivery preferences or special handling notes tied to a specific fulfillment. * **Processing updates:** Show estimated processing times or preparation status for items that haven't shipped yet. * **Custom fulfillment details:** Display supplementary fulfillment information from your app, such as warranty activation or installation scheduling. * **Order-specific messaging:** Surface contextual messages related to the delivery or preparation of items in the order. ![Order status page fulfillment section showing available extension target locations with highlighted slots near shipment and pending item details.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/fulfillment-status-hero-img-BhLm_jnA.png) *** ## Fulfillment status targets Fulfillment status targets render inside the delivery status cards on the Order status page. They're useful for adding contextual information about the delivery or preparation of order items. ### Fulfillment details (render after) target `customer-account.order-status.fulfillment-details.render-after` Renders after the fulfillment details in the delivery status card on the Order status page. A separate instance of this extension is rendered for each fulfillment. Use this target to display tracking notices, delivery instructions, or supplementary shipment information for a specific fulfillment. This target provides `shopify.fulfillmentId` to identify the current fulfillment, and also gives you access to the [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and the [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/cart-lines-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 a banner in the delivery status card informing customers about tracking update timing. This example reads order data from \`shopify.order\` to include the order name for context. ##### 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) { return null; } return ( Tracking updates for order {order.name} may take 24–48 hours to appear after shipment. ); } ``` * #### ##### Description Display delivery instructions specific to a fulfillment. This example uses \`shopify.fulfillmentId\` to reference the current fulfillment and provides contextual delivery information. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function Extension() { const order = shopify.order.value; const fulfillmentId = shopify.fulfillmentId; if (!order) { return null; } return ( Delivery instructions If you're not home, your package will be left at the door. Contact our team with fulfillment reference {fulfillmentId} for assistance. Order {order.name} ); } ``` ### Unfulfilled items (render after) target `customer-account.order-status.unfulfilled-items.render-after` Renders after the unfulfilled items in the delivery status card on the Order status page. A single instance of this extension is rendered for all unfulfilled items in the order. Use this target to display information about items that haven't been shipped yet, such as processing updates or estimated preparation times. This target gives you access to the [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and the [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/cart-lines-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 a banner informing customers that their items are being prepared for shipment. This example reads order data from \`shopify.order\` to include the order name for context. ##### 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) { return null; } return ( Items from order {order.name} are being prepared. You'll receive tracking details once they ship. ); } ``` * #### ##### Description Show a processing notice alongside order line items. This example reads line items from \`shopify.lines\` and order data from \`shopify.order\` to display contextual information about unfulfilled items. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function Extension() { const order = shopify.order.value; const lines = shopify.lines.value; if (!order) { return null; } return ( Items from order {order.name} typically take 1–3 business days to prepare for shipment. {lines.map((line) => ( {line.merchandise.title} Qty: {line.quantity} ))} ); } ``` *** ## Best practices * **Keep content contextual:** Fulfillment status extensions render inside delivery status cards, so content should be directly relevant to the fulfillment or unfulfilled items being displayed. * **Guard against missing 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 may be `undefined` on the initial render. * **Avoid heavy rendering:** These targets render inline within the Order status page. Avoid complex layouts or large data fetches that could cause layout shifts. Use [banner](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/banner) or lightweight [stack](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/layout-and-structure/stack) layouts for the best experience. ***