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

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

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

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