Choose a version:

customer-account.profile.block.render

A block extension target that renders exclusively on the Profile page in customer accounts. This extension 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 (7)

APIs (0)

Supported components

Available APIs

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to analytics analytics required: Methods for interacting with Web Pixels, such as emitting an event.

Note
Requires to connect a third-party domain to Shopify for your customer account pages.
Note: Requires to <a href="https://help.shopify.com/en/manual/domains/add-a-domain/connecting-domains/connect-domain-customer-account">connect a third-party domain</a> to Shopify for your customer account pages.
Anchor to applyTrackingConsentChange applyTrackingConsentChange required: Allows setting and updating customer privacy consent settings and tracking consent metafields.

Note
Requires the customer_privacy capability to be set to true.
Note: Requires the <a href="/docs/api/customer-account-ui-extensions/configuration#collect-buyer-consent"><code><span class="PreventFireFoxApplyingGapToWBR">customer<wbr/>_privacy</span></code> capability</a> to be set to <code>true</code>.
Requires access to protected customer data.
Anchor to authenticatedAccount authenticatedAccount required: Information about the authenticated account.
Anchor to customerPrivacy customerPrivacy <> required: Customer privacy consent settings and a flag denoting if consent has previously been collected.
Anchor to extension extension required: Meta information about the extension.
Anchor to i18n i18n required: Utilities for translating content and formatting values according to the current localization of the user.
Anchor to intents intents required: Entry point for Shopify intents.

Intents pair an action (verb) with a resource type and optional value and data to request a workflow.
Anchor to localization localization required: Details about the language of the buyer.
Anchor to query query <Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }> required: Used to query the Storefront GraphQL API with a prefetched token.

See storefront api access examples for more information.
Anchor to sessionToken sessionToken required: Provides access to session tokens, which can be used to verify token claims on your app's server.

See session token examples for more information.
Anchor to settings settings <> required: The settings matching the settings definition written in the shopify.ui.extension.toml file.

See 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.
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.
Anchor to storage storage required: Key-value storage for the extension target.
Anchor to toast toast required: 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 component.
Anchor to version version Version required: The renderer version being used for the extension.
Anchor to extensionPoint extensionPoint Target required: 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.

Deprecated
Deprecated as of version 2023-07, use extension.target instead.

Analytics

publish
Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
```
(name: string, data: Record<string, unknown>) => Promise<boolean>
```
visitor
A method for capturing details about a visitor on the online store.
```
(data: { email?: string; phone?: string; }) => Promise<VisitorResult>
```

VisitorResult

Represents a visitor result.

VisitorSuccess | VisitorError

VisitorSuccess

Represents a successful visitor result.

type
Indicates that the visitor information was validated and submitted.
```
'success'
```

VisitorError

Represents an unsuccessful visitor result.

message
A message that explains the error. This message is useful for debugging. It's **not** localized, and therefore should not be presented directly to the buyer.
```
string
```
type
Indicates that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property.
```
'error'
```

ApplyTrackingConsentChangeType

visitorConsent
```
VisitorConsentChange
```

Promise<TrackingConsentChangeResult>

Promise<TrackingConsentChangeResult>

VisitorConsentChange

analytics
Visitor consents to recording data to understand how customers interact with the site.
```
boolean
```
marketing
Visitor consents to ads and marketing communications based on customer interests.
```
boolean
```
metafields
Tracking consent metafield data to be saved. If the value is `null`, the metafield will be deleted.
```
TrackingConsentMetafieldChange[]
```
preferences
Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website.
```
boolean
```
saleOfData
Opts the visitor out of data sharing / sales.
```
boolean
```
type
```
'changeVisitorConsent'
```

TrackingConsentMetafieldChange

key
The name of the metafield. It must be between 3 and 30 characters in length (inclusive).
```
string
```
value
The information to be stored as metadata. If the value is `null`, the metafield will be deleted.
```
string | null
```

TrackingConsentChangeResult

TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError

TrackingConsentChangeResultSuccess

The returned result of a successful tracking consent preference update.

type
The type of the `TrackingConsentChangeResultSuccess` API.
```
'success'
```

TrackingConsentChangeResultError

The returned result of an unsuccessful tracking consent preference update with a message detailing the type of error that occurred.

message
A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer.
```
string
```
type
The type of the `TrackingConsentChangeResultError` API.
```
'error'
```

AuthenticatedAccount

