Merchants use customer accounts to enable their customers to view their order history, check order statuses, edit their profile, and take actions related to their order.

Customer account UI extensions are only supported on the new version of customer accounts. Legacy customer accounts do not support customer account UI extensions. Learn more about [customer accounts](https://help.shopify.com/en/manual/customers/customer-accounts).

> Tip:
> Determine the customer account version that a merchant's using by querying the [`CustomerAccountsV2`](/docs/api/admin-graphql/latest/objects/CustomerAccountsV2) object.

## How it works

Customers can navigate to their account from the online store, from order notification emails, or any custom entrypoint placed by the merchant.

If the customer is not already logged in, clicking a link from an order notification email to view their order will bring them to the pre-authenticated Order status page. From there, if the customer tries to navigate to another page in their account, or tries to take an action, they’ll be prompted to log in. Once the customer logs in, they are fully authenticated and able to access all customer account pages. Learn more about [Order status page authentication states](/docs/apps/build/customer-accounts/order-status-page#authentication-states).

Using customer account UI extensions, apps can extend the functionality of existing customer account pages, as well as, create new pages (full-page extensions).

> Note:
> Customer account UI extensions can be built using [checkout components](/docs/api/checkout-ui-extensions/unstable/components) and [customer account components](/docs/api/customer-account-ui-extensions/unstable/components).

![A diagram showing that a customer can navigate to their account from the online store, or from order notifications. Developers can build extensions for all customer account pages, and create full-page extensions to create new pages.](/assets/apps/customer-accounts/how-it-works/how-it-works.png)

You can extend the following pages in customer accounts at defined [extension targets](/docs/api/customer-account-ui-extensions/latest/extension-targets-overview):

<table>
  <caption>Customer account pages</caption>
  <tr>
    <th scope="col">Page</th>
    <th scope="col">Description</th>
    <th scope="col">Example use cases</th>
  </tr>
  <tr scope="row">
    <td><b>Order index</b></td>
    <td><p>The page that customers land on when they log in to their account. Provides a list of all the customer’s orders, including draft orders that they’ve been invoiced for.</p><p>Customers can take action on an order from this page, such as requesting a return.</p></td>
    <td>Order actions, product suggestions based on order history, loyalty discount offers.</td>

  </tr>
  <tr scope="row">
    <td><b>Order status</b></td>
    <td><p>The page where customers can view, track, and manage a specific order.<p></p>Customers can take action on an order from this page, such as requesting a return.</p></td>
    <td>Order actions, product reviews, surveys, order tracking, loyalty points earned.</td>
  </tr>
  <tr scope="row">
    <td><b>Profile</b></td>
    <td><p>The page where customers can manage their personal information, such as name and addresses.</p><p>For B2B customers, this page also includes company information.</p></td>
    <td>Membership level, loyalty point balance, customer metafields.</td>
  </tr>
  <tr scope="row">
    <td><b>New pages</b></td>
    <td>Apps can create new pages using full-page extensions, to support use cases that aren't suited to native pages.</td>
    <td>Wishlist, subscriptions, rewards, offers.</td>
  </tr>
</table>

Order index

![The Order index page showing three orders that contain various plants. One order is in the the Confirmed status, one in the Delivered status, and one is in the Out for delivery status.](/assets/apps/customer-accounts/how-it-works/order-index.png)

Order status

![The Order Status page showing the plants that are included in the order, the total cost of $1,220, the Delivered status, and order details such as customer contact information, shipping and billing address, and payment information.](/assets/apps/customer-accounts/how-it-works/order-status.png)

Profile

![The Profile page. The page shows the customer’s name, email, phone number, addresses, and saved payment methods.](/assets/apps/customer-accounts/how-it-works/profile.png)

## Get started

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/customer-accounts/start-building" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a customer accounts experience
    </h3>
    <p class="resource-card__description">Set up your development environment to begin developing a customer account UI extension.</p>
  </a>
</div>
</div>


## Product roadmap

We’ll continue adding API capabilities to help you access the right functionality in extensions. We’ll also continue adding UI components that offer performant patterns on our design best practices. We release new components and APIs into the unstable API version first, and promote to the next stable release based on Shopify’s API version release schedule.

| Feature                                                                                                   | Shipped   |
|-----------------------------------------------------------------------------------------------------------|-----------|
| Developers can preview and manage customer account UI extensions in the checkout editor                    | June 2024 |
| Extension API calls to the [Customer Account API](/docs/api/customer) to retrieve order data are supported on the pre-authenticated state of the **Order status** page | June 2024 |
| Write to metafields with [Customer Account API](/docs/apps/build/customer-accounts/metafields)             | June 2024 |
| Updated Order Status API to determine the customer [authentication state](/docs/api/customer-account-ui-extensions/unstable/apis/order-status-api/authentication-state) on the Order status page | June 2024 |
| [Protected customer data requirements](/docs/apps/launch/protected-customer-data) apply to customer account extensions |August 2024 |
| Merchants can edit header navigation menus in customer accounts                                           |           |
| APIs to read and manage return requests                                                                   |           |
| APIs to read and manage subscriptions                                                                     |           |

## Developer tools and resources

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/api/customer-account-ui-extensions/extension-targets-overview" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/build"
     data-alt-src="/assets/resource-cards/build-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Targets overview
    </h3>
    <p class="resource-card__description">Explore all extension targets available for customer accounts UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/unstable/components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout UI extension components
    </h3>
    <p class="resource-card__description">Explore the checkout components you can also use to build customer account UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/customer-account-ui-extensions/unstable/components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Customer account UI extension components
    </h3>
    <p class="resource-card__description">Explore the customer account components you can use to build customer account UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="https://www.figma.com/community/file/1304881365343613949/checkout-and-account-components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/hearts"
     data-alt-src="/assets/resource-cards/hearts-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Figma UI kit
    </h3>
    <p class="resource-card__description">Figma components for checkout and account UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="https://www.figma.com/community/file/1304882873974540289/account-screens" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/resource"
     data-alt-src="/assets/resource-cards/resource-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Account screens
    </h3>
    <p class="resource-card__description">Figma screens with extension targets, breakpoints, and example designs.</p>
  </a>
</div>
</div>



STORAGE


> Note:
> If you're building an app that directs customer to the pre-authenticated **Order status** page, then you need to [obtain level 2 permission for protected customer data](/docs/apps/launch/protected-customer-data).



> Note:
> If you're sending transactional SMS on behalf of merchants then you should include the customer’s order number alongside any links to the Order Status Page.

After the customer logs in, they are fully authenticated and able to access all customer account pages. Using customer account UI extensions, apps can extend the functionality of existing customer account pages, as well as, create new pages (full-page extensions). Customer account UI extensions can be built using checkout components and customer account components.