--- gid: 1437028d-fcff-4cb2-9367-828518eba670 title: Build new pages in customer accounts description: Learn how to build a full-page extension for customer wishlists, using Customer account UI extensions. --- 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' Full-page extensions enable you to create a page within the customer account experience while preserving a merchant's branding. In this tutorial, you'll learn how to create a standalone full-page extension that customers can access without leaving their account or needing to log in again. ## What you'll learn In this tutorial, you'll learn how to do the following tasks: - Create a full-page extension in customer accounts - Create a full-page extension entry point to test your full-page extension - Use UI components like [`Page`](/docs/api/customer-account-ui-extensions/latest/components/page) and [`ResourceItem`](/docs/api/customer-account-ui-extensions/latest/components/resourceitem) to build a page for customer wishlists - Query the [Storefront API](/docs/api/storefront) to retrieve a list of products - Navigate to your full-page extension - Run the extension locally and test it on a development store ### Create a customer account UI extension for the full-page target ### Set up the target for your full-page 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 account. A full-page extension target cannot coexist with any other targets in the same extension. In this example, you'll create a page that lists products that were added to a customer's wishlist, and a link to that page. #### Reference the targets in your configuration file This example code uses the `customer-account.page.render` target. 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. --- Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect. [customer-account.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-page-render) #### Create 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](#reference-the-targets-in-your-configuration-file). ### Create a customer account UI extension for the full-page entry point for testing Create an extension so we can define an entry point to the full-page extension we just created. ### Set up the target for your entry point 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 `customer-account.profile.block.render` target #### Add the customer-account.profile.block.render target to your configuration file In your extension's configuration file, for the `customer-account.profile.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. #### Create files for your targets Create a file in your extension's `src` directory for the 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](#reference-the-targets-in-your-configuration-file). [shopify.extension.toml](/docs/apps/build/app-extensions/configure-app-extensions) 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. [customer-account.profile.block.render](/docs/api/customer-account-ui-extensions/targets/profile-(default)/customer-account-profile-block-render) ### Build the full-page extension #### Fetch 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](/docs/api/storefront). In a production-ready application, first retrieve the customer's wishlist from your server, and then retrieve the product details from the Storefront API. #### Build 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. --- ![Full-page extension](/assets/apps/customer-accounts/full-page-extensions/wishlist.png) 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. [Page](/docs/api/customer-account-ui-extensions/components/Page) [Grid](/docs/api/checkout-ui-extensions/components/structure/grid) [ResourceItem](/docs/api/customer-account-ui-extensions/components/ResourceItem) [Image](/docs/api/checkout-ui-extensions/components/media/Image) [BlockStack](/docs/api/checkout-ui-extensions/components/structure/BlockStack) [TextBlock](/docs/api/checkout-ui-extensions/components/titles-and-text/TextBlock) [InlineLayout](/docs/api/checkout-ui-extensions/components/structure/InlineLayout) [Button](/docs/api/checkout-ui-extensions/components/actions/button) ### Add 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. --- ![Full page extension entry point](/assets/apps/customer-accounts/full-page-extensions/banner.png) When navigating to a full-page extension from another extension within the same app, you need to 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. [Card](/docs/api/customer-account-ui-extensions/components/card) [Link](/docs/api/checkout-ui-extensions/components/actions/link) [Text](/docs/api/checkout-ui-extensions/components/titles-and-text/text) ### Preview and test the extension Preview your extension to make sure that it works as expected. #### Test 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. --- ![Full-page extension](/assets/apps/customer-accounts/full-page-extensions/wishlist.png) ## 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 #### Extension placement Explore extension placement options and make informed decisions on where to position them. #### Localize your extension Learn about localizing your customer account UI extensions for international merchants and customers. #### Extension targets Learn about the extension targets offered for customer accounts. #### UX guidelines Follow our UX guidelines for customer accounts to ensure a consistent and satisfying user experience. #### Customer account components Learn about the components you can use to build customer account UI extensions. #### Editor extension collections Learn how to create editor extension collections to group related extensions. #### Checkout components Learn about the checkout components you can use to build customer account UI extensions.