customer
Provides the customer information of the authenticated customer.
```
SubscribableSignalLike<Customer | undefined>
```
purchasingCompany
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`.
```
SubscribableSignalLike<PurchasingCompany | undefined>
```

SubscribableSignalLike

Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with [Preact's ReadonlySignal](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709). Some fields are deprecated but still supported for backwards compatibility. In version 2025-10, [`StatefulRemoteSubscribable`](https://github.com/Shopify/remote-dom/blob/03929aa8418a89d41d294005f219837582718df8/packages/async-subscription/src/types.ts#L17) was replaced with `ReadonlySignalLike`. Checkout will remove the old fields some time in the future.

current
```
T
```
destroy
```
() => Promise<void>
```
subscribe
Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.
```
(fn: (value: T) => void) => () => void
```
value
The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.
```
T
```

Customer

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

id
Customer ID.
```
string
```

PurchasingCompany

company
Include information of the company of the logged in business customer.
```
Company
```
location
Include information of the company location of the logged in business customer.
```
CompanyLocation
```

Company

id
Company ID.
```
string
```

CompanyLocation

id
Company location ID.
```
string
```

CustomerPrivacy

allowedProcessing
An object containing flags for each consent property denoting whether they can be processed based on visitor consent, merchant configuration, and user location.
```
AllowedProcessing
```
metafields
Stored tracking consent metafield data.
```
TrackingConsentMetafield[]
```
region
Details about the visitor's current location for use in evaluating if more granular consent controls should render.
```
CustomerPrivacyRegion
```
saleOfDataRegion
Whether the visitor is in a region requiring data sale opt-outs.
```
boolean
```
shouldShowBanner
Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner. This is determined by the visitor's current privacy consent, the shop's [region visibility configuration](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located.
```
boolean
```
visitorConsent
An object containing the customer's current privacy consent settings. *
```
VisitorConsent
```

AllowedProcessing

analytics
Can collect customer analytics about how the shop was used and interactions made on the shop.
```
boolean
```
marketing
Can collect customer preference for marketing, attribution and targeted advertising from the merchant.
```
boolean
```
preferences
Can collect customer preferences such as language, currency, size, and more.
```
boolean
```
saleOfData
Can collect customer preference for sharing data with third parties, usually for behavioral advertising.
```
boolean
```

TrackingConsentMetafield

key
The name of the metafield. It must be between 3 and 30 characters in length (inclusive).
```
string
```
value
The information to be stored as metadata.
```
string
```

CustomerPrivacyRegion

countryCode
The [ISO 3166 Alpha-2 format](https://www.iso.org/iso-3166-country-codes.html) for the buyer's country. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
CountryCode
```
provinceCode
The buyer's province code, such as state, province, prefecture, or region. Province codes can be found by clicking on the `Subdivisions assigned codes` column for countries listed [here](https://en.wikipedia.org/wiki/ISO_3166-2). {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
```
string
```

CountryCode

'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ'

VisitorConsent

analytics
Visitor consents to recording data to understand how customers interact with the site.
```
boolean
```
marketing
Visitor consents to ads and marketing communications based on customer interests.
```
boolean
```
preferences
Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website.
```
boolean
```
saleOfData
Opts the visitor out of data sharing / sales.
```
boolean
```

Extension

Meta information about an extension target.

