--- 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 --- # Build an inline order status UI extension Inline extensions are UI extensions that render after, before, or within a piece of UI, at [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 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. ![Inline extension OSP](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/customer-accounts/inline-extensions/order-status-extension-Dd9dS5QT.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 extension targets to display different interfaces to the customer. * Run the extensions locally and test them 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 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 ``` 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 order status block extension Set up the target for your customer account UI extension. [Extension targets](https://shopify.dev/docs/api/customer-account-ui-extensions/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 extension 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(, document.body); }; function PromotionBanner() { return ( 🎉 You've earned 1,000 points from this order. You've been upgraded to Platinum tier. View rewards ); } ``` ### Create a customer account UI extension for the order status fulfillment static extension 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 ``` 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 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` extension 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(, document.body); }; function CustomerFulfillmentDetailsDelivery() { return ( Tell us how we did for a chance to win 1000 points Write a review ); } ``` ### Build the order status block extension #### Build the UI Using Polaris web components, add a banner 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. [s-banner](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/feedback/banner)[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-link](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/actions/link)[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-order-status-block/src/PointsBlockExtension.jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function PromotionBanner() { return ( 🎉 You've earned 1,000 points from this order. You've been upgraded to Platinum tier. View rewards ); } ``` ### 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. *** [s-stack](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/structure/stack)[s-divider](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/structure/divider)[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-order-status-fulfillment/src/FulfillmentDelivery.jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function CustomerFulfillmentDetailsDelivery() { return ( Tell us how we did for a chance to win 1000 points Write a review ); } ``` ### 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 **Order status** page of a customer account to see your extension in action. *** ![Inline extension OSP](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/customer-accounts/inline-extensions/order-status-extension-Dd9dS5QT.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 ``` ## 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)