Skip to main content

Targets Overview

A target represents where your customer account UI extension will appear.

You register for targets in your configuration file, and you include a JavaScript function that will run at that location in customer accounts.

Anchor to static-extension-targetsStatic extension targets

Static extension targets render immediately before or after most core customer account features.

When a core customer account feature isn't rendered, neither are the static extension targets tied to it.

Choose static extension targets when your content and functionality is closely related to a core customer account feature.

API referenceExtension targets
The background of the entire diagram is a light red, which is the color that represents static extension targets. In the center is a solid-line box that says Core Feature. Above and below it, connected to the Core Feature by a lock icon, there are two red dotted-line boxes that contain example names of static extension targets, indicating that they are always tied to the Core Feature.

Anchor to block-extension-targetsBlock extension targets

Block extension targets render between core customer account features. Block extensions are always rendered, regardless of what other elements of the customer account are present.

Block extension targets always support multiple placements. Each placement has an associated placement reference that represents its location on the page. For example, the block extension target customer-account.order-status.block.render supports seven placements. The placement references include PAGE_TITLE, ORDER_SUMMARY1, and more.

You can use placement references as URL parameters to test block extensions in all supported placements on a page. You can also use placement references to define the default placement of an extension for merchants.

API referenceExtension targets
Learn morePlacement references

Anchor to order-indexOrder index

The Order index page is where customers can view and manage all their past and current orders.

Anchor to order-index-ordersOrders

The page contains one block extension that merchants can place above the page title or below the order list.

See all extension targets.

Anchor to order-index-order-action-menuOrder action menu

Actions available on specific order

See all extension targets.

The desktop and mobile view of the Order index page, with the customer-account.order-index.block.render extension target shown in purple dotted-line boxes above the page title, and below the list of orders, indicating that it's a block extension target with multiple placements available.
The desktop and mobile view of the order action menu on the Order index page. The menu label is "Manage", and contains one menu item that says "Request return". The menu also contains a red dotted-line box that says customer-account.order.action.menu-item.render, representing the static extension target that's available in this menu.

Anchor to order-statusOrder status

The Order status page is where customers can view, track, and manage a specific order.

Anchor to order-status-order-statusOrder status

For tracking order statuses, and any updates regarding the delivery, pickup, or return of items.

See all extension targets.

Anchor to order-status-order-detailsOrder details

Customer, shipping, and billing information associated with the order.

See all extension targets.

Anchor to order-status-payment-statusPayment status

Depending on the payment status of the order, relevant payment information and action items may be displayed here. For example, for orders with payment terms, the amount due, the due data, and a Pay now button is displayed.

See all extension targets.

Anchor to order-status-order-summaryOrder summary

Summary of the items, discounts, and order total.

See all extension targets.

Anchor to order-status-order-action-menuOrder action menu

Actions available on a specific order.

See all extension targets.

The desktop and mobile view of the Order status page. Above and below the page title, there is a purple dotted-line box that indicates the available placements for the block extension target on this page.
The desktop and mobile view of the Order details card on the Order status page, which includes contact information, payment, shipping address, billing address, and more. Above and below the Order details card there is a purple dotted-line box that indicates the available placements for the block extension target on this page. Inside the Order details card is a red dotted-line box that indicates the static extension target available in this location.
The desktop and mobile view of the payment status card. Inside the card, below the payment status information, there is a red dotted-line box that says customer-account.order-status.payment-details.render-after, indicating the static extension target available in this location.
The desktop and mobile view of the order summary card on the Order status page, which includes the images and names of the items in the order, their cost, and the calculations of subtotal, shipping, taxes, and total for the order. Under every item, there is a red dotted-line box that says customer-account.order-status.cart-line-item.render-after, indicating the static extension target available in this location. Under the entire list of items, there is one red dotted-line box that says customer-account.order-status.cart-line-list.render-after, indicating another static extension target available in this location. A purple dotted-line box that says customer-account.order-status.block-render is shown above the list of items, below the list of items, and below the, indicating the multiple placements available for this block extension target.
The desktop and mobile video of the order action menu on the Order status page. The menu label is "Manage", and contains one menu item that says "Request return". The menu also contains a red dotted-line box that says customer-account.order.action.menu-item.render, representing the static extension target that's available in this menu.

