Build an inline order status UI extension

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

   Copy

   $

   $

   cd <directory>

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

   Terminal

   Copy

   $

   $

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

3. Select a language for your extension. You can choose from TypeScript, JavaScript, TypeScript React, or JavaScript React.

   Tip

   TypeScript or JavaScript is suitable for smaller projects that require a more straightforward API. TypeScript React or JavaScript React is suitable when you want an easy model for mapping state updates to UI updates. With JavaScript or TypeScript, you need to map state updates yourself. This process is similar to writing an application targeting the DOM, versus using react-dom.

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

   Customer account UI extension file structure

   Copy

   99

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   └── my-app

   └── extensions

   └── my-customer-account-ui-extension

   ├── src

   │ └── CustomerAccount.jsx OR CustomerAccount.js // 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

   Copy

   $

   $

   shopify app dev

   To learn about the processes that are executed when you run dev, refer to the Shopify CLI command reference.

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

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.

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 is the configuration file for your extension.

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

   Copy

   $

   $

   cd <directory>

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

   Terminal

   Copy

   $

   $

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

3. Select a language for your extension. You can choose from TypeScript, JavaScript, TypeScript React, or JavaScript React.

   Tip

   TypeScript or JavaScript is suitable for smaller projects that require a more straightforward API. TypeScript React or JavaScript React is suitable when you want an easy model for mapping state updates to UI updates. With JavaScript or TypeScript, you need to map state updates yourself. This process is similar to writing an application targeting the DOM, versus using react-dom.

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

   Customer account UI extension file structure

   Copy

   99

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   └── my-app

   └── extensions

   └── my-customer-account-ui-extension

   ├── src

   │ └── CustomerAccount.jsx OR CustomerAccount.js // 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

   Copy

   $

   $

   shopify app dev

   To learn about the processes that are executed when you run dev, refer to the Shopify CLI command reference.

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

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.

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 is the configuration file for your extension.

Anchor to Build the UIBuild the UI

Using checkout UI extension 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 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. 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.

Anchor to Build the UIBuild 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.

Anchor to Start your serverStart 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

   Copy

   9

   1

   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.