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

# Build an inline order status UI extension

Inline extensions are UI extensions that render after, before, or within a piece of UI, at [targets](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets) on customer account pages.

In this tutorial, you'll build two extensions for the **Order status** page: one that displays the loyalty points earned for a specific order, and one that encourages customers to write a review.

![A preview of the inline UI extension rendered on the Order status page of a customer account.](https://shopify.dev/assets/assets/images/apps/customer-accounts/inline-extensions/build-order-status-B-lJTYe1.png)

## What you'll learn

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

* Create inline extensions that display on the **Order status** page.
* Use multiple targets to display different interfaces to the customer.
* Run the extensions locally and test them on a dev store.

## Requirements

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

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

The development store should be pre-populated with [test data](https://shopify.dev/docs/apps/build/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 order status 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 Dev Console.

3) In the extension list for your app, click on the preview link for your extension.

### Set up the target for your order status block extension

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

The example code uses the following target:

`customer-account.order-status.block.render`

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

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

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

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

```toml
api_version = "2025-10"


[[extensions]]
name = "ca-loyalty-order-status-block"
handle = "ca-loyalty-order-status-block"
type = "ui_extension"
uid = "e0260bd4-f328-fedf-994f-bfeb7e42f14a9089f017"


[[extensions.targeting]]
module = "./src/PointsBlockExtension.jsx"
target = "customer-account.order-status.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 order status 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-order-status-block/src/PointsBlockExtension.jsx

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


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


function PromotionBanner() {
  return (
    <s-banner tone="success">
      <s-stack direction="block" inline-alignment="center">
        <s-text>
          🎉 You've earned 1,000 points from this order. You've been upgraded to
          Platinum tier. <s-link>View rewards</s-link>
        </s-text>
      </s-stack>
    </s-banner>
  );
}
```

### Create a customer account UI extension for the order status fulfillment static 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 Dev Console.

3) In the extension list for your app, click on the preview link for your extension.

### Set up the target for your order status static extension

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

The example code uses the following target:

`customer-account.order-status.fulfillment-details.render-after`

In your extension's configuration file, for the `customer-account.order-status.fulfillment-details.render-after` 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-order-status-fulfillment/shopify.extension.toml

```toml
api_version = "2025-10"


[[extensions]]
uid = "9a9cc029-b449-d82d-d072-f613da8fa52aa33c4be4"
type = "ui_extension"
name = "ca-loyalty-order-status-fulfillment"
handle = "ca-loyalty-order-status-fulfillment"


[[extensions.targeting]]
module = "./src/FulfillmentDelivery.jsx"
target = "customer-account.order-status.fulfillment-details.render-after"


[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 order status fulfillment static 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-order-status-fulfillment/src/FulfillmentDelivery.jsx

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


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


function CustomerFulfillmentDetailsDelivery() {
  return (
    <s-stack direction="block" gap="base">
      <s-divider />
      <s-text>Tell us how we did for a chance to win 1000 points</s-text>
      <s-stack direction="block" max-inline-size="150">
        <s-button>Write a review</s-button>
      </s-stack>
    </s-stack>
  );
}
```

### Build the order status block extension

#### Build the UI

Using web components, add a banner component to the **Order status** page to let the customer know how many points they've earned for the order.

In this example, the number of points is hardcoded. 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 points in metafields.

Similar to the profile block, the example adds a **View rewards** link, 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). You can use checkout UI components and customer account UI components to create a UI that feels seamless within the customer accounts experience, and that inherits a merchant's brand settings.

[Banner](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/feedback-and-status-indicators/banner) [Stack](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack) [Text](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/text) [Link](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/link) [Button](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button)

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-order-status-block/src/PointsBlockExtension.jsx

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


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


function PromotionBanner() {
  return (
    <s-banner tone="success">
      <s-stack direction="block" inline-alignment="center">
        <s-text>
          🎉 You've earned 1,000 points from this order. You've been upgraded to
          Platinum tier. <s-link>View rewards</s-link>
        </s-text>
      </s-stack>
    </s-banner>
  );
}
```

### Build the order status static extension

#### Build the UI

Add some content inside the fulfillment details card to encourage customers to provide a review in exchange for loyalty points.

While this is outside of the scope of this tutorial, the example includes a **Write a review** button, which you could link to modal that contains a form for the customer to submit their review.

***

[Stack](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack) [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/divider) [Text](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/text) [Button](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button)

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-order-status-fulfillment/src/FulfillmentDelivery.jsx

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


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


function CustomerFulfillmentDetailsDelivery() {
  return (
    <s-stack direction="block" gap="base">
      <s-divider />
      <s-text>Tell us how we did for a chance to win 1000 points</s-text>
      <s-stack direction="block" max-inline-size="150">
        <s-button>Write a review</s-button>
      </s-stack>
    </s-stack>
  );
}
```

### 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 Dev Console.

5. In the extension list for your app, click on the preview link for your extension.

The customer accounts experience opens.

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

***

![A preview of the inline UI extension rendered on the Order status page of a customer account.](https://shopify.dev/assets/assets/images/apps/customer-accounts/inline-extensions/build-order-status-B-lJTYe1.png)

***

**Info:**

By default, block extensions are placed in the first available placement reference.

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=ORDER_SUMMARY1` query parameter to the URL of the **Order status** 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.

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

```toml
api_version = "2025-10"


[[extensions]]
name = "ca-loyalty-order-status-block"
handle = "ca-loyalty-order-status-block"
type = "ui_extension"
uid = "e0260bd4-f328-fedf-994f-bfeb7e42f14a9089f017"


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


[extensions.capabilities]
api_access = true
```

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-order-status-block/src/PointsBlockExtension.jsx

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


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


function PromotionBanner() {
  return (
    <s-banner tone="success">
      <s-stack direction="block" inline-alignment="center">
        <s-text>
          🎉 You've earned 1,000 points from this order. You've been upgraded to
          Platinum tier. <s-link>View rewards</s-link>
        </s-text>
      </s-stack>
    </s-banner>
  );
}
```

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-order-status-fulfillment/shopify.extension.toml

```toml
api_version = "2025-10"


[[extensions]]
uid = "9a9cc029-b449-d82d-d072-f613da8fa52aa33c4be4"
type = "ui_extension"
name = "ca-loyalty-order-status-fulfillment"
handle = "ca-loyalty-order-status-fulfillment"


[[extensions.targeting]]
module = "./src/FulfillmentDelivery.jsx"
target = "customer-account.order-status.fulfillment-details.render-after"


[extensions.capabilities]
api_access = true
```

## /preact/example-customer-account--loyalty-app--preact/extensions/ca-loyalty-order-status-fulfillment/src/FulfillmentDelivery.jsx

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


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


function CustomerFulfillmentDetailsDelivery() {
  return (
    <s-stack direction="block" gap="base">
      <s-divider />
      <s-text>Tell us how we did for a chance to win 1000 points</s-text>
      <s-stack direction="block" max-inline-size="150">
        <s-button>Write a review</s-button>
      </s-stack>
    </s-stack>
  );
}
```

## 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

[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)

[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)

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

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

[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)

[Web components\
\
](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components)

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