# CustomerSegmentTemplate Extension API This API is available to all customer segment template extension types. ## CustomerSegmentTemplateApi ### CustomerSegmentTemplateApi ### __enabledFeatures value: `string[]` ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### Auth ### idToken value: `() => Promise` Retrieves a Shopify OpenID Connect ID token for the current user. ### ExtensionTargets ### admin.abandoned-checkout-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the abandoned checkout page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.abandoned-checkout-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the abandoned checkout page. Open this extension from the "More Actions" menu. ### admin.abandoned-checkout-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the abandoned checkout details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.catalog-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.catalog-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the catalog details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.catalog-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.catalog-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the catalog details page. Open this extension from the "More Actions" menu. ### admin.catalog-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.catalog-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the catalog details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.collection-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.collection-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the collection details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.collection-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.collection-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the collection details page. Open this extension from the "More Actions" menu. ### admin.collection-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.collection-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the collection details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.collection-index.action.render value: `RenderExtension< ActionExtensionApi<'admin.collection-index.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the collection index page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.collection-index.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.collection-index.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the collection index page. Open this extension from the "More Actions" menu. ### admin.company-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.company-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the company details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.company-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.company-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the company details page. Open this extension from the "More Actions" menu. ### admin.company-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.company-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the company details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.company-location-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.company-location-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the company location details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.customer-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.customer-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the customer details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.customer-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.customer-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the customer details page. Open this extension from the "More Actions" menu. ### admin.customer-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.customer-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the customer details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.customer-index.action.render value: `RenderExtension< ActionExtensionApi<'admin.customer-index.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the customer index page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.customer-index.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.customer-index.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the customer index page. Open this extension from the "More Actions" menu. ### admin.customer-index.selection-action.render value: `RenderExtension< ActionExtensionApi<'admin.customer-index.selection-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the customer index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.customer-index.selection-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.customer-index.selection-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the customer index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. ### admin.customer-segment-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.customer-segment-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the customer segment details page. Open this extension from the "Use segment" button. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.customer-segment-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.customer-segment-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the customer segment details page. Open this extension from the "Use segment" button. ### admin.customers.segmentation-templates.render value: `RenderExtension< CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'>, CustomerSegmentTemplateComponent >` - CustomerSegmentTemplateApi: export interface CustomerSegmentTemplateApi< ExtensionTarget extends AnyExtensionTarget, > extends StandardApi { /* Utilities for translating content according to the current `localization` of the admin. */ i18n: I18n; /** @private */ __enabledFeatures: string[]; } - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - CustomerSegmentTemplateComponent: AnyComponentBuilder< Pick< Components, 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' > > Renders a [`CustomerSegmentTemplate`](https://shopify.dev/docs/api/admin-extensions/components/customersegmenttemplate) in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments). ### admin.discount-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.discount-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the discount details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.discount-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.discount-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the discount details page. Open this extension from the "More Actions" menu. ### admin.discount-details.function-settings.render value: `RenderExtension< DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - DiscountFunctionSettingsApi: export interface DiscountFunctionSettingsApi< ExtensionTarget extends AnyExtensionTarget, > extends StandardApi { /** * Applies a change to the discount function settings. */ applyMetafieldChange: ApplyMetafieldChange; data: DiscountFunctionSettingsData; } - Discount: interface Discount { /** * the discount's gid */ id: string; } Renders an admin block in the discount details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.discount-index.action.render value: `RenderExtension< ActionExtensionApi<'admin.discount-index.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the discount index page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.discount-index.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.discount-index.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the discount index page. Open this extension from the "More Actions" menu. ### admin.draft-order-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.draft-order-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the draft order details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.draft-order-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.draft-order-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the draft order details page. Open this extension from the "More Actions" menu. ### admin.draft-order-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.draft-order-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the draft order details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.draft-order-index.action.render value: `RenderExtension< ActionExtensionApi<'admin.draft-order-index.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the draft orders page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.draft-order-index.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.draft-order-index.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the draft orders page. Open this extension from the "More Actions" menu. ### admin.draft-order-index.selection-action.render value: `RenderExtension< ActionExtensionApi<'admin.draft-order-index.selection-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the draft order page when multiple resources are selected. Open this extension from the "3-dot" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.draft-order-index.selection-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the draft order page when multiple resources are selected. Open this extension from the "3-dot" menu. ### admin.gift-card-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.gift-card-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the gift card details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.gift-card-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.gift-card-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the gift card details page. Open this extension from the "More Actions" menu. ### admin.gift-card-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.gift-card-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the gift card details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.order-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the order details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.order-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the order details page. Open this extension from the "More Actions" menu. ### admin.order-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.order-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the order details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-details.print-action.render value: `RenderExtension< PrintActionExtensionApi<'admin.order-details.print-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - PrintActionExtensionApi: export interface PrintActionExtensionApi< ExtensionTarget extends AnyExtensionTarget, > extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-details.print-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.order-details.print-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. ### admin.order-fulfilled-card.action.render value: `RenderExtension< ActionExtensionApi<'admin.order-fulfilled-card.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the order fulfilled card. Open this extension from the "3-dot" menu inside the order fulfilled card. Note: This extension will only be visible on orders which were fulfilled by your app. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-fulfilled-card.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the order fulfilled card. Open this extension from the "3-dot" menu inside the order fulfilled card. Note: This extension will only be visible on orders which were fulfilled by your app. ### admin.order-index.action.render value: `RenderExtension< ActionExtensionApi<'admin.order-index.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the order index page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-index.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.order-index.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the order index page. Open this extension from the "More Actions" menu. ### admin.order-index.selection-action.render value: `RenderExtension< ActionExtensionApi<'admin.order-index.selection-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the order index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-index.selection-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.order-index.selection-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the order index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. ### admin.order-index.selection-print-action.render value: `RenderExtension< PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - PrintActionExtensionApi: export interface PrintActionExtensionApi< ExtensionTarget extends AnyExtensionTarget, > extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.order-index.selection-print-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. ### admin.product-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.product-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the product details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.product-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the product details page. Open this extension from the "More Actions" menu. ### admin.product-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.product-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the product details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-details.configuration.render value: `RenderExtension< ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - ProductDetailsConfigurationApi: export interface ProductDetailsConfigurationApi< ExtensionTarget extends AnyExtensionTarget, > extends BlockExtensionApi { data: Data & { /* @deprecated The product currently being viewed in the admin. */ product: Product; app: { launchUrl: string; applicationUrl: string; }; }; } - Product: interface Product { id: string; title: string; handle: string; status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT'; totalVariants: number; totalInventory: number; hasOnlyDefaultVariant: boolean; onlineStoreUrl?: string; options: { id: string; name: string; position: number; values: string[]; }[]; productType: string; productCategory?: string; productComponents: ProductComponent[]; } Renders Product Configuration on product details and product variant details See the [tutorial](https://shopify.dev/docs/apps/selling-strategies/bundles/product-config) for more information ### admin.product-details.print-action.render value: `RenderExtension< PrintActionExtensionApi<'admin.product-details.print-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - PrintActionExtensionApi: export interface PrintActionExtensionApi< ExtensionTarget extends AnyExtensionTarget, > extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-details.print-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.product-details.print-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. ### admin.product-details.reorder.render value: `RenderExtension< BlockExtensionApi<'admin.product-details.reorder.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the product details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-index.action.render value: `RenderExtension< ActionExtensionApi<'admin.product-index.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-index.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.product-index.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the product index page. Open this extension from the "More Actions" menu. ### admin.product-index.selection-action.render value: `RenderExtension< ActionExtensionApi<'admin.product-index.selection-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the product index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-index.selection-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.product-index.selection-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the product index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. ### admin.product-index.selection-print-action.render value: `RenderExtension< PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - PrintActionExtensionApi: export interface PrintActionExtensionApi< ExtensionTarget extends AnyExtensionTarget, > extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-index.selection-print-action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. ### admin.product-purchase-option.action.render value: `RenderExtension< PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - PurchaseOptionsCardConfigurationApi: export interface PurchaseOptionsCardConfigurationApi< ExtensionTarget extends AnyExtensionTarget, > extends ActionExtensionApi { data: { selected: {id: string; sellingPlanId?: string}[]; }; } Renders an admin action extension in the product details page when a selling plan group is present. Open this extension from the "Purchase Options card". See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-variant-details.action.render value: `RenderExtension< ActionExtensionApi<'admin.product-variant-details.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - ActionExtensionApi: export interface ActionExtensionApi extends StandardApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ close: () => void; /** * Information about the currently viewed or selected items. */ data: Data; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder Renders an admin action extension in the product variant details page. Open this extension from the "More Actions" menu. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-variant-details.action.should-render value: `RunnableExtension< ShouldRenderApi<'admin.product-variant-details.action.should-render'>, ShouldRenderOutput >` - RunnableExtension: export interface RunnableExtension { (api: Api): Output | Promise; } - ShouldRenderApi: export interface ShouldRenderApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; } - ShouldRenderOutput: interface ShouldRenderOutput { display: boolean; } Controls the render state of an admin action extension in the product variant details page. Open this extension from the "More Actions" menu. ### admin.product-variant-details.block.render value: `RenderExtension< BlockExtensionApi<'admin.product-variant-details.block.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - BlockExtensionApi: export interface BlockExtensionApi extends StandardApi { /** * Information about the currently viewed or selected items. */ data: Data; /** * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; /** * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. */ resourcePicker: ResourcePickerApi; /** * Renders a custom [Picker](picker) dialog allowing users to select values from a list. */ picker: PickerApi; } Renders an admin block in the product variant details page. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.product-variant-details.configuration.render value: `RenderExtension< ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - Product: interface Product { id: string; title: string; handle: string; status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT'; totalVariants: number; totalInventory: number; hasOnlyDefaultVariant: boolean; onlineStoreUrl?: string; options: { id: string; name: string; position: number; values: string[]; }[]; productType: string; productCategory?: string; productComponents: ProductComponent[]; } - ProductVariantDetailsConfigurationApi: export interface ProductVariantDetailsConfigurationApi< ExtensionTarget extends AnyExtensionTarget, > extends BlockExtensionApi { data: Data & { /* @deprecated The product variant currently being viewed in the admin. */ variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }; } - ProductVariant: interface ProductVariant { id: string; sku: string; barcode: string; title: string; displayName: string; price: string; compareAtPrice: string; taxable: boolean; taxCode: string; weight: number; selectedOptions: { name: string; value: string; }[]; productVariantComponents: ProductVariantComponent[]; } Renders Product Configuration on product details and product variant details See the [tutorial](https://shopify.dev/docs/apps/selling-strategies/bundles/product-config) for more information ### admin.product-variant-purchase-option.action.render value: `RenderExtension< PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - PurchaseOptionsCardConfigurationApi: export interface PurchaseOptionsCardConfigurationApi< ExtensionTarget extends AnyExtensionTarget, > extends ActionExtensionApi { data: { selected: {id: string; sellingPlanId?: string}[]; }; } Renders an admin action extension in the product variant details page when a selling plan group is present. Open this extension from the "Purchase Options card". See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.settings.internal-order-routing-rule.render value: `RenderExtension< OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>, AllComponents | OrderRoutingComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - OrderRoutingRuleApi: export interface OrderRoutingRuleApi extends StandardApi { applyMetafieldsChange: ApplyMetafieldsChange; data: Data; } - OrderRoutingComponents: "InternalLocationList" & { readonly type?: "InternalLocationList"; readonly props?: InternalLocationListProps; readonly children?: true; } Renders Order Routing Rule Configuration on order routing settings. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### admin.settings.order-routing-rule.render value: `RenderExtension< OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - OrderRoutingRuleApi: export interface OrderRoutingRuleApi extends StandardApi { applyMetafieldsChange: ApplyMetafieldsChange; data: Data; } ### admin.settings.validation.render value: `RenderExtension< ValidationSettingsApi<'admin.settings.validation.render'>, AllComponents >` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - ValidationSettingsApi: export interface ValidationSettingsApi< ExtensionTarget extends AnyExtensionTarget, > extends StandardApi { /** * Applies a change to the validation settings. */ applyMetafieldChange: ApplyMetafieldChange; data: ValidationData; } - Validation: interface Validation { /** * the validation's gid when active in a shop */ id: string; /** * the metafields owned by the validation */ metafields: Metafield[]; } Renders Validation Settings within a given validation's add and edit views. See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components). ### Playground value: `RenderExtension, AllComponents>` - RenderExtension: export interface RenderExtension< Api, AllowedComponents extends RemoteComponentType< string, any, any > = RemoteComponentType, > { ( connection: RenderExtensionConnection, api: Api, ): void | Promise; } - AllComponents: AnyComponentBuilder< Omit< Components, | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' > > - Components: ComponentsBuilder - StandardApi: export interface StandardApi { /** * The identifier of the running extension target. */ extension: { target: ExtensionTarget; }; /** * Provides methods for authenticating calls to an app backend. */ auth: Auth; /** * Utilities for translating content according to the current localization of the admin. * More info - /docs/apps/checkout/best-practices/localizing-ui-extensions */ i18n: I18n; /** * Provides information to the receiver the of an intent. */ intents: Intents; /** * Used to query the Admin GraphQL API */ query: ( query: string, options?: {variables?: Variables; version?: Omit}, ) => Promise<{data?: Data; errors?: GraphQLError[]}>; } ### ActionExtensionApi ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### close value: `() => void` Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. ### data value: `Data` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } Information about the currently viewed or selected items. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### picker value: `PickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } Renders a custom [Picker](picker) dialog allowing users to select values from a list. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### resourcePicker value: `ResourcePickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } - ResourcePickerApi: export type ResourcePickerApi = ( options: ResourcePickerOptions, ) => Promise | undefined>; - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. ### Data ### selected value: `{ id: string; }[]` Information about the currently viewed or selected items. ### I18n ### formatCurrency value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string` 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. ### formatDate value: `(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string` 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. ### formatNumber value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string` 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. ### translate value: `I18nTranslate` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } - I18nTranslate: export interface I18nTranslate { /** * This returns a translated string matching a key in a locale file. * * @example translate("banner.title") */ ( key: string, options?: Record, ): ReplacementType extends string | number ? string : (string | ReplacementType)[]; } 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. ### Intents ### launchUrl value: `string | URL` The URL that was used to launch the intent. ### PickerApi #### Returns: Promise #### Params: - options: PickerOptions export type PickerApi = (options: PickerOptions) => Promise; ### PickerOptions ### headers value: `Header[]` - Header: interface Header { /** * The content to display in the table column header. */ content?: string; /** * The type of data to display in the column. The type is used to format the data in the column. * If the type is 'number', the data in the column will be right-aligned, this should be used when referencing currency or numeric values. * If the type is 'string', the data in the column will be left-aligned. * @defaultValue 'string' */ type?: 'string' | 'number'; } The data headers for the picker. These are used to display the table headers in the picker modal. ### heading value: `string` The heading of the picker. This is displayed in the title of the picker modal. ### items value: `Item[]` - Item: interface Item { /** * The unique identifier of the item. This will be returned by the picker if selected. */ id: string; /** * The primary content to display in the first column of the row. */ heading: string; /** * The additional content to display in the second and third columns of the row, if provided. */ data?: DataPoint[]; /** * Whether the item is disabled or not. If the item is disabled, it cannot be selected. * @defaultValue false */ disabled?: boolean; /** * Whether the item is selected or not when the picker is opened. The user may deselect the item if it is preselected. */ selected?: boolean; /** * The badges to display in the first column of the row. These are used to display additional information about the item, such as progress of an action or tone indicating the status of that item. */ badges?: Badge[]; /** * The thumbnail to display at the start of the row. This is used to display an image or icon for the item. */ thumbnail?: {url: string}; } The items to display in the picker. These are used to display the rows in the picker modal. ### multiple value: `boolean | number` The data headers for the picker. These are used to display the table headers in the picker modal. ### Header ### content value: `string` The content to display in the table column header. ### type value: `'string' | 'number'` The type of data to display in the column. The type is used to format the data in the column. If the type is 'number', the data in the column will be right-aligned, this should be used when referencing currency or numeric values. If the type is 'string', the data in the column will be left-aligned. ### Item ### badges value: `Badge[]` - Badge: interface Badge { content: string; tone?: Tone; progress?: Progress; } The badges to display in the first column of the row. These are used to display additional information about the item, such as progress of an action or tone indicating the status of that item. ### data value: `DataPoint[]` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - DataPoint: string | number | undefined The additional content to display in the second and third columns of the row, if provided. ### disabled value: `boolean` Whether the item is disabled or not. If the item is disabled, it cannot be selected. ### heading value: `string` The primary content to display in the first column of the row. ### id value: `string` The unique identifier of the item. This will be returned by the picker if selected. ### selected value: `boolean` Whether the item is selected or not when the picker is opened. The user may deselect the item if it is preselected. ### thumbnail value: `{ url: string; }` The thumbnail to display at the start of the row. This is used to display an image or icon for the item. ### Badge ### content value: `string` ### progress value: `Progress` - Progress: 'incomplete' | 'partiallyComplete' | 'complete' ### tone value: `Tone` - Tone: 'info' | 'success' | 'warning' | 'critical' ### Picker ### selected value: `Promise` A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. ### ResourcePickerApi #### Returns: Promise | undefined> #### Params: - options: ResourcePickerOptions export type ResourcePickerApi = ( options: ResourcePickerOptions, ) => Promise | undefined>; ### ResourcePickerOptions ### action value: `'add' | 'select'` The action verb appears in the title and as the primary action of the Resource Picker. ### filter value: `Filters` - Filters: interface Filters { /** * Whether to show hidden resources, referring to products that are not published on any sales channels. * @defaultValue true */ hidden?: boolean; /** * Whether to show product variants. Only applies to the Product resource type picker. * @defaultValue true */ variants?: boolean; /** * Whether to show [draft products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). * Only applies to the Product resource type picker. * Setting this to undefined will show a badge on draft products. * @defaultValue true */ draft?: boolean | undefined; /** * Whether to show [archived products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). * Only applies to the Product resource type picker. * Setting this to undefined will show a badge on draft products. * @defaultValue true */ archived?: boolean | undefined; /** * GraphQL initial search query for filtering resources available in the picker. * See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for more information. * This is not displayed in the search bar when the picker is opened. */ query?: string; } Filters for what resource to show. ### multiple value: `boolean | number` Whether to allow selecting multiple items of a specific type or not. If a number is provided, then limit the selections to a maximum of that number of items. When type is Product, the user may still select multiple variants of a single product, even if multiple is false. ### query value: `string` GraphQL initial search query for filtering resources available in the picker. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for more information. This is displayed in the search bar when the picker is opened and can be edited by users. For most use cases, you should use the `filter.query` option instead which doesn't show the query in the UI. ### selectionIds value: `BaseResource[]` - BaseResource: interface BaseResource extends Resource { variants?: Resource[]; } - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } Resources that should be preselected when the picker is opened. ### type value: `'product' | 'variant' | 'collection'` The type of resource you want to pick. ### Filters ### archived value: `boolean | undefined` Whether to show [archived products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). Only applies to the Product resource type picker. Setting this to undefined will show a badge on draft products. ### draft value: `boolean | undefined` Whether to show [draft products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). Only applies to the Product resource type picker. Setting this to undefined will show a badge on draft products. ### hidden value: `boolean` Whether to show hidden resources, referring to products that are not published on any sales channels. ### query value: `string` GraphQL initial search query for filtering resources available in the picker. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for more information. This is not displayed in the search bar when the picker is opened. ### variants value: `boolean` Whether to show product variants. Only applies to the Product resource type picker. ### BaseResource ### id value: `string` in GraphQL id format, ie 'gid://shopify/Product/1' ### variants value: `Resource[]` - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } ### Resource ### id value: `string` in GraphQL id format, ie 'gid://shopify/Product/1' ### ShouldRenderApi ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `Data` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } Information about the currently viewed or selected items. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### ShouldRenderOutput ### display value: `boolean` ### BlockExtensionApi ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `Data` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } Information about the currently viewed or selected items. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### navigation value: `Navigation` - Navigation: export interface Navigation { /** * Navigate to a specific route. * * @example navigation.navigate('extension://my-admin-action-extension-handle') */ navigate: (url: string | URL) => void; } Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). ### picker value: `PickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } Renders a custom [Picker](picker) dialog allowing users to select values from a list. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### resourcePicker value: `ResourcePickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } - ResourcePickerApi: export type ResourcePickerApi = ( options: ResourcePickerOptions, ) => Promise | undefined>; - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. ### Navigation ### navigate value: `(url: string | URL) => void` Navigate to a specific route. ### DiscountFunctionSettingsApi ### applyMetafieldChange value: `ApplyMetafieldChange` - ApplyMetafieldChange: export type ApplyMetafieldChange = ( change: MetafieldChange, ) => Promise; - MetafieldChange: MetafieldUpdateChange | MetafieldRemoveChange - Metafield: interface Metafield { description?: string; id: string; namespace: string; key: string; value: string; type: string; } Applies a change to the discount function settings. ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `DiscountFunctionSettingsData` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - DiscountFunctionSettingsData: export interface DiscountFunctionSettingsData { id: Discount; metafields: Metafield[]; } - Discount: interface Discount { /** * the discount's gid */ id: string; } ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### ApplyMetafieldChange #### Returns: Promise #### Params: - change: MetafieldChange export type ApplyMetafieldChange = ( change: MetafieldChange, ) => Promise; ### MetafieldUpdateChange ### key value: `string` ### namespace value: `string` ### type value: `"updateMetafield"` - Metafield: interface Metafield { description?: string; id: string; namespace: string; key: string; value: string; type: string; } ### value value: `string | number` ### valueType value: `SupportedDefinitionType` - SupportedDefinitionType: 'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight' ### MetafieldRemoveChange ### key value: `string` ### namespace value: `string` ### type value: `"removeMetafield"` - Metafield: interface Metafield { description?: string; id: string; namespace: string; key: string; value: string; type: string; } ### MetafieldChangeSuccess ### type value: `"success"` ### MetafieldChangeResultError ### message value: `string` ### type value: `"error"` ### DiscountFunctionSettingsData The object that exposes the validation with its settings. ### id value: `Discount` - Discount: interface Discount { /** * the discount's gid */ id: string; } ### metafields value: `Metafield[]` - Metafield: interface Metafield { description?: string; id: string; namespace: string; key: string; value: string; type: string; } ### Discount ### id value: `string` the discount's gid ### Metafield ### description value: `string` ### id value: `string` ### key value: `string` ### namespace value: `string` ### type value: `string` ### value value: `string` ### PrintActionExtensionApi ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `Data` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } Information about the currently viewed or selected items. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### picker value: `PickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } Renders a custom [Picker](picker) dialog allowing users to select values from a list. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### resourcePicker value: `ResourcePickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } - ResourcePickerApi: export type ResourcePickerApi = ( options: ResourcePickerOptions, ) => Promise | undefined>; - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. ### ProductDetailsConfigurationApi ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - Product: interface Product { id: string; title: string; handle: string; status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT'; totalVariants: number; totalInventory: number; hasOnlyDefaultVariant: boolean; onlineStoreUrl?: string; options: { id: string; name: string; position: number; values: string[]; }[]; productType: string; productCategory?: string; productComponents: ProductComponent[]; } Information about the currently viewed or selected items. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### navigation value: `Navigation` - Navigation: export interface Navigation { /** * Navigate to a specific route. * * @example navigation.navigate('extension://my-admin-action-extension-handle') */ navigate: (url: string | URL) => void; } Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). ### picker value: `PickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } Renders a custom [Picker](picker) dialog allowing users to select values from a list. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### resourcePicker value: `ResourcePickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } - ResourcePickerApi: export type ResourcePickerApi = ( options: ResourcePickerOptions, ) => Promise | undefined>; - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. ### Product ### handle value: `string` ### hasOnlyDefaultVariant value: `boolean` ### id value: `string` ### onlineStoreUrl value: `string` ### options value: `{ id: string; name: string; position: number; values: string[]; }[]` ### productCategory value: `string` ### productComponents value: `ProductComponent[]` - Product: interface Product { id: string; title: string; handle: string; status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT'; totalVariants: number; totalInventory: number; hasOnlyDefaultVariant: boolean; onlineStoreUrl?: string; options: { id: string; name: string; position: number; values: string[]; }[]; productType: string; productCategory?: string; productComponents: ProductComponent[]; } - ProductComponent: export interface ProductComponent { id: string; title: string; featuredImage?: { id?: string | null; url?: string | null; altText?: string | null; } | null; totalVariants: number; productUrl: string; componentVariantsCount: number; nonComponentVariantsCount: number; } ### productType value: `string` ### status value: `'ACTIVE' | 'ARCHIVED' | 'DRAFT'` ### title value: `string` ### totalInventory value: `number` ### totalVariants value: `number` ### ProductComponent ### componentVariantsCount value: `number` ### featuredImage value: `{ id?: string | null; url?: string | null; altText?: string | null; } | null` ### id value: `string` ### nonComponentVariantsCount value: `number` ### productUrl value: `string` ### title value: `string` ### totalVariants value: `number` ### PurchaseOptionsCardConfigurationApi ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### close value: `() => void` Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. ### data value: `{ selected: { id: string; sellingPlanId?: string; }[]; }` Information about the currently viewed or selected items. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### picker value: `PickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } Renders a custom [Picker](picker) dialog allowing users to select values from a list. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### resourcePicker value: `ResourcePickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } - ResourcePickerApi: export type ResourcePickerApi = ( options: ResourcePickerOptions, ) => Promise | undefined>; - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. ### ProductVariantDetailsConfigurationApi ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - Product: interface Product { id: string; title: string; handle: string; status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT'; totalVariants: number; totalInventory: number; hasOnlyDefaultVariant: boolean; onlineStoreUrl?: string; options: { id: string; name: string; position: number; values: string[]; }[]; productType: string; productCategory?: string; productComponents: ProductComponent[]; } - ProductVariant: interface ProductVariant { id: string; sku: string; barcode: string; title: string; displayName: string; price: string; compareAtPrice: string; taxable: boolean; taxCode: string; weight: number; selectedOptions: { name: string; value: string; }[]; productVariantComponents: ProductVariantComponent[]; } Information about the currently viewed or selected items. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### navigation value: `Navigation` - Navigation: export interface Navigation { /** * Navigate to a specific route. * * @example navigation.navigate('extension://my-admin-action-extension-handle') */ navigate: (url: string | URL) => void; } Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). ### picker value: `PickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } Renders a custom [Picker](picker) dialog allowing users to select values from a list. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### resourcePicker value: `ResourcePickerApi` - PickerApi: export type PickerApi = (options: PickerOptions) => Promise; - Picker: interface Picker { /** * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. */ selected: Promise; } - ResourcePickerApi: export type ResourcePickerApi = ( options: ResourcePickerOptions, ) => Promise | undefined>; - Resource: interface Resource { /** in GraphQL id format, ie 'gid://shopify/Product/1' */ id: string; } Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. ### ProductVariant ### barcode value: `string` ### compareAtPrice value: `string` ### displayName value: `string` ### id value: `string` ### price value: `string` ### productVariantComponents value: `ProductVariantComponent[]` - Product: interface Product { id: string; title: string; handle: string; status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT'; totalVariants: number; totalInventory: number; hasOnlyDefaultVariant: boolean; onlineStoreUrl?: string; options: { id: string; name: string; position: number; values: string[]; }[]; productType: string; productCategory?: string; productComponents: ProductComponent[]; } - ProductVariant: interface ProductVariant { id: string; sku: string; barcode: string; title: string; displayName: string; price: string; compareAtPrice: string; taxable: boolean; taxCode: string; weight: number; selectedOptions: { name: string; value: string; }[]; productVariantComponents: ProductVariantComponent[]; } - ProductVariantComponent: export interface ProductVariantComponent { id: string; displayName: string; title: string; sku?: string; image?: { id?: string | null; url?: string | null; altText?: string | null; } | null; productVariantUrl: string; selectedOptions: { name: string; value: string; }[]; } ### selectedOptions value: `{ name: string; value: string; }[]` ### sku value: `string` ### taxable value: `boolean` ### taxCode value: `string` ### title value: `string` ### weight value: `number` ### ProductVariantComponent ### displayName value: `string` ### id value: `string` ### image value: `{ id?: string | null; url?: string | null; altText?: string | null; } | null` ### productVariantUrl value: `string` ### selectedOptions value: `{ name: string; value: string; }[]` ### sku value: `string` ### title value: `string` ### OrderRoutingRuleApi ### applyMetafieldsChange value: `ApplyMetafieldsChange` - Metafield: interface Metafield { description?: string; id: string; namespace: string; key: string; value: string; type: string; } - ApplyMetafieldsChange: export type ApplyMetafieldsChange = (changes: MetafieldsChange[]) => void; - MetafieldsChange: MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[] ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `Data` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### ApplyMetafieldsChange #### Returns: void #### Params: - changes: MetafieldsChange[] export type ApplyMetafieldsChange = (changes: MetafieldsChange[]) => void; ### InternalLocationListProps ### locationGroups value: `LocationGroup[]` - LocationGroup: export interface LocationGroup { /** * An array of locations within the group. */ locations: Location[]; /** * The label for the location group. */ label: string; /** * A unique identifier for the location group. */ id: string; } - Location: export interface Location { /** * A unique identifier for the location. */ id: string; /** * The name of the location. */ name: string; } An array of location groups. ### onCreateGroup value: `(id: string) => void` Callback when a new group is created. It receives the id of the new group as a parameter. ### onDeleteGroup value: `(id: string) => void` Callback when a location group is deleted. It receives the id of the group as a parameter. ### onMoveGroup value: `(oldIndex: number, newIndex: number) => void` Callback when a location group is moved. It receives the old index and the new index as parameters. ### onMoveTag value: `(tagId: number, oldGroupIndex: number, newGroupIndex: number) => void` Callback when a tag is moved from one group to another. It receives the id of the tag, the old group index, and the new group index as parameters. ### onRenameGroup value: `(id: string, name: string) => void` Callback when a location group is renamed. It receives the id of the group and the new name as parameters. ### LocationGroup ### id value: `string` A unique identifier for the location group. ### label value: `string` The label for the location group. ### locations value: `Location[]` - Location: export interface Location { /** * A unique identifier for the location. */ id: string; /** * The name of the location. */ name: string; } An array of locations within the group. ### Location ### id value: `string` A unique identifier for the location. ### name value: `string` The name of the location. ### ValidationSettingsApi ### applyMetafieldChange value: `ApplyMetafieldChange` - ApplyMetafieldChange: export type ApplyMetafieldChange = ( change: MetafieldChange, ) => Promise; - MetafieldChange: MetafieldUpdateChange | MetafieldRemoveChange - Metafield: interface Metafield { description?: string; id: string; namespace: string; key: string; value: string; type: string; } Applies a change to the validation settings. ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### data value: `ValidationData` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ValidationData: export interface ValidationData { validation?: Validation; shopifyFunction: ShopifyFunction; } - Validation: interface Validation { /** * the validation's gid when active in a shop */ id: string; /** * the metafields owned by the validation */ metafields: Metafield[]; } ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### ValidationData The object that exposes the validation with its settings. ### shopifyFunction value: `ShopifyFunction` - ShopifyFunction: interface ShopifyFunction { /** * the validation function's unique identifier */ id: string; } ### validation value: `Validation` - Validation: interface Validation { /** * the validation's gid when active in a shop */ id: string; /** * the metafields owned by the validation */ metafields: Metafield[]; } ### ShopifyFunction ### id value: `string` the validation function's unique identifier ### Validation ### id value: `string` the validation's gid when active in a shop ### metafields value: `Metafield[]` - Metafield: interface Metafield { description?: string; id: string; namespace: string; key: string; value: string; type: string; } the metafields owned by the validation ### StandardApi The following APIs are provided to all extension targets. ### auth value: `Auth` - Auth: interface Auth { /** * Retrieves a Shopify OpenID Connect ID token for the current user. */ idToken: () => Promise; } Provides methods for authenticating calls to an app backend. ### extension value: `{ target: ExtensionTarget; }` - ExtensionTarget: keyof ExtensionTargets The identifier of the running extension target. ### i18n value: `I18n` - I18n: export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ### intents value: `Intents` - Intents: export interface Intents { /** * The URL that was used to launch the intent. */ launchUrl?: string | URL; } Provides information to the receiver the of an intent. ### query value: `(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>` - Data: export interface Data { /** * Information about the currently viewed or selected items. */ selected: {id: string}[]; } - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable' - GraphQLError: export interface GraphQLError { message: string; locations: { line: number; column: string; }; } Used to query the Admin GraphQL API ### GraphQLError GraphQL error returned by the Shopify Admin API. ### locations value: `{ line: number; column: string; }` ### message value: `string`