Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

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

Requires access to protected customer data for some properties.

A static extension target that renders below the order details section of the Order Status page.

Caution

Use the @shopify/ui-extensions/customer-account or @shopify/ui-extensions-react/customer-account surfaces when targeting order status targets. Importing from the checkout surface is deprecated as of version 2023-10.

Support
Components (63)
APIs (28)

The API object provided to this and other customer-account.order-status extension targets.

Anchor to appliedGiftCards
appliedGiftCards
StatefulRemoteSubscribable<[]>
required

Gift cards that have been applied to the order. Each entry includes the amount used and the remaining balance.

Anchor to appMetafields
appMetafields
StatefulRemoteSubscribable<[]>
required

The metafields requested in the shopify.extension.toml file. These metafields are updated when there’s a change in the merchandise items being purchased by the customer.

Requires access to protected customer data.

Anchor to attributes
attributes
StatefulRemoteSubscribable<[] | undefined>
required

Custom key-value pairs that the buyer attached to the order during cart or checkout, commonly used for special instructions or order customization.

Anchor to authenticationState
authenticationState
StatefulRemoteSubscribable<>
required

The buyer's current authentication state on the Order status page. The value is either 'fully_authenticated' (the buyer is logged in) or 'pre_authenticated' (the buyer is viewing through a tokenized link).

Anchor to checkoutSettings
checkoutSettings
StatefulRemoteSubscribable<>
required

The merchant's checkout configuration that was active when the buyer placed the order, including the order type, payment terms, and shipping address settings.

Anchor to checkoutToken
checkoutToken
StatefulRemoteSubscribable< | undefined>
required

The token that represents the checkout session used to create this order.

Matches the token field in the WebPixel checkout payload and the checkout_token field in the Admin REST API Order resource.

required

The cost breakdown for the order, including subtotal, shipping, tax, and total amounts.

Anchor to discountAllocations
discountAllocations
StatefulRemoteSubscribable<[]>
required

The order-level discount allocations, including code-based, automatic, and custom discounts. Each allocation includes the discounted amount and the discount source.

Anchor to discountCodes
discountCodes
StatefulRemoteSubscribable<[]>
required

The discount codes that the buyer applied to the order at checkout.

Anchor to extension
extension
<Target>
required

Information about the running extension, including its editor context, extension point, script URL, and localization settings.

Anchor to lines
lines
StatefulRemoteSubscribable<[]>
required

The line items in the order, including product details, quantities, costs, and any applied discounts.

Anchor to localization
localization
required

Details about the buyer's location, language, and currency on the Order status page. For utilities to format and translate content based on these details, use the i18n object from the Localization API instead.

Anchor to metafields
metafields
StatefulRemoteSubscribable<[]>
required

The metafields that apply to the current order. These metafields are shared by all extensions running on the Order status page and persist for the duration of the buyer's session.

Once the order is created, you can query these metafields using the GraphQL Admin API.

StatefulRemoteSubscribable<string | undefined>
required

A free-form text note that the buyer left for the merchant during cart or checkout, commonly used for special delivery instructions or order requests.

Anchor to order
order
StatefulRemoteSubscribable< | undefined>
required

Information about the placed order, including its ID, display name, confirmation number, and timestamps.

Anchor to requireLogin
requireLogin
() => Promise<void>
required

Triggers a login prompt if the buyer is viewing a pre-authenticated Order status page. Returns a promise that resolves when the login prompt is dismissed or completed.

required

The shop where the order was placed, including its name, ID, storefront URL, and myshopify.com domain.

Anchor to version
version
required

The API version being used for the extension.

Anchor to billingAddress
billingAddress
StatefulRemoteSubscribable< | undefined>

The billing address associated with the buyer's payment method.

Anchor to buyerIdentity
buyerIdentity

Information about the buyer who placed the order, including their customer account, email, phone, and B2B company details.

Anchor to shippingAddress
shippingAddress
StatefulRemoteSubscribable< | undefined>

The shipping address that the buyer provided for the order.

Anchor to extensionPoint
extensionPoint
Target
required

The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.

Deprecated

Deprecated as of version 2023-07, use extension.target instead.

The base API object provided to this and other customer-account extension targets.

Anchor to analytics
analytics
required

Methods for interacting with web pixels, such as publishing analytics events.

Note

Requires a connected third-party domain for your customer account pages.

Anchor to applyTrackingConsentChange
applyTrackingConsentChange
required

Applies changes to the buyer's tracking consent preferences and consent metafields.

Note

Requires the customer_privacy capability to be set to true.

Requires access to protected customer data.

Anchor to authenticatedAccount
authenticatedAccount
required

The authenticated customer's account information, including their customer ID and B2B company details.

Anchor to customerPrivacy
customerPrivacy
StatefulRemoteSubscribable<>
required

The buyer's current privacy consent settings, including consent flags, allowed processing activities, and region information.

Anchor to extension
extension
required

Metadata about the extension, including its target, version, and editor context. For configuration details, see shopify.extension.toml.

required

Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Supports both the buyer's locale and the extension's fallback locale.

Anchor to localization
localization
required

The buyer's language, country, and locale context. For formatting utilities, use the i18n object instead.

Anchor to navigation
navigation
required

Methods for navigating within the customer account, including URL-based navigation and history management.

Anchor to query
query
<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }>
required

Queries the Storefront GraphQL API using a prefetched token. Requires the api_access capability in your extension configuration.

Anchor to sessionToken
sessionToken
required

Provides access to session tokens for verifying requests from your extension to your app's backend. Session tokens are signed JSON Web Tokens (JWTs) that contain information about the current session. For more details, see the Session Token API.

Anchor to settings
settings
StatefulRemoteSubscribable<>
required

The merchant-configured settings for this extension. Settings are empty until the merchant configures them, and values update in real time as the merchant saves changes.

Anchor to storage
storage
required

Key-value storage that persists across customer sessions. Data is scoped to your app and shared across all extension targets.

required

Triggers platform-level UI interactions, such as displaying toast notifications. Use this to show success or error messages in response to customer actions.

Anchor to version
version
Version
required

The API version your extension is running against. This is the version specified in your shopify.extension.toml file.

Anchor to extensionPoint
extensionPoint
Target
required

The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file. For available targets, see the extension targets overview. For configuration details, see extension targets.

Deprecated

Deprecated as of version 2023-07, use extension.target instead.

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

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

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

if (order) {
return (
<Banner>
Please include your order ID ({order.id})
in support requests
</Banner>
);
}

return null;
}
Was this page helpful?