Build for order action menus

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

   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

   Copy

   99

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

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

   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 app’s shopify.app.toml file, include the required access scopes. The example code needs the customer_read_orders access scope to read the ORDER resource with the GraphQL Admin API.

To read on the CUSTOMER and ORDER resources using the Customer Account API, the customer_read_customers and customer_read_orders scopes will be required.

Anchor to Reference the extension targets in your configuration fileReference the extension targets in your configuration file

This example code uses the following targets:

In your extension's shopify.extension.toml 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.

Anchor to Create files for your targetsCreate files for your targets

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 extension and a file for the order action modal extension. The filenames must match the module paths you specified.

Anchor to Fetch the order's fulfillmentsFetch the order's fulfillments

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. Make sure to fetch data before rendering the button the first time.

Anchor to Conditionally render the order action menu item, based on the order's fulfillment statusConditionally render the order action menu item, based on the order's fulfillment status

Add a condition to render null if the order doesn't have any fulfillments.

Anchor to Render the buttonRender the button

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.

Anchor to Check if this is a B2B customerCheck if this is a B2B customer

Add an extra option in the s-select field options if the customer belongs to a company.

Anchor to Build the modal's UIBuild the modal's UI

Use s-customer-account-action to extend the target. Here, you'll use s-select to display a list of reasons for reporting the order.

Anchor to Make an API call to store the reported problemMake an API call to store the reported problem

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.

Anchor to Start your serverStart your server

Run the Shopify CLI dev command to build your app and preview it on your dev 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 dev store.

4. Press p to open the developer console.

5. To install the app on your dev 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.