Skip to main content

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

Requires access to protected customer data for some properties.

A static extension target that renders after all line items on 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.

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

StatefulRemoteSubscribable<[]>
required

Gift Cards that have been applied to the order.

StatefulRemoteSubscribable<[]>
required

The metafields requested in the shopify.ui.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.

StatefulRemoteSubscribable<[] | undefined>
required

Custom attributes left by the customer to the merchant, either in their cart or during checkout.

StatefulRemoteSubscribable<>
required

The authentication state of Order status page.

StatefulRemoteSubscribable<>
required

Settings applied to the buyer's checkout.

StatefulRemoteSubscribable< | undefined>
required

id that represents the checkout used to create the order.

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

required

Details on the costs of the purchase for the buyer.

StatefulRemoteSubscribable<[]>
required

Discounts that have been applied to the entire cart.

StatefulRemoteSubscribable<[]>
required

A list of discount codes applied to the purchase.

<Target>
required

Meta information about the extension.

StatefulRemoteSubscribable<[]>
required

A list of lines containing information about the items the customer intends to purchase.

required

Details about the location, language, and currency of the buyer. For utilities to easily format and translate content based on these details, you can use the i18n object instead.

StatefulRemoteSubscribable<[]>
required

The metafields that apply to the current order. The actual resource on which these metafields exist depends on the source of the order:

  • If the source is an order, then the metafields are on the order.

  • If the source is a draft order, then the initial value of metafields are from the draft order, and any new metafields you write are applied to the order created by the checkout.

  • For all other sources, the metafields are only stored locally on the client creating the checkout, and are applied to the order that results from checkout.

These metafields are shared by all extensions running on checkout, and persist for as long as the customer is working on this checkout.

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

StatefulRemoteSubscribable<string | undefined>
required

A note left by the customer to the merchant, either in their cart or during checkout.

StatefulRemoteSubscribable< | undefined>
required

Information about the order that was placed.

() => Promise<void>
required

The requireLogin() method triggers login if the customer is viewing pre-authenticated Order status page.

required

Shop where the purchase took place.

required

The renderer version being used for the extension.

StatefulRemoteSubscribable< | undefined>

The buyer billing address used for the order.

Requires access to protected customer data.

Information about the buyer that is interacting with the order.

Requires access to protected customer data.

StatefulRemoteSubscribable< | undefined>

The buyer shipping address used for the order.

Requires access to protected customer data.

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.

Was this section helpful?

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

required

Methods for interacting with Web Pixels, such as emitting an event.

Note

Requires to connect a third-party domain to Shopify for your customer account pages.

Anchor to applyTrackingConsentChange
applyTrackingConsentChange
required

Allows setting and updating customer privacy consent settings and tracking consent metafields.

Note

Requires the customer_privacy capability to be set to true.

Requires access to protected customer data.

Anchor to authenticatedAccount
authenticatedAccount
required

Information about the authenticated account.

StatefulRemoteSubscribable<>
required

Customer privacy consent settings and a flag denoting if consent has previously been collected.

required

Meta information about the extension.

required

Utilities for translating content and formatting values according to the current localization of the user.

required

Details about the language of the buyer.

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

Used to query the Storefront GraphQL API with a prefetched token.

See storefront api access examples for more information.

required

Provides access to session tokens, which can be used to verify token claims on your app's server.

See session token examples for more information.

StatefulRemoteSubscribable<>
required

The settings matching the settings definition written in the shopify.ui.extension.toml file.

See settings examples for more information.

Note

When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.

required

Key-value storage for the extension target.

required

Methods to interact with the extension's UI.

Version
required

The renderer version being used for the extension.

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.

Was this section helpful?

Customer account order status cart line list extension example

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

export default reactExtension(
'customer-account.order-status.cart-line-list.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;
}