apiVersion
The API version that was set in the extension config file.
```
ApiVersion
```
capabilities
The allowed capabilities of the extension, defined in your [shopify.ui.extension.toml](/docs/api/customer-account-ui-extensions/configuration) file. * [`api_access`](/docs/api/customer-account-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/customer-account-ui-extensions/configuration#network-access): the extension can make external network calls.
```
SubscribableSignalLike<Capability[]>
```
editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
```
Editor
```
rendered
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.
```
SubscribableSignalLike<boolean>
```
scriptUrl
The URL to the script that started the extension target.
```
string
```
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.
```
Target
```
version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
```
string
```

ApiVersion

Union of supported API versions

'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01'

Capability

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`](/docs/api/checkout-ui-extensions/configuration#iframe): 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'

Editor

type
Indicates whether the extension is rendering in the checkout editor.
```
'checkout'
```

I18n

formatCurrency
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.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
formatDate
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.
```
(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string
```
formatNumber
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.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
translate
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.
```
I18nTranslate
```

I18nTranslate

This defines the i18n.translate() signature.

Intents

Entry point for Shopify intents. Intents pair an `action` (verb) with a resource `type` and optional `value` and `data` to request a workflow.

invoke
Invoke an intent using the object or URL syntax. Object format: `{action, type, value?, data?}` URL format: `action:type[,value][?params]`
```
{ (query: IntentQuery): Promise<IntentActivity>; (intentURL: string, options?: IntentQueryOptions): Promise<IntentActivity>; }
```

IntentQuery

Structured description of an intent to invoke. Use this object form when programmatically composing an intent at runtime. It pairs an action (verb) with a resource type and optional inputs.

action
Verb describing the operation to perform on the target resource. Common values include `create` and `open`. The set of allowed verbs is intent-specific; unknown verbs will fail validation.
```
IntentAction
```
data
Optional input payload passed to the intent. Used to seed forms or supply parameters. The accepted shape is intent-specific. For example: - Replacing a payment method on a subscription contract requires { field: 'paymentMethod' }
```
Record<string, unknown>
```
type
The resource type (e.g. `shopify/SubscriptionContract`).
```
string
```
value
The resource identifier for edit actions (e.g. `gid://shopify/SubscriptionContract/123`).
```
string
```

IntentAction

Allowed actions that can be performed by an intent. Common actions include: - `'create'`: Initiate creation of a new resource. - `'open'`: Modify an existing resource.

'create' | 'open' | string

IntentActivity

Activity handle for tracking intent workflow progress.

complete
A Promise that resolves when the intent workflow completes, returning the response.
```
Promise<IntentResponse>
```

IntentResponse

Result of an intent activity. Discriminated union representing all possible completion outcomes for an invoked intent.

SuccessIntentResponse | ErrorIntentResponse | ClosedIntentResponse

SuccessIntentResponse

Successful intent completion. - `code` is always `'ok'` - `data` contains the output payload

code
```
'ok'
```
data
Validated output payload produced by the workflow. The shape is intent-specific. Consumers should narrow by `code === 'ok'` before accessing.
```
Record<string, unknown>
```

ErrorIntentResponse

Failed intent completion. - `code` is always `'error'` - `message` summarizes the failure - `issues` optionally provides structured details for validation or field-specific problems following the Standard Schema convention

code
```
'error'
```

issues

{ path?: string[]; message?: string; }[]

message
```
string
```

ClosedIntentResponse

User dismissed or closed the workflow without completing it. Distinct from `error`: no failure occurred, the activity was simply abandoned by the user.

code
```
'closed'
```

IntentQueryOptions

Options for URL-based invocations. When invoking via URL syntax, `action` and `type` are parsed from the string. This companion type captures the remaining optional fields that can be provided alongside the URL.

data
Optional input payload passed to the intent. Used to seed forms or supply parameters. The accepted shape is intent-specific. For example: - Replacing a payment method on a subscription contract requires { field: 'paymentMethod' }
```
Record<string, unknown>
```
value
The resource identifier for edit actions (e.g. `gid://shopify/SubscriptionContract/123`).
```
string
```

Localization

country
The country context of the buyer sees in the customer account. It will update if the buyer changes the country in the customer account If the country is unknown, then the value is undefined.
```
SubscribableSignalLike<Country | undefined>
```
extensionLanguage
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).
```
SubscribableSignalLike<Language>
```
language
The language the buyer sees in the customer account hub.
```
SubscribableSignalLike<Language>
```

Country

isoCode
The ISO-3166-1 code for this country.
```
CountryCode
```

Language

isoCode
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
```
string
```

StorefrontApiVersion

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' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10'

GraphQLError

GraphQL error returned by the Shopify Storefront APIs.

extensions
```
{ requestId: string; code: string; }
```
message
```
string
```

SessionToken

get
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.
```
() => Promise<string>
```

ExtensionSettings

The merchant-defined setting values for the extension.

[key: string]
```
string | number | boolean | undefined
```

Storage

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
Delete stored data by key.
```
(key: string) => Promise<void>
```
read
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.
```
<T = unknown>(key: string) => Promise<T>
```
write
Write stored data for this key. The data must be serializable to JSON.
```
(key: string, data: any) => Promise<void>
```

ToastApi

show

(content: string) => Promise<ToastApiResult>

ToastApiResult

hide
```
() => void
```

Examples

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

return (

<s-text>I am a Profile extension</s-text>

);

}

Examples

Extension.jsx

Default

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

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

function Extension() {
  return (
    <s-text>I am a Profile extension</s-text>
  );
}

Anchor to relatedRelated

Navigate toPlacement references

Was this page helpful?