--- title: Decide on customer account UI extension placement description: Learn how to decide the best placement for a customer account UI extension. source_url: html: 'https://shopify.dev/docs/apps/build/customer-accounts/extension-placement' md: 'https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md' --- ExpandOn this page * [Order status](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#order-status) * [Profile page](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#profile-page) * [Order index](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#order-index) * [Define default placement](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#define-default-placement) * [Next steps](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#next-steps) # Decide on customer account UI extension placement When you're deciding where to place a customer account UI extension, consider how it relates to the surrounding information on the page, and where it might fit within the existing page structure. You can place UI extensions on the **Order status**, **Profile**, and **Order index** (order action menu) pages. Explore all [extension targets](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview). Tip If an extension doesn’t fit into one of these pages, then consider building a [full-page](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview#full-page-extension-target) extension instead. *** ## Order status The **Order status** page is where customers can view, track, and manage their order. Extensions such as [an order action menu extension](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions) that pertain to a specific order belong on this page. To decide the most appropriate placement for extensions on the **Order status** page, consider the following page areas and their primary function: * **Order status timelines**: Provides updates on item delivery, pickup, or return, and information for tracking order statuses. * **Order actions**: Enables a customer to manage an order. * **Order summary**: Contains the items in an order and the cost. Note On mobile, the order summary is collapsed at the top of the page. This prioritizes the visibility of order actions and the order status timeline, while maintaining easy access to the order summary. * **Order details**: Contains the customer, shipping, and billing information for the order. Note [Order action menu extensions](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions) are shared between the **Order index** and **Order status** pages, which enables customers to manage their order from either page. The following image displays extension targets in the context of the **Order status** page's layout. ![The Order status page's layout](https://shopify.dev/assets/assets/images/apps/customer-accounts/ux-guidelines/osp-extension-placement-C4Y8lNYZ.png) *** ## Profile page The **Profile** page is where customers can view and edit their personal information. For B2B customers, this page also includes the company name, and the company location(s) that they have access to. To decide the most appropriate placement for UI extensions on this page, consider whether your UI extension pertains to customer information, company information, or company location information, and choose an extension target accordingly. For example, if your extension pertains to customer information, then the `customer-account.profile.block.render` block extension target is a good fit. This extension target renders in both the default and B2B experiences, and merchants can customize the placement of this extension in the checkout editor. All static extension targets available on this page render either on the default experience or the B2B experience. ![The available extension targets on the Default and B2B versions of the Profile page.](https://shopify.dev/assets/assets/images/apps/customer-accounts/ux-guidelines/profile-b2b-d2c-CQAI4pkI.png) *** ## Order index The **Order index** page is where customers can view and manage all their past and current orders. The primary purpose of this page is to help customers find orders. To keep the page focused on this goal, only one block extension target, with two available placements, is available on this page. [Order action menu extensions](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions) also render on this page, in both the grid view and list view. Note [Order action menu extensions](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions) are shared between the **Order index** and **Order status** pages, which enables customers to manage their order from either page. The following image displays extension targets in the context of the **Order index** page: ![An image showing the Order index of customer account](https://shopify.dev/assets/assets/images/apps/customer-accounts/ux-guidelines/order-index-DGO8PIAG.png) *** ## Define default placement When you’re using a extension block target, merchants can place the UI extension in any of the supported placements on the page. To recommend a specific placement to merchants, define the default placement by using the `[[extensions.targeting.default_placement]]` property in the TOML file. Learn how to [configure default placement](https://shopify.dev/docs/apps/build/app-extensions/configure-app-extensions#customer-account-ui-extensions). Use the following placement references to indicate the default placement: ### Placement references Here are all the placement references for each page in customer accounts. #### Order index Block extension target: [`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) Placement references: `PAGE_TITLE`, `ORDER_INDEX` #### Order status Block extension target: [`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) Placement references: `PAGE_TITLE`, `ORDER_STATUS1`, `ORDER_STATUS2`, `ORDER_STATUS3`, `ORDER_SUMMARY1`, `ORDER_SUMMARY2`, `ORDER_SUMMARY3` #### Profile Block extension target: [`customer-account.profile.block.render`](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/targets/profile-\(default\)/customer-account-profile-block-render) Placement references: `PAGE_TITLE`, `PROFILE1`, `PROFILE2` Tip Use these placement references as URL parameters to test your block extensions in all supported placements. Learn more about [testing customer account extensions](https://shopify.dev/docs/apps/build/customer-accounts/test#block-targets). *** ## Next steps [Targets overview\ \ ](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview) [Explore all extension targets available for placing customer account UI extensions.](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview) [UX guidelines\ \ ](https://shopify.dev/docs/apps/build/customer-accounts/ux) [Explore the customer accounts UX guidelines.](https://shopify.dev/docs/apps/build/customer-accounts/ux) *** * [Order status](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#order-status) * [Profile page](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#profile-page) * [Order index](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#order-index) * [Define default placement](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#define-default-placement) * [Next steps](https://shopify.dev/docs/apps/build/customer-accounts/extension-placement.md#next-steps)