---
title: Customer account UI extensions
description: "

  \  Customer account UI extensions let app developers build custom functionality that merchants can install at defined points on the **Order index**, **Order status**, and **Profile** pages in customer accounts.


  \ \ 


  \ > Shopify Plus:\ 

  >Some static extensions on the Profile page only render for B2B customers. B2B on Shopify is only available on the [Shopify Plus](https://www.shopify.com/plus) plan. [See B2B Profile targets](/api/customer-account-ui-extensions/unstable/extension-targets-overview#profile-b2b)

  \  "
api_version: 2024-10
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10.md
---

# Customer account UI extensions

Customer account UI extensions let app developers build custom functionality that merchants can install at defined points on the **Order index**, **Order status**, and **Profile** pages in customer accounts.

Shopify Plus

Some static extensions on the Profile page only render for B2B customers. B2B on Shopify is only available on the [Shopify Plus](https://www.shopify.com/plus) plan. [See B2B Profile targets](https://shopify.dev/api/customer-account-ui-extensions/unstable/extension-targets-overview#profile-b2b)

## Scaffolding an extension

Use Shopify CLI to [generate a new extension](https://shopify.dev/apps/tools/cli/commands#generate-extension) in the directory of your app.

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/apps/customer-accounts/getting-started)

[Navigate toGetting started](https://shopify.dev/docs/apps/customer-accounts/getting-started)

### Examples

* #### Scaffolding

  ##### npm

  ```bash
  npm init @shopify/app@latest
  cd your-app
  npm run shopify app generate extension
  ```

  ##### yarn

  ```bash
  yarn create @shopify/app
  cd your-app
  yarn shopify app generate extension
  ```

  ##### pnpm

  ```bash
  pnpm create @shopify/app
  cd your-app
  pnpm shopify app generate extension
  ```

## Extension targets

Extension targets provide locations for customer account UI extensions to appear.

Extension UIs are rendered using [remote UI](https://github.com/Shopify/remote-ui), a fast and secure environment for custom [(non-DOM)](#security) UIs.

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/api/customer-account-ui-extensions/extension-targets-overview)

[OverviewExtension targets](https://shopify.dev/api/customer-account-ui-extensions/extension-targets-overview)

### Examples

* #### Extension targets

  ##### React

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

  reactExtension('customer-account.order-index.block.render', () => (
    <App />
  ));

  function App() {
    const translate = useTranslate();
    return <Banner>{translate('welcomeMessage')}</Banner>;
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    Banner,
  } from '@shopify/ui-extensions/customer-account';

  extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const banner = root.createComponent(
        Banner,
        {},
        api.i18n.translate('welcomeMessage'),
      );
      root.appendChild(banner);
    },
  );
  ```

![The Profile page with a purple dotted-line box above the page title that says "Extension targets".](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2024-10/extension-targets.png)

## Configuration file

When you create a customer account UI extension, the shopify.extension.toml file is automatically generated in your customer account UI extension directory. It contains the extension's configuration, which includes the extension name, extension targets, metafields, capabilities and settings definition.

[![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/api/customer-account-ui-extensions/configuration)

[Navigate toConfiguration guide](https://shopify.dev/api/customer-account-ui-extensions/configuration)

### Examples

* #### shopify.ui.extension.example.toml

  ##### toml

  ```toml
  api_version = "unstable"

  [[extensions]]
  name = "My customer account ui extension"
  handle = "customer-account-ui"
  type = "ui_extension"

  [[extensions.targeting]]
  target = "customer-account.order-status.block.render"
  module = "./Extension.jsx"
  ```

## Extension APIs

APIs enable customer account UI extensions to get information about the customer or related objects and to perform actions. For example, you can use APIs to retrieve previous orders of the customer so that you can offer related products as upsells.

Extensions use JavaScript to read and write data and call external services, and natively render UIs built using Shopify's checkout and customer account components.

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/api/customer-account-ui-extensions/apis)

[Navigate toCustomer account UI extensions APIs](https://shopify.dev/api/customer-account-ui-extensions/apis)

### Examples

* #### Extension APIs

  ##### React

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

  reactExtension(
    'customer-account.order-status.block.render',
    () => <App />,
  );

  function App() {
    const translate = useTranslate();
    return <Banner>{translate('welcomeMessage')}</Banner>;
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    Banner,
  } from '@shopify/ui-extensions/customer-account';

  extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      renderApp(root, api);
    },
  );

  function renderApp(root, api) {
    // In case of a re-render, remove previous children.
    for (const child of root.children) {
      root.removeChild(child);
    }

    const banner = root.createComponent(
      Banner,
      {},
      api.i18n.translate('welcomeMessage'),
    );
    root.appendChild(banner);
  }
  ```

## UI components

Customer account UI extensions declare their interface using supported UI components. Shopify renders the UI natively so it's performant, accessible, and works in all of customer account supported browsers.

Components are designed to be flexible, enabling you to layer and mix them to create highly-customized app extensions that feel seamless within the customer account experience. All components that will inherit a merchant's brand settings and the CSS cannot be altered or overridden.

To build customer account UI extensions, you can use checkout components, and customer account components.

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/api/checkout-ui-extensions/components)

[API ReferenceCheckout components](https://shopify.dev/api/checkout-ui-extensions/components)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/api/customer-account-ui-extensions/components)

[API ReferenceCustomer account components](https://shopify.dev/api/customer-account-ui-extensions/components)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://www.figma.com/community/file/1304881365343613949/checkout-and-account-components)

[UI ReferenceFigma UI kit](https://www.figma.com/community/file/1304881365343613949/checkout-and-account-components)

### Examples

* #### UI components

  ##### React

  ```tsx
  import {
    reactExtension,
    BlockStack,
    InlineStack,
    Button,
    Image,
    Text,
  } from '@shopify/ui-extensions-react/customer-account';

  reactExtension(
    'customer-account.order-status.block.render',
    () => <App />,
  );

  function App() {
    return (
      <InlineStack>
        <Image source="/url/for/image" />
        <BlockStack>
          <Text size="large">Heading</Text>
          <Text size="small">Description</Text>
        </BlockStack>
        <Button
          onPress={() => {
            console.log('button was pressed');
          }}
        >
          Button
        </Button>
      </InlineStack>
    );
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    BlockStack,
    Button,
    Image,
    InlineStack,
    Text,
  } from '@shopify/ui-extensions/customer-account';

  extension(
    'customer-account.order-status.block.render',
    (root) => {
      const inlineStack = root.createComponent(
        InlineStack,
        {},
        [
          root.createComponent(Image, {
            source: '/url/for/image',
          }),
          root.createComponent(BlockStack, {}, [
            root.createComponent(
              Text,
              {size: 'large'},
              'Heading',
            ),
            root.createComponent(
              Text,
              {size: 'small'},
              'Description',
            ),
          ]),
          root.createComponent(
            Button,
            {
              onPress: () => {
                console.log('button was pressed');
              },
            },
            'Button',
          ),
        ],
      );

      void root.appendChild(inlineStack);
    },
  );
  ```

![An animation of a card that contains an image, heading, description, and button, shifting and transforming into highly customized versions of the same UI to reflect each merchant's unique branding.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2024-10/ui-components.gif)

## Custom protocols

Custom protocols make it easier to navigate to common locations, and construct URLs.

Shopify protocol

Use the `shopify:customer-account` protocol when you want to construct a URL with a root of customer accounts.

Relative URLs

Relative URLs are relative to your extension and are useful when you want to link to a route in your extension.

Extension Protocol

Triggers a navigation to an extension using the `extension:` protocol. The handle is the handle of the extension that will be navigated to in the same application. Build a [full-page extension](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview#full-page-extension-target) to create a new page in customer accounts and handle the navigation.

### Examples

* #### shopify:customer-account

  ##### Link to Order Index page

  ```tsx
  <Link to="shopify:customer-account/orders" />
  ```

  ##### Fetch data

  ```js
  fetch(
    'shopify:customer-account/api/unstable/graphql.json',
    {
      method: 'POST',
      body: JSON.stringify(simpleOrderQuery),
    },
  );
  ```

## Security

Customer account UI extensions are a safe and secure way to customize the appearance and functionality of the customer account pages without compromising the security of customer data.

* They run in an isolated sandbox, separate from the customer account page and other UI extensions.
* They don't have access to sensitive payment information or the customer account page itself (HTML or other assets).
* They are limited to specific UI components and APIs that are exposed by the platform.
* They have limited access to [global web APIs](https://github.com/Shopify/ui-extensions/blob/unstable/documentation/runtime-environment.md).
* Apps that wish to access [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data), must submit an application and are subject to strict security guidelines and review proccesses by Shopify.

Constraints

You can't override the CSS for UI components. The customer account UI extension will always render the merchant's own branding as shown in the image in the UI components section above.

Customer account UI extensions don't have access to the DOM and can't return DOM nodes. They can't return `<div>` elements, for example. Building an arbitrary tree of HTML and loading additional scripts using script tags are also not supported.

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.engineering/remote-rendering-ui-extensibility)

[Learn moreRendering extensions](https://shopify.engineering/remote-rendering-ui-extensibility)

## Troubleshooting

Find an end-to-end guide to testing your extensions in [Testing customer account UI extensions](https://shopify.dev/docs/apps/customer-accounts/best-practices/testing-ui-extensions).

## Tutorials

Learn how to build customer account UI extensions using APIs and UI components.

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/apps/customer-accounts/build-inline-extensions/order-status)

[TutorialInline extensions](https://shopify.dev/docs/apps/customer-accounts/build-inline-extensions/order-status)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/apps/customer-accounts/order-action-menu-extensions/build-order-action-menu-extensions)

[TutorialOrder action menu extensions](https://shopify.dev/docs/apps/customer-accounts/order-action-menu-extensions/build-order-action-menu-extensions)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/apps/customer-accounts/full-page-extensions/build-full-page-extensions)

[TutorialFull-page extensions](https://shopify.dev/docs/apps/customer-accounts/full-page-extensions/build-full-page-extensions)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/apps/build/customer-accounts/metafields)

[TutorialBuilding metafield writes into extensions](https://shopify.dev/docs/apps/build/customer-accounts/metafields)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions/build-pre-auth-order-status-page-extensions)

[TutorialBuild Pre-auth Order Status page extensions](https://shopify.dev/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions/build-pre-auth-order-status-page-extensions)

## Resources

[![](https://shopify.dev/images/icons/32/star.png)![](https://shopify.dev/images/icons/32/star-dark.png)](https://shopify.dev/docs/apps/customer-accounts/best-practices/ux-guidelines)

[UX guidelines](https://shopify.dev/docs/apps/customer-accounts/best-practices/ux-guidelines)

[Best practices for designing consistent and useful customer account UI extensions.](https://shopify.dev/docs/apps/customer-accounts/best-practices/ux-guidelines)

[![](https://shopify.dev/images/icons/32/growth.png)![](https://shopify.dev/images/icons/32/growth-dark.png)](https://shopify.dev/docs/apps/customer-accounts)

[Tutorials](https://shopify.dev/docs/apps/customer-accounts)

[Learn how to build inline, full-page, or order action menu extensions in customer accounts.](https://shopify.dev/docs/apps/customer-accounts)

[![](https://shopify.dev/images/icons/32/globe.png)![](https://shopify.dev/images/icons/32/globe-dark.png)](https://shopify.dev/api/customer-account-ui-extensions/apis/localization)

[Localizing UI extensions](https://shopify.dev/api/customer-account-ui-extensions/apis/localization)

[Learn how to localize your customer account UI extension for international merchants and customers.](https://shopify.dev/api/customer-account-ui-extensions/apis/localization)