Build new pages in customer accounts

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.

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

This example code uses the customer-account.page.render target.

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.

Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.

Anchor to Create files for your targetsCreate files for your targets

Create a file in your extension's src directory for each of your targets. In this example, you'll create a file for the profile block extension and a file for the full-page extension. The filenames must match the module paths you specified.

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.

Anchor to Add the ,[object Object], extension target to your configuration fileAdd the customer-account.profile.block.render extension target to your configuration file

In your extension's configuration file, for the customer-account.profile.block.render 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.

Anchor to Create files for your targetsCreate files for your targets

Create a file in your extension's src directory for the extension target. In this example, you'll create a file for the profile 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.

Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.

Anchor to Fetch the customer's wishlistFetch the customer's wishlist

Create an asynchronous function to fetch the wishlist from your server, and invoke it within a side effect.

In this example, you'll retrieve the shop's first ten products from the Storefront API. In a production-ready application, first retrieve the customer's wishlist from your server, and then retrieve the product details from the Storefront API.

Anchor to Build the page UIBuild the page UI

In your full-page extension file, create a function to set up the page UI. To match the look and feel of the customer accounts experience, use the Page and ResourceItem components.

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 Add a link to your full-page extensionAdd a link to your full-page extension

In your profile block extension file, create a function to set up the link that routes to your full-page extension. Setting the to prop to extension:wishlist-extension-react/ instructs the router to navigate to the full-page extension that you created.

When navigating to a full-page extension from another extension within the same app, use the extension:$full-page-extension-handle/ protocol.

In a production-ready application, don't include this link in your extension. Instead, only publish the full-page extension. Merchants can add a link to it in the header navigation menu of their customer accounts experience.

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.

Anchor to Test the full-page extensionTest the full-page extension

1. Navigate to the profile page by clicking the dropdown in the top right corner of the customer account and selecting Profile.

2. Click the View wishlist link in the banner that you created.

You're taken to the full-page extension you created, which lists out the products that were added to the customer's wishlist.