Skip to main content
Upgrade to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.

Profile page (default)

Profile page (default) extensions render on the Profile page in customer accounts. These targets are available for all customers (non-B2B) and help customers manage their account and see updates that matter to them.

Anchor to Use casesUse cases

  • Custom profile fields: Collect additional information from customers using customer metafields, such as birthday, size preferences, or communication preferences.
  • Address management: Display supplementary address information or validation notices alongside the customer's saved addresses.
  • Announcements: Show dismissible announcements at the top of the Profile page, such as promotional offers, surveys, or account update reminders.
  • Custom profile content: Add app-specific content blocks to the Profile page, such as loyalty programs, subscription preferences, or account-specific tools.
  • Customer engagement: Surface contextual messages or calls-to-action to encourage customers to update their profile or engage with your app.
Default profile page showing all available extension target locations with highlighted slots near addresses, announcements, and block sections.

Anchor to Profile page (default) targetsProfile page (default) targets

Profile page (default) targets render on the Profile page for all customers. They're useful for adding address-related content, announcements, and custom content blocks.

Anchor to Addresses (render after) ,[object Object]Addresses (render after) target

customer-account.profile.addresses.render-after

Renders after the addresses section on the Profile page. This target doesn't show to B2B customers.

Use this target to display supplementary address information, such as address validation notices or delivery preferences. This target gives you access to the Authenticated Account API.

Support
Components (63)
APIs (13)

Supported components

Available APIs

Examples
import {
reactExtension,
Banner,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.profile.addresses.render-after',
() => <Extension />,
);

function Extension() {
return (
<Banner status="info">
We verify all shipping addresses to ensure accurate delivery. If your
address can't be verified, you may be contacted to confirm details.
</Banner>
);
}

Anchor to Announcement ,[object Object]Announcement target

customer-account.profile.announcement.render

Renders a dismissible announcement at the top of the Profile page.

Use this target to display promotional messages, surveys, or account-related notices. The platform wraps your extension content in a dismissible announcement container, so you render your content directly using standard components.

Support
Components (63)
APIs (13)

Supported components

Available APIs

Examples
import {
reactExtension,
InlineStack,
Link,
Text,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.profile.announcement.render',
() => <Extension />,
);

function Extension() {
return (
<InlineStack>
<Text>Complete your profile to unlock exclusive member discounts.</Text>
<Link to="https://your-app.com/rewards">
Learn more
</Link>
</InlineStack>
);
}

Anchor to Profile block ,[object Object]Profile block target

customer-account.profile.block.render

Renders a block extension target on the Profile page. This target renders for all customers, including B2B customers.

Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter.

Support
Components (63)
APIs (13)

Supported components

Available APIs

Examples
import {
reactExtension,
BlockStack,
Heading,
Link,
Text,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.profile.block.render',
() => <Extension />,
);

function Extension() {
return (
<BlockStack spacing="base">
<Heading>Loyalty program</Heading>
<Text>
You're a valued member of our loyalty program. Check your points
balance and available rewards.
</Text>
<Link to="https://your-app.com/loyalty">
View rewards
</Link>
</BlockStack>
);
}

Anchor to Best practicesBest practices

  • Keep content contextual: Profile page extensions render alongside customer profile management UI, so content should be directly relevant to the customer's profile or account.
  • Use standard components for announcement targets: The customer-account.profile.announcement.render target wraps your content in a dismissible announcement container. Render your content directly using standard components like InlineStack, Text, and Link.
  • Avoid heavy rendering: These targets render inline within the Profile page. Avoid complex layouts or large data fetches that could cause layout shifts. Use Banner or lightweight BlockStack layouts for the best experience.

Anchor to LimitationsLimitations

  • Addresses target visibility: The customer-account.profile.addresses.render-after target doesn't show to B2B customers. If you need to extend addresses for B2B customers, use customer-account.profile.company-location-addresses.render-after instead.
  • Announcement dismissibility: The customer-account.profile.announcement.render target renders a dismissible announcement. Once dismissed by the customer, the announcement won't reappear until the next page visit.
  • Block placement: The customer-account.profile.block.render target is a block extension whose placement is controlled by the merchant. You can't programmatically control where it appears on the page.
Was this page helpful?