# Error handling You can use standard web techniques to handle errors in [customer account UI extensions](/api/customer-account-ui-extensions/) but you may need to account for how they run inside of a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). ## Handling any error Add an `unhandledrejection` listener for promise rejections or an `error` listener for other exceptions like Javascript runtime errors or failures to load a resource. ### Handling any error ```ts // For unhandled promise rejections self.addEventListener( 'unhandledrejection', (error) => { console.warn( 'event unhandledrejection', error, ); }, ); // For other exceptions self.addEventListener('error', (error) => { console.warn('event error', error); }); ``` ## Third party libraries You can use error reporting libraries like [Bugsnag](https://www.bugsnag.com/) or [Sentry](https://sentry.io/). However, they might require extra configuration because UI extensions run inside of a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). > Tip: > You must request [network access](/api/customer-account-ui-extensions/configuration#network-access) to transmit errors to a third party service. ## Sentry (recommended) Initialize Sentry following their [Web Worker guide](https://docs.sentry.io/platforms/javascript/configuration/webworkers/). We recommend disabling the default integrations to be sure it will run within a Web Worker. You'll need to add event listeners manually. If you are writing your UI extension in React, you can follow Sentry's [React integration guide](https://docs.sentry.io/platforms/javascript/guides/react/) to get additional context on errors thrown while rendering your components. Integrations like tracing do not currently run in Web Workers ([issue](https://github.com/getsentry/sentry-javascript/issues/5289)). ### Sentry ```ts import { reactExtension, Banner, } from '@shopify/ui-extensions-react/customer-account'; import * as Sentry from '@sentry/browser'; Sentry.init({ dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', defaultIntegrations: false, }); self.addEventListener( 'unhandledrejection', (error) => { Sentry.captureException( new Error(error.reason.stack), ); }, ); self.addEventListener('error', (error) => { Sentry.captureException( new Error(error.message), ); }); // Your normal extension code. export default reactExtension( 'customer-account.order-status.block.render', () => <Extension />, ); function Extension() { return <Banner>Your extension</Banner>; } ``` ## Bugsnag Follow [Bugsnag's documentation](https://docs.bugsnag.com/platforms/javascript/) to install it for your extension. Bugsnag adds event listeners by default so there's no need to add them manually. If you use the [CDN version](https://docs.bugsnag.com/platforms/javascript/cdn-guide/), you'll need to add polyfill code (see example) before importing Bugsnag because it tries to access some variables that are not available in Web Workers ([details](https://github.com/bugsnag/bugsnag-js/issues/1506)). If you are writing your UI extension in React, you can follow Bugsnag's [React integration guide](https://docs.bugsnag.com/platforms/javascript/legacy/react/) to get additional context on errors thrown while rendering your components. ### Bugsnag ```ts /** * The CDN version of Bugsnag requires this polyfill. */ (() => { const document = { documentElement: { outerHTML: '', createElement: () => ({}), clientWidth: 0, clientHeight: 0, }, addEventListener: () => {}, }; const history = {}; const window = self; self.window = window; window.document = document; window.history = history; })(); ``` ## References - [Authenticated Account](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/authenticated-account.txt): The API for interacting with an account in which the customer is fully authenticated. - [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/customer-account-api.txt): Create unique customer experiences with the Customer Account API. The API offers a full range of options making it possible for customers to view their orders, manage their profile and much more. - [Extension](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/extension.txt): The API for interacting with the metadata of an extension. - [Localization](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/localization.txt): The API for localizing your extension. - [Navigation](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/navigation.txt): The API provided to extensions to navigate to extensions or host page. - [Addresses](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/addresses.txt): The API for interacting with addresses. - [Attributes](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/attributes.txt): The API for interacting with cart and checkout attributes. - [Authentication State](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/authentication-state.txt): The API for interacting with authentication state. - [Buyer Identity](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/buyer-identity.txt): The API for interacting with the buyer identity. - [Cart Lines](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/cart-lines.txt): The APIs for interacting with the cart lines. - [Checkout Settings](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/checkout-settings.txt): The API for interacting with the checkout settings. - [Cost](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/cost.txt): The API for interacting with the cost of a checkout. - [Discounts](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/discounts.txt): The API for interacting with discounts. - [Gift Cards](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/gift-cards.txt): The API for interacting with gift cards. - [Localization (Order Status API)](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/localization-(order-status-api).txt): The API for localizing your extension. - [Metafields](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/order.txt): The API for interacting with the order, available on the Order Status Page. - [Require Login](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/require-login.txt): The API for interacting with the authentication. - [Shop](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/order-status-api/shop.txt): The API for interacting with shop. - [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/settings.txt): The API for interacting with merchant settings. - [Storage](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/storage.txt): The API for interacting with local storage. - [UI](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/ui.txt): The API for interacting with UI. - [Version](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/apis/version.txt): The API for interacting with version. - [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-index/customer-account-order-index-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Index page in customer accounts. Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter. - [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Status Page. - [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-cart-line-item-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on every line item, inside the details under the line item properties element 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`. - [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-cart-line-list-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) 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`. - [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-customer-information-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) 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`. - [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-fulfillment-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the delivery status card on the Order Status page. A separate delivery status card is shown for each fulfillment. - [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-payment-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the payment status section of the Order Status page. - [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-return-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the return status card on the Order Status page. This card only shows when a return has been requested. - [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-status/customer-account-order-status-unfulfilled-items-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the delivery status card for unfulfilled items on the Order Status page. - [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-action-menu/customer-account-order-action-menu-item-render.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders as 1 order action on the Order Index and Order Status pages in customer accounts. - [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/order-action-menu/customer-account-order-action-render.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders inside a modal, as a result of the customer clicking the button rendered via the `customer-account.order.action.menu-item.render` extension target. - [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/full-page/customer-account-order-page-render.txt): This [full-page extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#full-page-extension-full-page-extension-(order-specific)) allows you to create a new page in customer accounts, **tied to a specific order**. It renders in the main content area—below the header, and above the footer. If the page you're building is not tied to a specific order, use [customer-account.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-page-render) instead. For example: - A Return Request page that requires the context of a specific order should use `customer-account.order.page.render` - A Wishlist page that does **not** require the context of a specific order should use `customer-account.page.render` - [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/full-page/customer-account-page-render.txt): This [full-page extension](/docs/api/customer-account-ui-extensions/2024-10/extension-targets-overview#full-page-extension-full-page-extension) allows you to create a new page in customer accounts. It renders in the main content area—below the header, and above the footer. If the page you're building is tied to a specific order, use [customer-account.order.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-order-page-render) instead. For example: - A Return Request page that requires the context of a specific order should use `customer-account.order.page.render` - A Wishlist page that does **not** require the context of a specific order should use `customer-account.page.render` - [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/profile-(default)/customer-account-profile-addresses-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the Addresses section of the Profile page in customer accounts. This does not show to B2B customers. - [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/profile-(default)/customer-account-profile-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Profile page in customer accounts. This extension target renders for all customers, including B2B customers. Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter. - [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/profile-(b2b)/customer-account-profile-company-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the company name, and before company location information. - [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/profile-(b2b)/customer-account-profile-company-location-addresses-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Addresses section for the company location. - [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/profile-(b2b)/customer-account-profile-company-location-payment-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Payment methods section for the company location. - [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/targets/profile-(b2b)/customer-account-profile-company-location-staff-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Staff and permissions section for the company location. - [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/avatar.txt): Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon. - [Card](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/card.txt): Group related content and functionality together in a familiar and consistent style, for customers to scan, read, and get things done. - [CustomerAccountAction](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/customeraccountaction.txt): A modal to complete an order action flow. This component can only be used to populate the [customer-account.order.action.render](/docs/api/customer-account-ui-extensions/2024-10/targets/order-action-menu/customer-account-order-action-render) extension target, which renders as a result of the customer clicking the order action button rendered via the [customer-account.order.action.menu-item.render](/docs/api/customer-account-ui-extensions/2024-10/targets/order-action-menu/customer-account-order-action-menu-item-render) extension target. - [DropZone](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/dropzone.txt): Dropzone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, Dropzone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains. Any element focused within the Dropzone component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed. - [ImageGroup](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/imagegroup.txt): Display up to 4 images in a grid or stacked layout. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed. - [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/menu.txt): Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page. - [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/page.txt): The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page. - [ResourceItem](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/resourceitem.txt): Use to represent a specific object within a collection, that a customer can take action on. For example, a list of active subscriptions or redeemable offers, in a style consistent with the order index page. - [Authenticated Account](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/authenticated-account.txt): The API for interacting with an account in which the customer is fully authenticated. - [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/customer-account-api.txt): Create unique customer experiences with the Customer Account API. The API offers a full range of options making it possible for customers to view their orders, manage their profile and much more. - [Extension](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/extension.txt): The API for interacting with the metadata of an extension. - [Localization](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/localization.txt): The API for localizing your extension. - [Navigation](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/navigation.txt): The API provided to extensions to navigate to extensions or host page. - [Addresses](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/addresses.txt): The API for interacting with addresses. - [Attributes](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/attributes.txt): The API for interacting with cart and checkout attributes. - [Authentication State](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/authentication-state.txt): The API for interacting with authentication state. - [Buyer Identity](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/buyer-identity.txt): The API for interacting with the buyer identity. - [Cart Lines](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/cart-lines.txt): The APIs for interacting with the cart lines. - [Checkout Settings](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/checkout-settings.txt): The API for interacting with the checkout settings. - [Cost](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/cost.txt): The API for interacting with the cost of a checkout. - [Discounts](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/discounts.txt): The API for interacting with discounts. - [Gift Cards](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/gift-cards.txt): The API for interacting with gift cards. - [Localization (Order Status API)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/localization-(order-status-api).txt): The API for localizing your extension. - [Metafields](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/order.txt): The API for interacting with the order, available on the Order Status Page. - [Require Login](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/require-login.txt): The API for interacting with the authentication. - [Shop](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/order-status-api/shop.txt): The API for interacting with shop. - [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/settings.txt): The API for interacting with merchant settings. - [Storage](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/storage.txt): The API for interacting with local storage. - [UI](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/ui.txt): The API for interacting with UI. - [Version](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/apis/version.txt): The API for interacting with version. - [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-index/customer-account-order-index-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Index page in customer accounts. Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter. - [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Status Page. - [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-cart-line-item-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on every line item, inside the details under the line item properties element 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`. - [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-cart-line-list-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) 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`. - [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-customer-information-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) 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`. - [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-fulfillment-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the delivery status card on the Order Status page. A separate delivery status card is shown for each fulfillment. - [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-payment-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the payment status section of the Order Status page. - [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-return-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the return status card on the Order Status page. This card only shows when a return has been requested. - [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-status/customer-account-order-status-unfulfilled-items-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the delivery status card for unfulfilled items on the Order Status page. - [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-action-menu/customer-account-order-action-menu-item-render.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders as 1 order action on the Order Index and Order Status pages in customer accounts. - [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/order-action-menu/customer-account-order-action-render.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders inside a modal, as a result of the customer clicking the button rendered via the `customer-account.order.action.menu-item.render` extension target. - [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/full-page/customer-account-order-page-render.txt): This [full-page extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#full-page-extension-full-page-extension-(order-specific)) allows you to create a new page in customer accounts, **tied to a specific order**. It renders in the main content area—below the header, and above the footer. If the page you're building is not tied to a specific order, use [customer-account.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-page-render) instead. For example: - A Return Request page that requires the context of a specific order should use `customer-account.order.page.render` - A Wishlist page that does **not** require the context of a specific order should use `customer-account.page.render` - [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/full-page/customer-account-page-render.txt): This [full-page extension](/docs/api/customer-account-ui-extensions/2025-01/extension-targets-overview#full-page-extension-full-page-extension) allows you to create a new page in customer accounts. It renders in the main content area—below the header, and above the footer. If the page you're building is tied to a specific order, use [customer-account.order.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-order-page-render) instead. For example: - A Return Request page that requires the context of a specific order should use `customer-account.order.page.render` - A Wishlist page that does **not** require the context of a specific order should use `customer-account.page.render` - [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/profile-(default)/customer-account-profile-addresses-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the Addresses section of the Profile page in customer accounts. This does not show to B2B customers. - [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/profile-(default)/customer-account-profile-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Profile page in customer accounts. This extension target renders for all customers, including B2B customers. Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter. - [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/profile-(b2b)/customer-account-profile-company-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the company name, and before company location information. - [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/profile-(b2b)/customer-account-profile-company-location-addresses-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Addresses section for the company location. - [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/profile-(b2b)/customer-account-profile-company-location-payment-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Payment methods section for the company location. - [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/targets/profile-(b2b)/customer-account-profile-company-location-staff-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Staff and permissions section for the company location. - [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/avatar.txt): Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon. - [Card](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/card.txt): Group related content and functionality together in a familiar and consistent style, for customers to scan, read, and get things done. - [CustomerAccountAction](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/customeraccountaction.txt): A modal to complete an order action flow. This component can only be used to populate the [customer-account.order.action.render](/docs/api/customer-account-ui-extensions/2025-01/targets/order-action-menu/customer-account-order-action-render) extension target, which renders as a result of the customer clicking the order action button rendered via the [customer-account.order.action.menu-item.render](/docs/api/customer-account-ui-extensions/2025-01/targets/order-action-menu/customer-account-order-action-menu-item-render) extension target. - [DropZone](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/dropzone.txt): Dropzone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, Dropzone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains. Any element focused within the Dropzone component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed. - [ImageGroup](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/imagegroup.txt): Display up to 4 images in a grid or stacked layout. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed. - [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/menu.txt): Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page. - [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/page.txt): The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page. - [ResourceItem](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/components/resourceitem.txt): Use to represent a specific object within a collection, that a customer can take action on. For example, a list of active subscriptions or redeemable offers, in a style consistent with the order index page. - [Authenticated Account](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/authenticated-account.txt): The API for interacting with an account in which the customer is fully authenticated. - [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/customer-account-api.txt): Create unique customer experiences with the Customer Account API. The API offers a full range of options making it possible for customers to view their orders, manage their profile and much more. - [Extension](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/extension.txt): The API for interacting with the metadata of an extension. - [Localization](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/localization.txt): The API for localizing your extension. - [Navigation](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/navigation.txt): The API provided to extensions to navigate to extensions or host page. - [Addresses](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/addresses.txt): The API for interacting with addresses. - [Attributes](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/attributes.txt): The API for interacting with cart and checkout attributes. - [Authentication State](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/authentication-state.txt): The API for interacting with authentication state. - [Buyer Identity](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/buyer-identity.txt): The API for interacting with the buyer identity. - [Cart Lines](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/cart-lines.txt): The APIs for interacting with the cart lines. - [Checkout Settings](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/checkout-settings.txt): The API for interacting with the checkout settings. - [Cost](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/cost.txt): The API for interacting with the cost of a checkout. - [Discounts](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/discounts.txt): The API for interacting with discounts. - [Gift Cards](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/gift-cards.txt): The API for interacting with gift cards. - [Localization (Order Status API)](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/localization-(order-status-api).txt): The API for localizing your extension. - [Metafields](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/order.txt): The API for interacting with the order, available on the Order Status Page. - [Require Login](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/require-login.txt): The API for interacting with the authentication. - [Shop](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/shop.txt): The API for interacting with shop. - [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/settings.txt): The API for interacting with merchant settings. - [Storage](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/storage.txt): The API for interacting with local storage. - [UI](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/ui.txt): The API for interacting with UI. - [Version](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/version.txt): The API for interacting with version. - [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-index/customer-account-order-index-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Index page in customer accounts. Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter. - [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Status Page. - [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-cart-line-item-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on every line item, inside the details under the line item properties element 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`. - [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-cart-line-list-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) 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`. - [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-customer-information-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) 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`. - [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-fulfillment-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the delivery status card on the Order Status page. A separate delivery status card is shown for each fulfillment. - [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-payment-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the payment status section of the Order Status page. - [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-return-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the return status card on the Order Status page. This card only shows when a return has been requested. - [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-status/customer-account-order-status-unfulfilled-items-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the delivery status card for unfulfilled items on the Order Status page. - [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-menu-item-render.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders as 1 order action on the Order Index and Order Status pages in customer accounts. - [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-render.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders inside a modal, as a result of the customer clicking the button rendered via the `customer-account.order.action.menu-item.render` extension target. - [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/full-page/customer-account-order-page-render.txt): This [full-page extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#full-page-extension-full-page-extension-(order-specific)) allows you to create a new page in customer accounts, **tied to a specific order**. It renders in the main content area—below the header, and above the footer. If the page you're building is not tied to a specific order, use [customer-account.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-page-render) instead. For example: - A Return Request page that requires the context of a specific order should use `customer-account.order.page.render` - A Wishlist page that does **not** require the context of a specific order should use `customer-account.page.render` A full-page extension target cannot coexist with any other targets in the same extension. - [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/full-page/customer-account-page-render.txt): This [full-page extension](/docs/api/customer-account-ui-extensions/unstable/extension-targets-overview#full-page-extension-full-page-extension) allows you to create a new page in customer accounts. It renders in the main content area—below the header, and above the footer. If the page you're building is tied to a specific order, use [customer-account.order.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-order-page-render) instead. For example: - A Return Request page that requires the context of a specific order should use `customer-account.order.page.render` - A Wishlist page that does **not** require the context of a specific order should use `customer-account.page.render` A full-page extension target cannot coexist with any other targets in the same extension. - [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/profile-(default)/customer-account-profile-addresses-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders in the Addresses section of the Profile page in customer accounts. This does not show to B2B customers. - [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/profile-(default)/customer-account-profile-block-render.txt): A [block extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Profile page in customer accounts. This extension target renders for all customers, including B2B customers. Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter. - [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/profile-(b2b)/customer-account-profile-company-details-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the company name, and before company location information. - [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/profile-(b2b)/customer-account-profile-company-location-addresses-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Addresses section for the company location. - [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/profile-(b2b)/customer-account-profile-company-location-payment-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Payment methods section for the company location. - [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/profile-(b2b)/customer-account-profile-company-location-staff-render-after.txt): A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders on the Profile page in customer accounts—for B2B customers only. It renders after the Staff and permissions section for the company location. - [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components/avatar.txt): Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon. - [Card](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components/card.txt): Group related content and functionality together in a familiar and consistent style, for customers to scan, read, and get things done. - [CustomerAccountAction](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components/customeraccountaction.txt): A modal to complete an order action flow. This component can only be used to populate the [customer-account.order.action.render](/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-render) extension target, which renders as a result of the customer clicking the order action button rendered via the [customer-account.order.action.menu-item.render](/docs/api/customer-account-ui-extensions/unstable/targets/order-action-menu/customer-account-order-action-menu-item-render) extension target. - [ImageGroup](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components/imagegroup.txt): Display up to 4 images in a grid or stacked layout. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed. - [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components/menu.txt): Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page. - [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components/page.txt): The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page. - [ResourceItem](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components/resourceitem.txt): Use to represent a specific object within a collection, that a customer can take action on. For example, a list of active subscriptions or redeemable offers, in a style consistent with the order index page.