---
title: Full page
description: >-
Full-page extensions allow you to create new pages in customer accounts. They
render in the main content area, below the header and above the footer.
api_version: 2026-04
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/full-page
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/full-page.md
---
# Full page
**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](https://shopify.dev/docs/apps/build/customer-accounts/feature-preview-customer-account-improvements) and [where extension targets will render](https://shopify.dev/docs/apps/build/customer-accounts/feature-preview-customer-account-improvements#extension-targets-by-page) in the new layout.
Full-page extensions allow you to create entirely new pages in customer accounts. They render in the main content area, below the header, and above the footer.
By default, when a merchant adds a full-page extension in the checkout and accounts editor, they're prompted to add it to the customer account header menu. Use the [page](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/layout-and-structure/page) component as the main container for placing content in your full-page extension.
### Use cases
* **Wishlist**: Build a dedicated page where customers can view and manage their saved products.
* **Loyalty program**: Display loyalty points, rewards tiers, and redemption options on a custom page.
* **Return requests**: Create an order-specific page where customers can initiate and manage product returns.
* **Subscription management**: Allow customers to view and manage their product subscriptions on a dedicated page.
* **Custom order views**: Build order-specific pages that display supplementary information such as warranty details or installation instructions.
***
## Full page targets
Full-page extensions support [custom protocols](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#custom-protocols) and the [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/platform-apis/navigation-api) for in-extension routing.
**Note:**
A full-page extension target can't coexist with any other targets in the same extension. Each full-page extension must be defined in a separate `[[extensions.targeting]]` entry in your [TOML configuration](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#configuration).
### Customer account full page target
`customer-account.page.render`
Renders a full-page extension in the main content area of customer accounts. Use this target for pages that aren't tied to a specific order, such as a wishlist or loyalty program page.
### Support Components (62) APIs (14)
### Supported components
* [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation)
* [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement)
* [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip)
* [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item)
* [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox)
* [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field)
* [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action)
* [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker)
* [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details)
* [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image)
* [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group)
* [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link)
* [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map)
* [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu)
* [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal)
* [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list)
* [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page)
* [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field)
* [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon)
* [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field)
* [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover)
* [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button)
* [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail)
* [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress)
* [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code)
* [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container)
* [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box)
* [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select)
* [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet)
* [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph)
* [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch)
* [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field)
* [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time)
* [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip)
* [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list)
* [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field)
### Available APIs
* [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api)
* [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api)
* [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api)
* [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api)
* [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api)
* [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api)
* [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api)
* [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api)
* [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api)
* [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api)
* [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api)
* [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api)
* [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api)
* [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api)
Examples
### Examples
* ####
##### Description
Create a full-page extension that displays a wishlist. This example uses \[page]\(/docs/api/customer-account-ui-extensions/latest/polaris-web-components/layout-and-structure/page) as the main container with a heading, subheading, and a primary action button that navigates back to the customer account.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default async () => {
render(, document.body);
};
function Extension() {
return (
navigation.navigate('shopify:customer-account/')}
>
Back to account
Save items from the store to keep track of products you love.
No saved items yet
Browse the store and save items to your wishlist.
);
}
```
* ####
##### Description
Build a full-page extension with multiple routes using the \[Navigation API]\(/docs/api/customer-account-ui-extensions/latest/target-apis/platform-apis/navigation-api). Use \`navigation.navigate()\` to move between routes within the extension, and \`navigation.currentEntry\` to determine the current route.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useReducer, useEffect} from 'preact/hooks';
export default async () => {
render(, document.body);
};
function useNavigationCurrentEntry() {
const [entry, update] = useReducer(
() => navigation.currentEntry,
navigation.currentEntry,
);
useEffect(() => {
navigation.addEventListener('currententrychange', update);
return () => navigation.removeEventListener('currententrychange', update);
}, []);
return entry;
}
function Extension() {
const currentEntry = useNavigationCurrentEntry();
const currentPath = new URL(currentEntry.url).pathname;
if (currentPath.endsWith('/settings')) {
return (
navigation.navigate('extension://')}
>
Back
Manage your subscription preferences here.
);
}
return (
Manage your active subscriptions.
navigation.navigate('extension://settings')}
>
Subscription settings
);
}
```
### Order-specific full page target
`customer-account.order.page.render`
Renders a full-page extension tied to a specific order in the main content area of customer accounts. Use this target for pages like return requests or warranty details. This target gives you access to order details through `shopify.order`, as well as line items through `shopify.lines`.
### Support Components (62) APIs (29)
### Supported components
* [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation)
* [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement)
* [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar)
* [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button)
* [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group)
* [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox)
* [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip)
* [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable)
* [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip)
* [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item)
* [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox)
* [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field)
* [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action)
* [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker)
* [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details)
* [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider)
* [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone)
* [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field)
* [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form)
* [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid)
* [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading)
* [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image)
* [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group)
* [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link)
* [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map)
* [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu)
* [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal)
* [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field)
* [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field)
* [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list)
* [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page)
* [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph)
* [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field)
* [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon)
* [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field)
* [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover)
* [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button)
* [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail)
* [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress)
* [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code)
* [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container)
* [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box)
* [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section)
* [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select)
* [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet)
* [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph)
* [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch)
* [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text)
* [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field)
* [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time)
* [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip)
* [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list)
* [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field)
### Available APIs
* [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api)
* [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api)
* [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api)
* [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api)
* [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api)
* [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api)
* [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api)
* [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api)
* [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api)
* [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api)
* [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api)
* [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api)
* [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api)
* [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api)
* [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api)
* [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api)
* [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api)
* [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api)
* [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api)
* [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api)
* [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api)
* [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api)
* [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api)
* [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api)
* [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api)
* [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api)
* [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api)
* [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api)
* [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api)
Examples
### Examples
* ####
##### Description
Build an order-specific full-page extension that reads order data from \`shopify.order\` and displays it on a custom page. This example creates a warranty information page tied to the order.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default async () => {
render(, document.body);
};
function Extension() {
const order = shopify.order.value;
if (!order) {
return null;
}
return (
navigation.navigate('shopify:customer-account/orders')}
>
Back to orders
Your warranty is active for this order.
Order information
Order ID: {order.id}
Order number: {order.name}
{order.processedAt && (
Purchase date: {order.processedAt}
)}
);
}
```
* ####
##### Description
Create an order-specific full-page extension for submitting return requests. This example demonstrates reading order line items from \`shopify.lines\` and using \[page]\(/docs/api/customer-account-ui-extensions/latest/polaris-web-components/layout-and-structure/page) action slots for navigation.
##### jsx
```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState} from 'preact/hooks';
export default async () => {
render(, document.body);
};
function Extension() {
const order = shopify.order.value;
const lines = shopify.lines.value;
const [submitted, setSubmitted] = useState(false);
if (!order) {
return null;
}
if (submitted) {
return (
navigation.navigate('shopify:customer-account/orders')}
>
Back to orders
Your return request has been submitted. We'll review it and get back to you.
);
}
return (
navigation.navigate('shopify:customer-account/orders')}
>
Back to orders
Select items to return from order {order.name}:
{lines.map((line) => (
{line.merchandise.title}
Qty: {line.quantity}
))}
setSubmitted(true)}>
Submit return request
);
}
```
***
## Best practices
* **Use the page component as the root container:** Wrap your full-page extension content in a [page](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/layout-and-structure/page) component. It provides a consistent layout with support for headings, subheadings, and action slots (`primary-action`, `secondary-actions`, `breadcrumb-actions`).
* **Choose the right target for the context:** If the page needs access to order data, use `customer-account.order.page.render`. Otherwise, use `customer-account.page.render`.
* **Handle route navigation within the extension:** Use the [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/platform-apis/navigation-api) and `navigation.navigate()` for programmatic in-extension routing. Use [relative URLs](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#custom-protocols) or the `extension:` protocol with [link](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/actions/link) components for declarative navigation.
* **Share direct links to the page:** The URL for a full-page extension is static, so merchants can link customers directly to the page using the URL.
* **Guard against missing data:** When using `customer-account.order.page.render`, always check that [`shopify.order.value`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) is defined before rendering order-specific content. The order data loads asynchronously and may be `undefined` on the initial render.
***