---
gid: 5675c7b5-96fb-4953-9e27-63a8aa671e18
title: Build Order status page inline extensions
description: Learn how to build Order status inline extensions by creating a loyalty app and integrating it into the order status page.
---

import CustomerAccountUiCreate from 'app/views/partials/apps/customer-accounts/ui-extensions/create.mdx'
import CustomerAccountUiPreview from 'app/views/partials/apps/customer-accounts/ui-extensions/preview.mdx'
import UiExtensionRequirements from 'app/views/partials/apps/customer-accounts/ui-extensions/requirements.mdx'

<Repo
  extension="react"
  href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react"
/>
<Repo
  extension="javascript"
  href="https://github.com/Shopify/customer-account-tutorials/tree/main/javascript/example-customer-account--loyalty-app--js"
/>

<Picker name="extension">
  <PickerOption name="react" />
  <PickerOption name="javascript" />
</Picker>

<Overview>

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

  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](/assets/apps/customer-accounts/inline-extensions/order-status-extension.png)

  ## What you'll learn

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

  - Create extensions that are rendered 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

</Overview>

<Requirements>
  <UiExtensionRequirements />
</Requirements>

<StepSection>
  <Step>
     ### Create a customer account UI extension for the order status block target

    <Substep>
      <CustomerAccountUiCreate />
    </Substep>
  </Step>
  <Step>
    ### Set up the target for your order status block extension
    Set up the target for your Customer account UI extension. [Targets](/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.block.render`
    <Substep>
      <CodeRef
          extension="react"
          tag="config.setup-targets"
          href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-block/shopify.extension.toml" />

      <CodeRef
        extension="javascript"
        tag="config.setup-targets"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-points-block-extension/shopify.extension.toml" />

      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.

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

    </Substep>
    <Substep>
      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.

      <CodeRef
        extension="react"
        tag="order-status-block.build-ui"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-block/src/PointsBlockExtension.tsx" />

      <CodeRef
        extension="javascript"
        tag="order-status-block.build-ui"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-points-block-extension/src/OrderStatusPageTitlePointsBlockExtension.js" />

        ---

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

        <Notice type="info">

          Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.
        </Notice>
    </Substep>
  </Step>
  <Step>
     ### Create a customer account UI extension for the order status fulfillment static target

    <Substep>
      <CustomerAccountUiCreate />
    </Substep>
  </Step>
  <Step>
    ### Set up the target for your order status static extension

    Set up the target for your Customer account UI extension. [Targets](/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`

    <Substep>

        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.

      <CodeRef
        extension="react"
        tag="config.setup-targets"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-fulfillment/shopify.extension.toml" />

      <CodeRef
        extension="javascript"
        tag="config.setup-targets"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-fulfillment-details-extension/shopify.extension.toml" />

    </Substep>
    <Substep>
      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](#reference-the-targets-in-your-configuration-file).

      <CodeRef
        extension="react"
        tag="order-status-static.build-ui"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-fulfillment/src/FulfillmentDelivery.tsx" />

      <CodeRef
        extension="javascript"
        tag="order-status-static.build-ui"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-fulfillment-details-extension/src/CustomerFulfillmentDetailsDelivery.js" />

        ---

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

        <Notice type="info">

          Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.
        </Notice>
    </Substep>
  </Step>
  <Step>
    ### Build the order status block extension

      <Substep>
      #### Build the UI

      <CodeRef
        extension="react"
        tag="order-status-block.build-ui"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-block/src/PointsBlockExtension.tsx" />


      <CodeRef
        extension="javascript"
        tag="order-status-block.build-ui"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-points-block-extension/src/OrderStatusPageTitlePointsBlockExtension.js" />

        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](/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](/docs/api/checkout-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.

        <Resources>
          [Banner](/docs/api/checkout-ui-extensions/latest/components/feedback/Banner)
          [BlockStack](/docs/api/checkout-ui-extensions/latest/components/structure/BlockStack)
          [TextBlock](/docs/api/checkout-ui-extensions/latest/components/titles-and-text/TextBlock)
          [Link](/docs/api/checkout-ui-extensions/latest/components/actions/link)
          [Button](/docs/api/checkout-ui-extensions/latest/components/actions/button)
      </Resources>
    </Substep>
  </Step>

    <Step>
    ### Build the order status static extension

      <Substep>
      #### Build the UI

       <CodeRef
      extension="react"
      tag="order-status-static.build-ui"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--loyalty-app--react/extensions/customer-account-loyalty-extension-order-status-fulfillment/src/FulfillmentDelivery.tsx" />

      <CodeRef
      extension="javascript"
      tag="order-status-static.build-ui"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--loyalty-app--js/extensions/customer-account-loyalty-fulfillment-details-extension/src/CustomerFulfillmentDetailsDelivery.js" />

        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.

          ---

          <Resources>
          [BlockStack](/docs/api/checkout-ui-extensions/latest/components/structure/BlockStack)
          [Divider](/docs/api/checkout-ui-extensions/latest/components/structure/BlockStack)
          [TextBlock](/docs/api/checkout-ui-extensions/latest/components/titles-and-text/TextBlock)
          [Button](/docs/api/checkout-ui-extensions/latest/components/actions/button)
        </Resources>
      </Substep>
  </Step>

  <Step>
    ### Preview the extension

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

    <Substep>
      <CustomerAccountUiPreview />
      Navigate to the **Order status** page of a customer account to see your extension in action.

          ---
          ![Inline extension OSP](/assets/apps/customer-accounts/inline-extensions/order-status-extension.png)

      ---

      <Notice type="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](/docs/apps/build/customer-accounts/test) in different placement references.
    </Notice>
    </Substep>
  </Step>
</StepSection>

<NextSteps>

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

  <CardGrid>
    <LinkCard href="/docs/apps/customer-accounts/best-practices/deciding-extension-placement">
      #### Extension placement
      Explore extension placement options and make informed decisions on where to position them.
    </LinkCard>

    <LinkCard href="/docs/apps/customer-accounts/best-practices/localizing-ui-extensions">
      #### Localize your extension
      Learn about localizing your customer account UI extensions for international merchants and customers.
    </LinkCard>

    <LinkCard href="/docs/api/customer-account-ui-extensions/targets">
      #### Extension targets
      Learn about the extension targets offered for customer accounts.
    </LinkCard>

     <LinkCard href="/docs/apps/customer-accounts/best-practices/ux-guidelines">
      #### UX guidelines
      Follow our UX guidelines for customer accounts to ensure a consistent and satisfying user experience.
    </LinkCard>

    <LinkCard href="/docs/api/customer-account-ui-extensions/components">
      #### Customer account components
      Learn about the components you can use to build customer account UI extensions.
    </LinkCard>

    <LinkCard href="/docs/api/checkout-ui-extensions/unstable/components">
       #### Checkout components
       Learn about the checkout components you can use to build customer account UI extensions.
    </LinkCard>
  </CardGrid>
</NextSteps>