This [full-page extension](/docs/api/customer-account-ui-extensions/2024-10/extension-targets-overview#full-page-extension-full-page-extension) allows you to create a new page in customer accounts. It renders in the main content area—below the header, and above the footer. If the page you're building is tied to a specific order, use [customer-account.order.page.render](/docs/api/customer-account-ui-extensions/targets/full-page/customer-account-order-page-render) instead. For example: - A Return Request page that requires the context of a specific order should use `customer-account.order.page.render` - A Wishlist page that does **not** require the context of a specific order should use `customer-account.page.render`
import {
reactExtension,
Text,
BlockStack,
ResourceItem,
Image,
Heading,
Page,
Grid,
GridItem,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';
import { useEffect, useState } from 'react';
export default reactExtension(
'customer-account.page.render',
() => <Wishlists />,
);
interface Wishlist {
id: string;
items: {
productId: string;
productLink: string;
productImage: string;
label: string;
}[];
}
function Wishlists() {
const [wishlists, setWishlists] = useState<
Wishlist[]
>();
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchWishlists() {
setLoading(true);
const response = await fetch(
`https://your-backend.com/api/wishlists`,
);
const wishlists = await response.json();
setLoading(false);
setWishlists(wishlists);
}
void fetchWishlists();
}, []);
if (loading) {
return <Text>Loading...</Text>;
}
if (!wishlists) {
return <NotFound />;
}
return (
<Page title='Wishlists'>
<Grid columns={250} rows="auto" spacing="base" blockAlignment="center">
{wishlists.map((item) => {
return (
<GridItem columnSpan={1}>
<ResourceItem
to={`/wishlist/${item.id}`}
key={item.id}
>
<BlockStack>
<Image
source={
item.items[0].productImage
}
/>
<Text>{item.items[0].label}</Text>
</BlockStack>
</ResourceItem>
</GridItem>
);
})}
</Grid>
</Page>
);
}
function NotFound() {
return (
<BlockStack>
<Heading>Resource Not found</Heading>
</BlockStack>
);
}
import {BlockStack, ResourceItem, extension, Image, Page, Card, Grid, GridItem} from '@shopify/ui-extensions/customer-account';
export default extension(
'customer-account.page.render',
async (root) => {
const response = await fetch(
`https://your-backend.com/api/wishlists`,
);
const wishlists = await response.json();
const app = root.createComponent(
Grid,
{
columns: 250,
rows: 'auto',
spacing: 'base',
blockAlignment: 'center'
}
);
wishlists.forEach((wishlist) => {
const gridItem = root.createComponent(GridItem, {
columnSpan: 1,
});
const wishlistItem = root.createComponent(ResourceItem, {
to: `/wishlist/${wishlist.id}`,
})
const image = root.createComponent(Image, {
source: wishlist.items[0].productImage
})
const text = root.createText(wishlist.items[0].label)
const contentWrapper = root.createComponent(BlockStack)
contentWrapper.append(image);
contentWrapper.append(text);
wishlistItem.append(contentWrapper);
gridItem.append(wishlistItem);
app.append(gridItem);
})
const page = root.createComponent(Page, {
title: 'Wishlists',
})
page.append(app);
root.append(page);
},
);
The api for full-page extension targets
The currentEntry read-only property of the Navigation interface returns a NavigationHistoryEntry object representing the location the user is currently navigated to right now.
The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
The updateCurrentEntry() method of the Navigation interface updates the state of the currentEntry; used in cases where the state change will be independent of a navigation or reload.
The NavigationCurrentEntryChangeEvent interface of the Navigation API is the event object for the currententrychange event, which fires when the Navigation.currentEntry has changed.
Returns the NavigationHistoryEntry that was navigated from.
Returns the type of the navigation that resulted in the change.
The NavigationHistoryEntry interface of the Navigation API represents a single navigation history entry.
Returns a clone of the available state associated with this history entry.
Returns the key of the history entry. This is a unique, UA-generated value that represents the history entry's slot in the entries list rather than the entry itself.
Returns the URL of this history entry.
An enumerated value representing the type of navigation.
'push' | 'replace' | 'traverse'
export interface NavigateFunction { /** * Navigates to a specific URL, updating any provided state in the history entries list. * @param url The destination URL to navigate to. */ (url: string, options?: NavigationOptions): void; }
The base API object provided to this and other `customer-account` extension targets.
Information about the authenticated account.
Meta information about the extension.
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
Utilities for translating content and formatting values according to the current `localization` of the user.
Details about the language of the buyer.
Used to query the Storefront GraphQL API with a prefetched token. See [storefront api access examples](/docs/api/customer-account-ui-extensions/apis/storefront-api#examples) for more information.
Provides access to session tokens, which can be used to verify token claims on your app's server. See [session token examples](/docs/api/customer-account-ui-extensions/apis/session-token#examples) for more information.
The settings matching the settings definition written in the [`shopify.ui.extension.toml`](/docs/api/customer-account-ui-extensions/configuration) file. See [settings examples](/docs/api/customer-account-ui-extensions/apis/order-status-api/settings#examples) for more information. > Note: When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.
Key-value storage for the extension target.
Methods to interact with the extension's UI.
The renderer version being used for the extension.
Provides the customer information of the authenticated customer.
Provides the company info of the authenticated business customer. If the customer is not authenticated or is not a business customer, this value is `undefined`.
Information about the authenticated customer. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
Customer ID.
Include information of the company of the logged in business customer.
Company ID.
Meta information about an extension target.
The API version that was set in the extension config file.
The allowed capabilities of the extension, defined in your [shopify.ui.extension.toml](/docs/api/checkout-ui-extensions/configuration) file. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
Whether your extension is currently rendered to the screen. Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout. Your extension might also continue to run after the buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
The URL to the script that started the extension target.
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
Union of supported API versions
'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | 'unstable'
The capabilities an extension has access to. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing. * [`collect_buyer_consent.customer_privacy`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register buyer consent decisions that will be honored on Shopify-managed services. * `iframe.sources`: the extension can embed an external URL in an iframe.
'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing' | 'collect_buyer_consent.customer_privacy' | 'iframe.sources'
Indicates whether the extension is rendering in the checkout editor.
Returns a localized currency value. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default.
Returns a localized date value. This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options.
Returns a localized number. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default.
Returns translated content in the buyer's locale, as supported by the extension. - `options.count` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then `translate()` returns a single string. - If replacements contain UI components, then `translate()` returns an array of elements.
This defines the i18n.translate() signature.
export interface I18nTranslate { /** * This returns a translated string matching a key in a locale file. * * @example translate("banner.title") */ <ReplacementType = string>( key: string, options?: {[placeholderKey: string]: ReplacementType | string | number}, ): ReplacementType extends string | number ? string : (string | ReplacementType)[]; }
This is the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, this is the fallback locale used for translations. For example, if the buyer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, this value is the default locale for your extension (that is, the one matching your .default.json file).
The language the buyer sees in the customer account hub.
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
export interface NavigateFunction { /** * Navigates to a specific URL, updating any provided state in the history entries list. * @param url The destination URL to navigate to. */ (url: string, options?: NavigationOptions): void; }
Union of supported storefront API versions
'2022-04' | '2022-07' | '2022-10' | '2023-01' | '2023-04' | '2023-07' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | 'unstable'
GraphQL error returned by the Shopify Storefront APIs.
Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself.
The merchant-defined setting values for the extension.
A key-value storage object for extension targets. Stored data is only available to this specific app but can be shared across multiple extension targets. The storage backend is implemented with `localStorage` and should persist for ... days However, data persistence isn't guaranteed.
Delete stored data by key.
Read and return a stored value by key. The stored data is deserialized from JSON and returned as its original primitive. Returns `null` if no stored data exists.
Write stored data for this key. The data must be serializable to JSON.
Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful. To request access to this API: 1. Go to your partner dashboard and click **Apps**. 2. Select the app you need to request access for. 3. Click **API access**. 4. Under **Access force data refresh**, click **Request access**.
An overlay is a contextual element on top of the main interface that provides additional information or functionality.
The Toast API displays a non-disruptive message that displays at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. How to use: - Use toasts to confirm successful actions. - Aim for two words. - Use noun + past tense verb format. For example, \`Changes saved\`. For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.