---
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'
<Repo
extension="react"
href="https://github.com/Shopify/customer-account-tutorials/tree/main/react/example-customer-account--wishlist--react"
/>
<Repo
extension="javascript"
href="https://github.com/Shopify/customer-account-tutorials/tree/main/javascript/example-customer-account--wishlist--js"
/>
<Picker name="extension">
<PickerOption name="react" />
<PickerOption name="javascript" />
</Picker>
<Overview>
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.
<video title='Wishlist extension video' aria-label='A banner at the top of the Profile page that says “Grow your garden with more plants from your wishlist.” Clicking “View wishlist” goes to a full-page extension that shows all of the products on the customer’s wishlist.
'autoplay muted loop controls>
<source src="/assets/custom-storefronts/hydrogen/building/full-page-video.mp4" type="video/mp4" />
<source src="/assets/apps/customer-accounts/full-page-extensions/full-page-video.webm" type="video/webm" />
</video>
## 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
</Overview>
<Requirements>
<UiExtensionRequirements />
</Requirements>
<StepSection>
<Step>
### Create a customer account UI extension for the full-page target
<Substep>
<CustomerAccountUiCreate />
</Substep>
</Step>
<Step>
### 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.
<Substep>
<CodeRef
extension="react"
tag="config.setup-targets"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/customer-account-wishlist-extension/shopify.extension.toml" />
<CodeRef
extension="javascript"
tag="config.setup-targets"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/customer-account-wishlist-full-page-extension/shopify.extension.toml" />
#### 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.
<Resources>
[customer-account.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-page-render)
</Resources>
</Substep>
<Substep>
#### Create files for your targets
<CodeRef
extension="react"
tag="full-page.setup-target"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/customer-account-wishlist-extension/src/FullPageExtension.tsx" />
<CodeRef
extension="javascript"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/customer-account-wishlist-full-page-extension/src/FullPageExtension.js" />
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).
</Substep>
</Step>
<Step>
### 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.
<Substep>
<CustomerAccountUiCreate />
</Substep>
</Step>
<Step>
### 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
<Substep>
#### Add the customer-account.profile.block.render target to your configuration file
<CodeRef
extension="react"
tag="config.setup-targets"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/wishlist-profile-block/shopify.extension.toml" />
<CodeRef
extension="javascript"
tag="config.setup-targets"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/customer-account-wishlist-profile-block-extension/shopify.extension.toml" />
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.
</Substep>
<Substep>
#### 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).
<CodeRef
extension="react"
tag="block.build-ui"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/wishlist-profile-block/src/ProfileBlockExtension.tsx" />
<CodeRef
extension="javascript"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/customer-account-wishlist-profile-block-extension/src/ProfileBlockExtension.js" />
[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.
<Resources>
[customer-account.profile.block.render](/docs/api/customer-account-ui-extensions/targets/profile-(default)/customer-account-profile-block-render)
</Resources>
</Substep>
</Step>
<Step>
### Build the full-page extension
<Substep>
#### Fetch the customer's wishlist
<CodeRef
extension="react"
tag="full-page.fetch-wishlist"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/customer-account-wishlist-extension/src/FullPageExtension.tsx" />
<CodeRef
extension="javascript"
tag="full-page.fetch-wishlist"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/customer-account-wishlist-full-page-extension/src/FullPageExtension.js" />
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.
</Substep>
<Substep>
#### Build the page UI
<CodeRef
extension="react"
tag="full-page.build-ui"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/customer-account-wishlist-extension/src/FullPageExtension.tsx" />
<CodeRef
extension="javascript"
tag="full-page.build-ui"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/customer-account-wishlist-full-page-extension/src/FullPageExtension.js" />
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.
<Resources>
[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)
</Resources>
</Substep>
</Step>
<Step>
<Substep>
### Add a link to your full-page extension
<CodeRef
extension="react"
tag="block.build-ui"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/wishlist-profile-block/src/ProfileBlockExtension.tsx" />
<CodeRef
extension="javascript"
tag="block.build-ui"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/customer-account-wishlist-profile-block-extension/src/ProfileBlockExtension.js" />
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.
<Resources>
[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)
</Resources>
</Substep>
</Step>
<Step>
### Preview and test the extension
Preview your extension to make sure that it works as expected.
<Substep>
<CustomerAccountUiPreview />
</Substep>
<Substep>
#### 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.
---
</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 for customer accounts.
</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/apps/build/customer-accounts/editor-extension-collections">
#### Editor extension collections
Learn how to create editor extension collections to group related 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>