Skip to main content

Full page

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 component as the main container for placing content in your full-page extension.

Anchor to Use casesUse 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.
Customer account full page extension showing the main content area where custom pages render between the header and footer.

Anchor to Full page targetsFull page targets

Full-page extensions support custom protocols and the 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.

Anchor to Customer account full page ,[object Object]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 (60)
APIs (14)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
return (
<s-page heading="Wishlist" subheading="Your saved items">
<s-button
slot="primary-action"
onClick={() => navigation.navigate('shopify:customer-account/')}
>
Back to account
</s-button>
<s-stack direction="block" gap="base">
<s-banner tone="info">
Save items from the store to keep track of products you love.
</s-banner>
<s-stack direction="block" gap="base">
<s-heading>No saved items yet</s-heading>
<s-text color="subdued">
Browse the store and save items to your wishlist.
</s-text>
</s-stack>
</s-stack>
</s-page>
);
}

Anchor to Order-specific full page ,[object Object]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 (60)
APIs (29)

Supported components

Available APIs

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
const order = shopify.order.value;

if (!order) {
return null;
}

return (
<s-page heading="Warranty Details" subheading={`Order ${order.name}`}>
<s-button
slot="primary-action"
onClick={() => navigation.navigate('shopify:customer-account/orders')}
>
Back to orders
</s-button>
<s-stack direction="block" gap="base">
<s-banner tone="success">
Your warranty is active for this order.
</s-banner>
<s-stack direction="block" gap="base">
<s-heading>Order information</s-heading>
<s-text>Order ID: {order.id}</s-text>
<s-text>Order number: {order.name}</s-text>
{order.processedAt && (
<s-text>Purchase date: {order.processedAt}</s-text>
)}
</s-stack>
</s-stack>
</s-page>
);
}

Anchor to Best practicesBest practices

  • Use the page component as the root container: Wrap your full-page extension content in a 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 and navigation.navigate() for programmatic in-extension routing. Use relative URLs or the extension: protocol with 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 is defined before rendering order-specific content. The order data loads asynchronously and may be undefined on the initial render.
Was this page helpful?