Add pages to customer accounts

Feature preview

Customer accounts are getting layout and design updates. Enable the Customer account improvements feature preview to get early access. Review the feature preview overview and where extension targets will render in the new layout.

Merchants have diverse needs and some use cases won't fit into 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. By default, full-page extensions will use the full page width, but you can align your page width to the narrow native pages by wrapping your full page extension using one of the code snippets below.

Anchor to Remote UI (2025-07 and earlier):Remote UI (2025-07 and earlier):

{/* full page extension */}

</Grid>

Anchor to Web components (2025-10 and later):Web components (2025-10 and later):

<s-grid gridTemplateColumns="minmax(auto, 640px)" justifyContent="center">

</s-grid>

Anchor to Full-page extension (Default width)Full-page extension (Default width)

Diagram of customer accounts showing where full-page extension targets render on the page, using the default width.

Anchor to Full-page extension (Narrow width)Full-page extension (Narrow width)

Adapt your full page extension to use the narrow width by following these instructions.

Diagram of customer accounts showing where full-page extension targets render on the page, using the narrow width.

Anchor to How it worksHow it works

There are two full-page targets available:

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

Anchor to Allow or prevent direct linkingAllow 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:

To prevent direct linking, specify using allow_direct_linking = false in your extension configuration file.

shopify.extension.toml

[[extensions.targeting]]

module = "./src/FullPageExtension.jsx"

target = "customer-account.page.render"

[extensions.targeting.capabilities]

allow_direct_linking = false

Full-page extensions using the customer-account.order.page.render target do not allow direct linking. To link to your full-page extension, create an order action extension or inline extension on the Order status page.

Anchor to LimitationsLimitations

Each extension can only extend the full-page target once. You can create multiple new pages by creating multiple extensions. It's best to use one page per use case.

A full-page target (customer-account.page.render or customer-account.order.page.render) cannot coexist with any other targets in the same extension.

Anchor to Developer tools and resourcesDeveloper tools and resources

Targets overview

Explore all targets available for customer account UI extensions.

Web components

Learn about the components that you can use to build customer account UI extensions.

Anchor to Next stepsNext steps

Build a full-page extension

Build a full-page extension for customers to manage a wishlist of products.

Was this page helpful?