---
gid: d5ced501-de16-4595-8894-0e739e48533b
title: Build for order action menus
description: Learn how to build order action menu extensions that allows customers to report issues with their orders.
---

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/tree/main/react/example-customer-account--order-action-menu--react"
/>
<Repo
  extension="javascript"
  href="https://github.com/Shopify/customer-account-tutorials/tree/main/javascript/example-customer-account--order-action-menu--js"
/>

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

<Overview>

  In this tutorial, you'll create an order action menu extension that allows customers to report problems with their orders.

  <video autoplay muted loop controls>
    <source src="/assets/apps/customer-accounts/order-action-menu-extensions/order-action-menu-extension.mp4" type="video/mp4" />
  </video>

  ## What you'll learn

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

  - Create an order action menu extension that opens a modal
  - Make an API call to the [Customer Account API](/docs/api/customer), to retrieve the order's fulfillments
  - Conditionally render the order action menu extension based on the order's fulfillment status
  - Conditionally alter the extension's behavior if the customer belongs to a company, for B2B
  - Run the extension locally and test it on a development store

</Overview>

<Requirements>
  <UiExtensionRequirements />
</Requirements>

<StepSection>
   <Step>
     ### Create a customer account UI extension
     <Substep>
      <CustomerAccountUiCreate />
    </Substep>
  </Step>

  <Step>
    ### Set up the targets for your extension

    Set up the targets 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.

    You'll use static extension targets to render a button in the Order index and **Order status** pages and to render a modal when the button is clicked.
    <Substep>

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

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


      #### Reference the targets in your configuration file

      This example code uses the following targets:

      <Resources>
        [customer-account.order.action.menu-item.render](/docs/api/customer-account-ui-extensions/latest/targets/order-action-menu/customer-account-order-action-menu-item-render)
        [customer-account.order.action.render](/docs/api/customer-account-ui-extensions/latest/targets/order-action-menu/customer-account-order-action-render)
      </Resources>

      In your extension's [`shopify.extension.toml`](/docs/apps/build/app-extensions/configure-app-extensions) configuration file, for each of the targets, 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.

      ---

      <Notice type="info">
        Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.
      </Notice>
    </Substep>

    <Substep>
      #### Create files for your targets

    <CodeRef
      extension="react"
      tag="menu-action.setup-target"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--order-action-menu--react/extensions/action-menu-extension-react/src/MenuActionExtension.tsx" />

    <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--order-action-menu--js/extensions/action-menu-extension-menu-action-extension/src/MenuActionExtension.js" />

      Create files in your extension's `src` directory for each of your targets.

      In this example, you'll create a file for the order action menu item extension and a file for the order action modal extension. The filenames must match the `module` [paths you specified](#reference-the-targets-in-your-configuration-file).

    </Substep>
  </Step>
  <Step>
    ### Build the order action menu item

    <Substep>
      #### Fetch the order's fulfillments
    <CodeRef
      extension="react"
      tag="menu-action.fetch-order-fulfillments"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--order-action-menu--react/extensions/action-menu-extension-react/src/MenuActionExtension.tsx" />

    <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--order-action-menu--js/extensions/action-menu-extension-menu-action-extension/src/MenuActionExtension.js" />

      Merchants might not want to allow customers to report a problem before at least some parts of an order are fulfilled. To determine the fulfillment status, retrieve the order's fulfillments from the [Customer Account API](/docs/api/customer).
      Make sure to fetch data before rendering the button the first time.
    </Substep>

     <Substep>
      #### Conditionally render the order action menu item based on the order's fulfillment status

      <CodeRef
      extension="react"
      tag="menu-action.conditionally-render"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--order-action-menu--react/extensions/action-menu-extension-react/src/MenuActionExtension.tsx" />

     <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--order-action-menu--js/extensions/action-menu-extension-menu-action-extension/src/MenuActionExtension.js" />

      Add a condition to render `null` if the order doesn't have any fulfillments.
    </Substep>

    <Substep>
      #### Render the button

      <CodeRef
      extension="react"
      tag="menu-action.render-button"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--order-action-menu--react/extensions/action-menu-extension-react/src/MenuActionExtension.tsx" />

      <CodeRef
      extension="javascript"
      tag="menu-action.render-button"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--order-action-menu--js/extensions/action-menu-extension-menu-action-extension/src/MenuActionExtension.js" />

      Now you'll render the order action button. The button isn't being passed a `to` or `onPress` prop. This is how we know to connect this button to the order action modal extension.

        ---

         ![Order action menu](/assets/apps/customer-accounts/report-problem-button.png)
    </Substep>
  </Step>

  <Step>
    ### Build the order action modal

    <Substep>
      #### Check if this is a B2B customer
    <CodeRef
      extension="react"
      tag="menu-action-modal.b2b-check"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--order-action-menu--react/extensions/action-menu-extension-react/src/MenuActionModalExtension.tsx" />

    <CodeRef
      extension="javascript"
      tag="menu-action-modal.b2b-check"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--order-action-menu--js/extensions/action-menu-extension-menu-action-extension/src/MenuActionModalExtension.js" />

      Add an extra option in the form's `Select` field options if the customer belongs to a company.
    </Substep>

    <Substep>
      #### Build the modal's UI
    <CodeRef
      extension="react"
      tag="menu-action-modal.build-ui"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--order-action-menu--react/extensions/action-menu-extension-react/src/MenuActionModalExtension.tsx" />

    <CodeRef
      extension="javascript"
      tag="menu-action-modal.build-ui"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--order-action-menu--js/extensions/action-menu-extension-menu-action-extension/src/MenuActionModalExtension.js" />

      Use `CustomerAccountAction` to extend the target. Here, you'll use `Form` and `Select` to display a list of reasons for reporting the order.

          ---
          ![Order action modal](/assets/apps/customer-accounts/report-problem-modal.png)
    </Substep>

    <Substep>
      #### Make an API call to store the reported problem
    <CodeRef
      extension="react"
      tag="menu-action-modal.on-submit"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--order-action-menu--react/extensions/action-menu-extension-react/src/MenuActionModalExtension.tsx" />

    <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--order-action-menu--js/extensions/action-menu-extension-menu-action-extension/src/MenuActionModalExtension.js" />

      The example code adds a timeout to fake an API call. In a production-ready application, make an API call to your server to store the reported problem.
    </Substep>
  </Step>
  <Step>
    ### Preview the extension

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

    <Substep>
      #### 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:
          <Codeblock terminal>
            ```bash
            shopify app dev
            ```
          </Codeblock>

      3. If prompted, select a development store.

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

      5. To install the app on your development store, click the **Install your app** link.

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

      The customer accounts experience opens.

      Test your conditional logic by submitting and fulfilling some orders. For example, the order action menu item should only display if the order has at least one fulfillment.

      ---

    </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 in customer account.
    </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>