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