---
title: Build an inline profile UI extension
description: Learn how to build inline profile UI extensions by creating a loyalty app and integrating it into the profile page.
source_url:
  html: https://shopify.dev/docs/apps/build/customer-accounts/inline-extensions/build-profile
  md: https://shopify.dev/docs/apps/build/customer-accounts/inline-extensions/build-profile.md
---

# Build an inline profile UI extension

Inline extensions render after, before, or within a piece of UI, at either [static](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) or [block](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview#block-extension-targets) extension targets on customer account pages.

In this tutorial, you'll build an extension for the customer **Profile** page that displays the total points earned.

![Inline extension in the Profile page with the PROFILE1 placement reference](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/customer-accounts/Profile-updated-placement-CTB9fti3.png)

## What you'll learn

In this tutorial, you'll learn how to do the following tasks:

* Create an extension that will be render on the **Profile** page
* Run the extension locally and test it on a development store

## Requirements

[Create a Partner account](https://www.shopify.com/partners)

[Create a development store](https://shopify.dev/docs/apps/tools/development-stores)

The development store should be pre-populated with [test data](https://shopify.dev/docs/api/development-stores/generated-test-data), including an order associated with the email address you'll use to log in to the customer account experience.

[Shopify CLI](https://shopify.dev/docs/apps/tools/cli/installation)

You'll need to use the [latest version of Shopify CLI](https://shopify.dev/docs/api/shopify-cli#upgrade).

[Scaffold an app](https://shopify.dev/docs/apps/build/scaffold-app)

Scaffold an app that uses Shopify CLI.

## Project

[View on GitHub](https://github.com/Shopify/customer-account-tutorials/tree/main/preact/example-customer-account--loyalty-app--preact)

### Create a customer account UI extension for the profile block target

To create a customer account UI extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

   ## Terminal

   ```terminal
   cd <directory>
   ```

2. Run the following command to create a new customer account UI extension:

   ## Terminal

   ```terminal
   shopify app generate extension --template customer_account_ui --name customer-account-ui-extension
   ```

   You should now have a new extension directory in your app's directory. The extension directory includes the extension script at `src/{FileName}.jsx`. The following is an example directory structure:

   ## Customer account UI extension file structure

   ```text
   └── my-app
   └── extensions
         └── my-customer-account-ui-extension
             ├── src
             │   └── CustomerAccount.jsx // The index page of the customer account UI extension
             ├── locales
             │   ├── en.default.json // The default locale for the customer account UI extension
             │   └── fr.json // The locale file for non-regional French translations
             ├── shopify.extension.toml // The config file for the customer account UI extension
             └── package.json
   ```

1) Start your development server to build and preview your app:

   ## Terminal

   ```terminal
   shopify app dev
   ```

   To learn about the processes that are executed when you run `dev`, refer to the [Shopify CLI command reference](https://shopify.dev/docs/api/shopify-cli/app/app-dev).

2) Press `p` to open the developer console. In the developer console page, click on the preview link for your extension.

### Set up the target for your extension

Set up the extension target for your customer account UI extension. [Extension targets](https://shopify.dev/docs/api/customer-account-ui-extensions/targets) control where your extension renders in the customer account flow.

The example code uses the following extension target:

`customer-account.profile.block.render`

In your extension's configuration file, for the `customer-account.profile.block.render` target, create an `[[extensions.targeting]]` section with the following information:

**`target`**: An identifier that specifies where you're injecting code into Shopify.

**`module`**: The path to the file that contains the extension code.

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-profile-block/shopify.extension.toml

```toml
api_version = "2025-10"


[[extensions]]
type = "ui_extension"
name = "ca-loyalty-profile-block"
handle = "ca-loyalty-profile-block"
uid = "80e9f109-e0c9-ab13-2c5a-e065beb9d2eb669d1292"


[[extensions.targeting]]
module = "./src/ProfileBlockExtension.jsx"
target = "customer-account.profile.block.render"


[extensions.capabilities]
api_access = true
```

Create a file in your extension's `src` directory for the target. In this example, you'll create a file for the profile block extension. Make sure that the name of the files match the `module` paths that you specified.

***

[`shopify.extension.toml`](https://shopify.dev/docs/apps/build/app-extensions/configure-app-extensions) is the configuration file for your extension.

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-profile-block/src/ProfileBlockExtension.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';


export default async () => {
  render(<ProfileBlockExtension />, document.body);
};


function ProfileBlockExtension() {
  const i18n = shopify.i18n;


  return (
    <s-section heading="Rewards">
      <s-stack direction="block" gap="base" paddingBlockStart="base">
        <s-grid gridTemplateColumns="1fr 1fr 1fr 1fr" gap="large">
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Points</s-text>
            <s-text type="strong">43,000</s-text>
          </s-stack>
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Store credit</s-text>
            <s-text type="strong">
              {i18n.formatCurrency(450, {currency: 'USD'})}
            </s-text>
          </s-stack>
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Referrals</s-text>
            <s-text type="strong">3</s-text>
          </s-stack>
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Referral bonus</s-text>
            <s-text type="strong">600</s-text>
          </s-stack>
        </s-grid>
        <s-stack direction="block" max-inline-size="140">
          <s-button tone="neutral" variant="secondary">
            View rewards
          </s-button>
        </s-stack>
      </s-stack>
    </s-section>
  );
}
```

### Build the profile block extension

#### Build the UI

Add a card to the customer account page that displays the customer's loyalty program information, using the `s-section` and other Polaris web components. In this example, the rewards information is hard-coded. In a production-ready application, you'd retrieve this information by making an API call to your server, or to the [Customer Account API](https://shopify.dev/docs/api/customer) if you're storing loyalty and rewards data in metafields.

While this is outside of the scope of this tutorial, the example also adds a **View rewards** button, which you could link to a full-page extension that displays the customer's rewards information in more detail.

***

Customer account UI extensions are limited to specific UI components exposed by the platform [for security reasons](https://shopify.dev/docs/api/customer-account-ui-extensions#security). Polaris web components allow you to create a UI that feels seamless within the checkout experience, and that inherits a merchant's brand settings.

[s-section](https://shopify.dev/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section)[s-stack](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/structure/stack)[s-text](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/titles-and-text/text)[s-button](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/actions/button)

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-profile-block/src/ProfileBlockExtension.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';


export default async () => {
  render(<ProfileBlockExtension />, document.body);
};


function ProfileBlockExtension() {
  const i18n = shopify.i18n;


  return (
    <s-section heading="Rewards">
      <s-stack direction="block" gap="base" paddingBlockStart="base">
        <s-grid gridTemplateColumns="1fr 1fr 1fr 1fr" gap="large">
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Points</s-text>
            <s-text type="strong">43,000</s-text>
          </s-stack>
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Store credit</s-text>
            <s-text type="strong">
              {i18n.formatCurrency(450, {currency: 'USD'})}
            </s-text>
          </s-stack>
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Referrals</s-text>
            <s-text type="strong">3</s-text>
          </s-stack>
          <s-stack direction="block" gap="small">
            <s-text color="subdued">Referral bonus</s-text>
            <s-text type="strong">600</s-text>
          </s-stack>
        </s-grid>
        <s-stack direction="block" max-inline-size="140">
          <s-button tone="neutral" variant="secondary">
            View rewards
          </s-button>
        </s-stack>
      </s-stack>
    </s-section>
  );
}
```

### Preview the extension

Preview your extension to make sure that it works as expected.

#### Start your server

Run the Shopify CLI `dev` command to build your app and preview it on your development store.

1. In a terminal, navigate to your app directory.

2. Either start or restart your server to build and preview your app:

   ## Terminal

   ```bash
   shopify app dev
   ```

3. If prompted, select a development store.

4. Press `p` to open the developer console.

5. In the developer console page, click the preview link for one of your extension targets.

The customer accounts experience opens.

Navigate to the **Profile** page of a customer account to see your extension in action.

***

![Inline extension Profile](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/customer-accounts/Profile-ysGIgDX-.png)

Info

On the **Profile** page, your UI extension's block first displays at the top of the page, between the navigation header and the page title. By default, blocks are placed in the first available placement reference.

Visually this extension should not be rendered before the heading of the page, and it should instead render in the next placement reference on the page. In a production-ready situation, merchants move this extension to the right location using the checkout editor. To test this, you can add the `?placement-reference=PROFILE1` query parameter to the URL of the **Profile** page. This moves the extension the next placement reference on the page.

Learn more about [testing UI extensions](https://shopify.dev/docs/apps/build/customer-accounts/test) in different placement references.

![Inline extension in the Profile page with the PROFILE1 placement reference](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/customer-accounts/Profile-updated-placement-CTB9fti3.png)

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-profile-block/shopify.extension.toml

```toml
api_version = "2025-10"


[[extensions]]
type = "ui_extension"
name = "ca-loyalty-profile-block"
handle = "ca-loyalty-profile-block"
uid = "80e9f109-e0c9-ab13-2c5a-e065beb9d2eb669d1292"


[[extensions.targeting]]
module = "./src/ProfileBlockExtension.jsx"
target = "customer-account.profile.block.render"


[extensions.capabilities]
api_access = true
```

## Tutorial complete!

Nice work - what you just built could be used by Shopify merchants around the world! Keep the momentum going with these related tutorials and resources.

### Next Steps

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/apps/customer-accounts/best-practices/deciding-extension-placement)

[Extension placement](https://shopify.dev/docs/apps/customer-accounts/best-practices/deciding-extension-placement)

[Explore extension placement options and make informed decisions on where to position them.](https://shopify.dev/docs/apps/customer-accounts/best-practices/deciding-extension-placement)

[![](https://shopify.dev/images/icons/32/globe.png)![](https://shopify.dev/images/icons/32/globe-dark.png)](https://shopify.dev/docs/apps/customer-accounts/best-practices/localizing-ui-extensions)

[Localize your extension](https://shopify.dev/docs/apps/customer-accounts/best-practices/localizing-ui-extensions)

[Learn about localizing your customer account UI extensions for international merchants and customers.](https://shopify.dev/docs/apps/customer-accounts/best-practices/localizing-ui-extensions)

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

[Extension targets](https://shopify.dev/docs/api/customer-account-ui-extensions/targets)

[Learn about the extension targets offered for customer accounts.](https://shopify.dev/docs/api/customer-account-ui-extensions/targets)

[![](https://shopify.dev/images/icons/32/heart.png)![](https://shopify.dev/images/icons/32/heart-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)

[Follow our UX guidelines for customer accounts to ensure a consistent and satisfying user experience.](https://shopify.dev/docs/apps/customer-accounts/best-practices/ux-guidelines)

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

[Polaris web components](https://shopify.dev/docs/api/customer-account-ui-extensions/polaris-web-components)

[Learn about the components you can use to build customer account UI extensions.](https://shopify.dev/docs/api/customer-account-ui-extensions/polaris-web-components)