Anchor to profile-defaultProfile (Default)

The Profile page is where customers view and edit their personal information.

Anchor to profile-(default)-customer-detailsCustomer details

The customer's name and contact information.

See all extension targets.

Anchor to profile-(default)-addressesAddresses

The customer's personal addresses.

See all extension targets.

The desktop and mobile view of the Profile page. Above the page title, and below the section of the page that contains the customer's name, email, and phone number, there are purple dotted-line boxes that indicate the available placements for the block extension target on this page.
The desktop and mobile view of the addresses section of the Profile page. Inside the addresses card, under the customer's saved addresses, there's a red dotted-line box that says customer-account.profile.addresses.render-after, indicating the static extension target available in this location.

Anchor to profile-b2bProfile (B2B)

For B2B customers, the Profile page includes information about the customer, company, and the company location(s) the customer has access to. Currently, extensions can be developed using these targets, but merchants cannot enable them via the Checkout and Accounts Editor. We recommend relying on Profile (Default) targets and the companyLocation field to create a similar experience.

Anchor to profile-(b2b)-customer-detailsCustomer details

The customer's name and contact information.

See all extension targets.

Anchor to profile-(b2b)-company-detailsCompany details

The company name. This extension target can be used to add more information about the company.

See all extension targets.

Anchor to profile-(b2b)-company-location-detailsCompany location details

The shipping address, billing address, and payment details associated with each specific company location.

See all extension targets.

The desktop and mobile view of the Profile page. Above the page title, and below the section of the page that contains the customer's name, email, and phone number, there are purple dotted-line boxes that indicate the available placements for the block extension target on this page.
The desktop and mobile view of the company section of the Profile page. The header of the section says "Celadon" which is an example company name. Under the header, there is a red dotted-line box that says customer-account.profile.company-details.render-after, indicating the static extension target available in this location.
The desktop and mobile view of the section of the B2B Profile page that contains details about the company location. Under the addresses section, there's a red dotted-line box that says customer-account.profile.company-location-addresses.render-after, indicating the static extension target available in this location. Under the payment methods section, there's another red dotted-line box that says customer-account.profile.company-location-payment.render-after, indicating a static extension target available in this location.

Anchor to order-action-menu-extension-targetOrder action menu

Order-related actions that customers can access from both the Order index and Order status page.

Anchor to order-action-menu-order-index-pageOrder index page

Where customers can view and manage all their past and current orders.

See all extension targets.

Anchor to order-action-menu-order-status-pageOrder status page

Where customers can view, track, and manage a specific order.

See all extension targets.

Anchor to order-action-menu-order-action-modalOrder action modal

A modal that can rendered to complete an order action flow.

See all extension targets.

The desktop and mobile view of the Order index page that contains a list of all orders. In the Manage menu, there's a red dotted-line box that says customer-account.order-action-menu-item.render, indicating the static extension target available in this location.
The desktop and mobile view of the Order status page that contains details about a specific order. In the Manage menu, there's a red dotted-line box that says customer-account.order-action-menu-item.render, indicating the static extension target available in this location.
The desktop and mobile views of the customer-account.order.action.render extension target.

Anchor to full-page-extension-targetFull-page extension

Build new pages for customer accounts. Full-page extensions render in the main content area—below the header, and above the footer.

Anchor to full-page-extension-full-page-extensionFull-page extension

This full-page extension target is for building pages that are not tied to a specific order. For example, a Wishlist page.

See all extension targets.

Anchor to full-page-extension-full-page-extension-(order-specific)Full-page extension (order-specific)

This full-page extension target is for building pages that are tied to a specific order. For example, a Request Return page.

See all extension targets.

A desktop view of the customer-account.page.render full-page extension target that renders between the header and footer.
A desktop view of the customer-account.order.page.render full-page extension target that renders between the header and footer.

Anchor to footerFooter

The section at the bottom of all customer account pages, where customers can find links to store policies.

Anchor to footer-footerFooter

A static extension target that renders in the footer, below the links to store policies. Since the footer appears across all customer account pages, this is an ideal location for elements like cookie consent banners that need to be visible across the entire customer accounts experience.

See all extension targets.

A desktop view of the customer-account.footer.render-after extension target that renders in the footer.