Merchants have diverse needs and some use cases won't fit into extension targets on existing customer account pages. For example, to create extensions for popular use cases like loyalty programs, wishlists, subscriptions, returns, and exchanges, a separate page is required. In these cases, build a full-page extension. Full-page extensions render UI in a new page, below the header and above the footer.  ## How it works There are two full-page extension targets available: - [customer-account.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-page-render): Use this target if the page you’re building is not tied to a specific order. - [customer-account.order.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-order-page-render): Use this target if the page you’re building is tied to a specific order. Each full-page extension has a unique URL. You can build other extensions that link to a full-page extension URL. ### Allow or prevent direct linking Full-page extensions using the `customer-account.page.render` target allow direct linking by default. Merchants can add the link to these full-page extensions to their online store or customer account navigation menus. They can also copy the page URL and add it anywhere. The following video shows the merchant experience of adding a page to the customer account menu: <video title='Adding link to Customer Accounts Nav' aria-label='A video showing how merchants can add a full page extension to their customer account header' style="width: 100%; height: auto;" muted loop controls> <source src="/assets/apps/customer-accounts/full-page-extensions/allow-direct-linking.webm" type="video/webm" /> </video> To prevent direct linking, you can declare this intent using allow_direct_linking = false in your extension configuration file. <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="shopify.extension.toml"></script> <script type="text/plain" data-language="toml"> RAW_MD_CONTENT[[extensions.targeting]] module = "./src/FullPageExtension.jsx" target = "customer-account.page.render" [extensions.targeting.capabilities] allow_direct_linking = false END_RAW_MD_CONTENT</script> </div> </p> Full-page extensions using the `customer-account.order.page.render` target do not allow direct linking. Instead, you can create an [order action](/docs/apps/build/customer-accounts/order-action-extensions) or extend the [**Order status** page](/docs/apps/build/customer-accounts/order-status-page) to link to your full-page extension. ## Limitations Each extension can only extend the full-page extension target once. You can create multiple new pages by creating multiple extensions. We recommend dedicating one page per use case. A full-page extension target ([customer-account.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-page-render) or [customer-account.order.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-order-page-render)) cannot coexist with any other targets in the same extension. ## Developer tools and resources <div class="resource-card-grid"> <div> <a class="resource-card" href="/docs/api/customer-account-ui-extensions/extension-targets-overview" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/library" data-alt-src="/assets/resource-cards/library-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Target overview </h3> <p class="resource-card__description">Explore all extension targets available for customer account UI extensions.</p> </a> </div></p> <p><div> <a class="resource-card" href="/docs/api/customer-account-ui-extensions/components" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/blocks" data-alt-src="/assets/resource-cards/blocks-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Customer account UI extension components </h3> <p class="resource-card__description">Learn about the components that you can use to build customer account UI extensions.</p> </a> </div></p> <p><div> <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/components" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/blocks" data-alt-src="/assets/resource-cards/blocks-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Checkout UI extension components </h3> <p class="resource-card__description">Learn about the Checkout UI extension components that you can use to build customer account UI extensions.</p> </a> </div> </div> ## Next steps <div class="resource-card-grid"> <div> <a class="resource-card" href="/docs/apps/build/customer-accounts/full-page-extensions/build-new-pages" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/growth" data-alt-src="/assets/resource-cards/growth-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Build a full-page extension </h3> <p class="resource-card__description">Build a full-page extension for customers to manage a wishlist of products.</p> </a> </div> </div>