--- title: Customer Segment Template Extension API description: This API is available to all customer segment template extension types. api_version: 2026-01 api_name: admin-extensions source_url: html: >- https://shopify.dev/docs/api/admin-extensions/latest/target-apis/contextual-apis/customer-segment-template-extension-api md: >- https://shopify.dev/docs/api/admin-extensions/latest/target-apis/contextual-apis/customer-segment-template-extension-api.md --- # Customer Segment Template Extension API This API is available to all customer segment template extension types. ## CustomerSegmentTemplateApi * **auth** **Auth** **required** Provides methods for authenticating calls to an app backend. * **extension** **{ target: ExtensionTarget; }** **required** The identifier of the running extension target. * **i18n** **I18n** **required** Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions * **intents** **Intents** **required** Provides information to the receiver of an intent. * **query** **\(query: string, options?: { variables?: Variables; version?: Omit\; }) => Promise<{ data?: Data; errors?: GraphQLError\[]; }>** **required** Used to query the Admin GraphQL API * **storage** **Storage** **required** Provides methods for setting, getting, and clearing browser data from the extension ### Auth * idToken Retrieves a Shopify OpenID Connect ID token for the current user. ```ts () => Promise ``` ### ExtensionTarget ```ts keyof ExtensionTargets ``` ### ExtensionTargets * admin.abandoned-checkout-details.action.render Renders an admin action extension in the abandoned checkout page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>, ActionExtensionComponents > ``` * admin.abandoned-checkout-details.action.should-render Controls the render state of an admin action extension in the abandoned checkout page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>, ShouldRenderOutput > ``` * admin.abandoned-checkout-details.block.render Renders an admin block in the abandoned checkout details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>, BlockExtensionComponents > ``` * admin.app.tools.data Provides tools data for the admin tools functionality. ```ts RunnableExtension< StandardApi<'admin.app.tools.data'>, undefined > ``` * admin.catalog-details.action.render Renders an admin action extension in the catalog details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.catalog-details.action.render'>, ActionExtensionComponents > ``` * admin.catalog-details.action.should-render Controls the render state of an admin action extension in the catalog details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.catalog-details.action.should-render'>, ShouldRenderOutput > ``` * admin.catalog-details.block.render Renders an admin block in the catalog details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.catalog-details.block.render'>, BlockExtensionComponents > ``` * admin.collection-details.action.render Renders an admin action extension in the collection details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.collection-details.action.render'>, ActionExtensionComponents > ``` * admin.collection-details.action.should-render Controls the render state of an admin action extension in the collection details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.collection-details.action.should-render'>, ShouldRenderOutput > ``` * admin.collection-details.block.render Renders an admin block in the collection details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.collection-details.block.render'>, BlockExtensionComponents > ``` * admin.collection-index.action.render Renders an admin action extension in the collection index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.collection-index.action.render'>, ActionExtensionComponents > ``` * admin.collection-index.action.should-render Controls the render state of an admin action extension in the collection index page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.collection-index.action.should-render'>, ShouldRenderOutput > ``` * admin.company-details.action.render Renders an admin action extension in the company details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.company-details.action.render'>, ActionExtensionComponents > ``` * admin.company-details.action.should-render Controls the render state of an admin action extension in the company details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.company-details.action.should-render'>, ShouldRenderOutput > ``` * admin.company-details.block.render Renders an admin block in the company details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.company-details.block.render'>, BlockExtensionComponents > ``` * admin.company-location-details.block.render Renders an admin block in the company location details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.company-location-details.block.render'>, BlockExtensionComponents > ``` * admin.customer-details.action.render Renders an admin action extension in the customer details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.customer-details.action.render'>, ActionExtensionComponents > ``` * admin.customer-details.action.should-render Controls the render state of an admin action extension in the customer details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.customer-details.action.should-render'>, ShouldRenderOutput > ``` * admin.customer-details.block.render Renders an admin block in the customer details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.customer-details.block.render'>, BlockExtensionComponents > ``` * admin.customer-index.action.render Renders an admin action extension in the customer index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.customer-index.action.render'>, ActionExtensionComponents > ``` * admin.customer-index.action.should-render Controls the render state of an admin action extension in the customer index page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.customer-index.action.should-render'>, ShouldRenderOutput > ``` * admin.customer-index.selection-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.customer-index.selection-action.render'>, ActionExtensionComponents > ``` * admin.customer-index.selection-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.customer-index.selection-action.should-render'>, ShouldRenderOutput > ``` * admin.customer-segment-details.action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.customer-segment-details.action.render'>, ActionExtensionComponents > ``` * admin.customer-segment-details.action.should-render Controls the render state of an admin action extension in the customer segment details page. Open this extension from the "Use segment" button. ```ts RunnableExtension< ShouldRenderApi<'admin.customer-segment-details.action.should-render'>, ShouldRenderOutput > ``` * admin.customers.segmentation-templates.data Renders a \[\`CustomerSegmentTemplate\`]\(/docs/api/admin-extensions/components/customersegmenttemplate) in the \[customer segment editor]\(https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments). ```ts RunnableExtension< CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>, {templates: CustomerSegmentTemplate[]} > ``` * admin.discount-details.action.render Renders an admin action extension in the discount details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.discount-details.action.render'>, ActionExtensionComponents > ``` * admin.discount-details.action.should-render Controls the render state of an admin action extension in the discount details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.discount-details.action.should-render'>, ShouldRenderOutput > ``` * admin.discount-details.function-settings.render Renders an admin block in the discount details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>, FunctionSettingsComponents > ``` * admin.discount-index.action.render Renders an admin action extension in the discount index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.discount-index.action.render'>, ActionExtensionComponents > ``` * admin.discount-index.action.should-render Controls the render state of an admin action extension in the discount index page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.discount-index.action.should-render'>, ShouldRenderOutput > ``` * admin.draft-order-details.action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.draft-order-details.action.render'>, ActionExtensionComponents > ``` * admin.draft-order-details.action.should-render Controls the render state of an admin action extension in the draft order details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.draft-order-details.action.should-render'>, ShouldRenderOutput > ``` * admin.draft-order-details.block.render Renders an admin block in the draft order details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.draft-order-details.block.render'>, BlockExtensionComponents > ``` * admin.draft-order-index.action.render Renders an admin action extension in the draft orders page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.draft-order-index.action.render'>, ActionExtensionComponents > ``` * admin.draft-order-index.action.should-render Controls the render state of an admin action extension in the draft orders page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.draft-order-index.action.should-render'>, ShouldRenderOutput > ``` * admin.draft-order-index.selection-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.draft-order-index.selection-action.render'>, ActionExtensionComponents > ``` * admin.draft-order-index.selection-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>, ShouldRenderOutput > ``` * admin.gift-card-details.action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.gift-card-details.action.render'>, ActionExtensionComponents > ``` * admin.gift-card-details.action.should-render Controls the render state of an admin action extension in the gift card details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.gift-card-details.action.should-render'>, ShouldRenderOutput > ``` * admin.gift-card-details.block.render Renders an admin block in the gift card details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.gift-card-details.block.render'>, BlockExtensionComponents > ``` * admin.order-details.action.render Renders an admin action extension in the order details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.order-details.action.render'>, ActionExtensionComponents > ``` * admin.order-details.action.should-render Controls the render state of an admin action extension in the order details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.order-details.action.should-render'>, ShouldRenderOutput > ``` * admin.order-details.block.render Renders an admin block in the order details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.order-details.block.render'>, BlockExtensionComponents > ``` * admin.order-details.print-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< PrintActionExtensionApi<'admin.order-details.print-action.render'>, PrintActionExtensionComponents > ``` * admin.order-details.print-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.order-details.print-action.should-render'>, ShouldRenderOutput > ``` * admin.order-fulfilled-card.action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.order-fulfilled-card.action.render'>, ActionExtensionComponents > ``` * admin.order-fulfilled-card.action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>, ShouldRenderOutput > ``` * admin.order-index.action.render Renders an admin action extension in the order index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.order-index.action.render'>, ActionExtensionComponents > ``` * admin.order-index.action.should-render Controls the render state of an admin action extension in the order index page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.order-index.action.should-render'>, ShouldRenderOutput > ``` * admin.order-index.selection-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.order-index.selection-action.render'>, ActionExtensionComponents > ``` * admin.order-index.selection-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.order-index.selection-action.should-render'>, ShouldRenderOutput > ``` * admin.order-index.selection-print-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>, PrintActionExtensionComponents > ``` * admin.order-index.selection-print-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>, ShouldRenderOutput > ``` * admin.product-details.action.render Renders an admin action extension in the product details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.product-details.action.render'>, ActionExtensionComponents > ``` * admin.product-details.action.should-render Controls the render state of an admin action extension in the product details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.product-details.action.should-render'>, ShouldRenderOutput > ``` * admin.product-details.block.render Renders an admin block in the product details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.product-details.block.render'>, BlockExtensionComponents > ``` * admin.product-details.configuration.render Renders Product Configuration on product details and product variant details See the \[tutorial]\(/docs/apps/selling-strategies/bundles/product-config) for more information ```ts RenderExtension< ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>, BlockExtensionComponents > ``` * admin.product-details.print-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< PrintActionExtensionApi<'admin.product-details.print-action.render'>, PrintActionExtensionComponents > ``` * admin.product-details.print-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.product-details.print-action.should-render'>, ShouldRenderOutput > ``` * admin.product-details.reorder.render Renders an admin block in the product details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.product-details.reorder.render'>, BlockExtensionComponents > ``` * admin.product-index.action.render Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.product-index.action.render'>, ActionExtensionComponents > ``` * admin.product-index.action.should-render Controls the render state of an admin action extension in the product index page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.product-index.action.should-render'>, ShouldRenderOutput > ``` * admin.product-index.selection-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.product-index.selection-action.render'>, ActionExtensionComponents > ``` * admin.product-index.selection-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.product-index.selection-action.should-render'>, ShouldRenderOutput > ``` * admin.product-index.selection-print-action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>, PrintActionExtensionComponents > ``` * admin.product-index.selection-print-action.should-render 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. ```ts RunnableExtension< ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>, ShouldRenderOutput > ``` * admin.product-purchase-option.action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>, ActionExtensionComponents > ``` * admin.product-variant-details.action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ActionExtensionApi<'admin.product-variant-details.action.render'>, ActionExtensionComponents > ``` * admin.product-variant-details.action.should-render Controls the render state of an admin action extension in the product variant details page. Open this extension from the "More Actions" menu. ```ts RunnableExtension< ShouldRenderApi<'admin.product-variant-details.action.should-render'>, ShouldRenderOutput > ``` * admin.product-variant-details.block.render Renders an admin block in the product variant details page. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< BlockExtensionApi<'admin.product-variant-details.block.render'>, BlockExtensionComponents > ``` * admin.product-variant-details.configuration.render Renders Product Configuration on product details and product variant details See the \[tutorial]\(/docs/apps/selling-strategies/bundles/product-config) for more information ```ts RenderExtension< ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>, BlockExtensionComponents > ``` * admin.product-variant-purchase-option.action.render 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]\(/docs/api/admin-extensions/components). ```ts RenderExtension< PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>, ActionExtensionComponents > ``` * admin.settings.internal-order-routing-rule.render Renders Order Routing Rule Configuration on order routing settings. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>, FunctionSettingsComponents > ``` * admin.settings.order-routing-rule.render ```ts RenderExtension< OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>, FunctionSettingsComponents > ``` * admin.settings.validation.render Renders Validation Settings within a given validation's add and edit views. See the \[list of available components]\(/docs/api/admin-extensions/components). ```ts RenderExtension< ValidationSettingsApi<'admin.settings.validation.render'>, FunctionSettingsComponents > ``` ### RenderExtension * api ```ts Api ``` * components ```ts ComponentsSet ``` * output ```ts void | Promise ``` ### ActionExtensionApi * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * close Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. ```ts () => void ``` * data Information about the currently viewed or selected items. ```ts Data ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * picker Renders a custom \[Picker]\(picker) dialog allowing users to select values from a list. ```ts PickerApi ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * resourcePicker Renders the \[Resource Picker]\(resource-picker), allowing users to select a resource for the extension to use as part of its flow. ```ts ResourcePickerApi ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### Data * selected Information about the currently viewed or selected items. ```ts { id: string; }[] ``` ### I18n * formatCurrency Returns a localized currency value. This function behaves like the standard \`Intl.NumberFormat()\` with a style of \`currency\` applied. It uses the buyer's locale by default. ```ts (number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string ``` * formatDate Returns a localized date value. This function behaves like the standard \`Intl.DateTimeFormatOptions()\` and uses the buyer's locale by default. Formatting options can be passed in as options. ```ts (date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string ``` * formatNumber Returns a localized number. This function behaves like the standard \`Intl.NumberFormat()\` with a style of \`decimal\` applied. It uses the buyer's locale by default. ```ts (number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string ``` * translate Returns translated content in the buyer's locale, as supported by the extension. - \`options.count\` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then \`translate()\` returns a single string. - If replacements contain UI components, then \`translate()\` returns an array of elements. ```ts I18nTranslate ``` ### I18nTranslate This defines the i18n.translate() signature. ### Intents Intent information provided to the receiver of an intent. * invoke Invoke an intent workflow to create or edit Shopify resources. ```ts IntentInvokeApi ``` * launchUrl The URL that was used to launch the intent. ```ts string | URL ``` ### IntentInvokeApi The invoke API for triggering intent workflows. ### PickerApi * options ```ts PickerOptions ``` Promise\ ```ts Promise ``` ### PickerOptions * headers The data headers for the picker. These are used to display the table headers in the picker modal. ```ts Header[] ``` * heading The heading of the picker. This is displayed in the title of the picker modal. ```ts string ``` * items The items to display in the picker. These are used to display the rows in the picker modal. ```ts Item[] ``` * multiple The data headers for the picker. These are used to display the table headers in the picker modal. ```ts boolean | number ``` ### Header * content The content to display in the table column header. ```ts string ``` * type 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. ```ts 'string' | 'number' ``` ### Item * badges 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. ```ts PickerBadge[] ``` * data The additional content to display in the second and third columns of the row, if provided. ```ts DataPoint[] ``` * disabled Whether the item is disabled or not. If the item is disabled, it cannot be selected. ```ts boolean ``` * heading The primary content to display in the first column of the row. ```ts string ``` * id The unique identifier of the item. This will be returned by the picker if selected. ```ts string ``` * selected Whether the item is selected or not when the picker is opened. The user may deselect the item if it is preselected. ```ts boolean ``` * thumbnail The thumbnail to display at the start of the row. This is used to display an image or icon for the item. ```ts { url: string; } ``` ### PickerBadge * content ```ts string ``` * progress ```ts Progress ``` * tone ```ts Tone ``` ### Progress ```ts 'incomplete' | 'partiallyComplete' | 'complete' ``` ### Tone ```ts 'info' | 'success' | 'warning' | 'critical' ``` ### DataPoint ```ts string | number | undefined ``` ### Picker * selected A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker. ```ts Promise ``` ### ApiVersion Union of supported API versions ```ts '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' ``` ### GraphQLError GraphQL error returned by the Shopify Admin API. * locations ```ts { line: number; column: string; } ``` * message ```ts string ``` ### ResourcePickerApi * options ```ts ResourcePickerOptions ``` Promise\ | undefined> ```ts Promise | undefined> ``` ### ResourcePickerOptions * action The action verb appears in the title and as the primary action of the Resource Picker. ```ts 'add' | 'select' ``` * filter Filters for what resource to show. ```ts Filters ``` * multiple 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. ```ts boolean | number ``` * query GraphQL initial search query for filtering resources available in the picker. See \[search syntax]\(/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. ```ts string ``` * selectionIds Resources that should be preselected when the picker is opened. ```ts BaseResource[] ``` * type The type of resource you want to pick. ```ts 'product' | 'variant' | 'collection' ``` ### Filters * archived 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. ```ts boolean | undefined ``` * draft 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. ```ts boolean | undefined ``` * hidden Whether to show hidden resources, referring to products that are not published on any sales channels. ```ts boolean ``` * query GraphQL initial search query for filtering resources available in the picker. See \[search syntax]\(/docs/api/usage/search-syntax) for more information. This is not displayed in the search bar when the picker is opened. ```ts string ``` * variants Whether to show product variants. Only applies to the Product resource type picker. ```ts boolean ``` ### BaseResource * id in GraphQL id format, ie 'gid://shopify/Product/1' ```ts string ``` * variants ```ts Resource[] ``` ### Resource * id in GraphQL id format, ie 'gid://shopify/Product/1' ```ts string ``` ### SelectPayload ```ts SelectPayload ``` ### Storage * clear Clears the storage. ```ts () => Promise ``` * delete Deletes a key from the storage. ```ts (key: Keys) => Promise ``` * deleteMany Deletes multiple keys from the storage at once. ```ts (keys: Keys[]) => Promise> ``` * entries Gets all the keys and values in the storage. ```ts () => Promise> ``` * get Gets the value of a key in the storage. ```ts (key: Keys) => Promise ``` * getMany Gets the values of multiple keys in the storage at once. ```ts (keys: Keys[]) => Promise ``` * set Sets the value of a key in the storage. ```ts (key: Keys, value: StorageTypes[Keys]) => Promise ``` * setMany Sets multiple key-value pairs in the storage at once. If the operation fails, no changes are made to storage. ```ts (entries: Partial) => Promise ``` ### ActionExtensionComponents ```ts StandardComponents | 'AdminAction' ``` ### StandardComponents ```ts 'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField' ``` ### RunnableExtension * api ```ts Api ``` * output ```ts Output | Promise ``` ### ShouldRenderApi * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data Information about the currently viewed or selected items. ```ts Data ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### ShouldRenderOutput * display ```ts boolean ``` ### BlockExtensionApi * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data Information about the currently viewed or selected items. ```ts Data ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * navigation 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\`). ```ts Navigation ``` * picker Renders a custom \[Picker]\(picker) dialog allowing users to select values from a list. ```ts PickerApi ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * resourcePicker Renders the \[Resource Picker]\(resource-picker), allowing users to select a resource for the extension to use as part of its flow. ```ts ResourcePickerApi ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### Navigation * navigate Navigate to a specific route. ```ts (url: string | URL) => void ``` ### BlockExtensionComponents ```ts StandardComponents | 'AdminBlock' | 'Form' ``` ### StandardApi The following APIs are provided to all extension targets. * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### CustomerSegmentTemplate * createdOn ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month. ```ts string ``` * dependencies The list of customer standard metafields or custom metafields used in the template's query. ```ts { standardMetafields?: "facts.birth_date"[]; customMetafields?: string[]; } ``` * description The localized description of the template. An array can be used for multiple paragraphs. ```ts string | string[] ``` * query The code snippet to render in the template with syntax highlighting. The \`query\` is not validated in the template. ```ts string ``` * queryToInsert The code snippet to insert in the segment editor. If missing, \`query\` will be used. The \`queryToInsert\` is not validated in the template. ```ts string ``` * title The localized title of the template. ```ts string ``` ### DiscountFunctionSettingsApi * applyMetafieldChange Applies a change to the discount function settings. ```ts ApplyMetafieldChange ``` * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data ```ts DiscountFunctionSettingsData ``` * discounts ```ts DiscountsApi ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * navigation 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\`). ```ts Navigation ``` * picker Renders a custom \[Picker]\(picker) dialog allowing users to select values from a list. ```ts PickerApi ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * resourcePicker Renders the \[Resource Picker]\(resource-picker), allowing users to select a resource for the extension to use as part of its flow. ```ts ResourcePickerApi ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### ApplyMetafieldChange * change ```ts MetafieldChange ``` Promise\ ```ts Promise ``` ### MetafieldChange ```ts MetafieldUpdateChange | MetafieldRemoveChange ``` ### MetafieldUpdateChange * key ```ts string ``` * namespace ```ts string ``` * type ```ts 'updateMetafield' ``` * value ```ts string | number ``` * valueType ```ts SupportedDefinitionType ``` ### SupportedDefinitionType ```ts '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 ```ts string ``` * namespace ```ts string ``` * type ```ts 'removeMetafield' ``` ### MetafieldChangeResult ```ts MetafieldChangeSuccess | MetafieldChangeResultError ``` ### MetafieldChangeSuccess * type ```ts 'success' ``` ### MetafieldChangeResultError * message ```ts string ``` * type ```ts 'error' ``` ### DiscountFunctionSettingsData The object that exposes the validation with its settings. * id The unique identifier for the discount. ```ts string ``` * metafields The discount metafields. ```ts Metafield[] ``` ### Metafield * description ```ts string ``` * id ```ts string ``` * key ```ts string ``` * namespace ```ts string ``` * type ```ts string ``` * value ```ts string ``` ### DiscountsApi Reactive Api for managing discount function configuration. * discountClasses A signal that contains the discount classes. ```ts ReadonlySignalLike ``` * discountMethod A signal that contains the discount method. ```ts ReadonlySignalLike ``` * updateDiscountClasses A function that updates the discount classes. ```ts UpdateSignalFunction ``` ### ReadonlySignalLike Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern. * subscribe Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value. ```ts (fn: (value: T) => void) => () => void ``` * value The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup. ```ts T ``` ### DiscountClass ```ts 'product' | 'order' | 'shipping' ``` ### DiscountMethod ```ts 'automatic' | 'code' ``` ### UpdateSignalFunction A function that updates a signal and returns a result indicating success or failure. The function is typically used alongisde a ReadonlySignalLike object. * value ```ts T ``` Result\ ```ts Result ``` ### Result A result type that indicates the success or failure of an operation. ```ts {success: true; value: T} | {success: false; errors: ValidationError[]} ``` ### ValidationError A validation error object that is returned when an operation fails. * code A code identifier for the error. ```ts string ``` * issues Field-level validation issues ```ts { message: string; path: string[]; }[] ``` * message A message describing the error. ```ts string ``` * type ```ts 'error' ``` ### FunctionSettingsComponents ```ts FormExtensionComponents | 'FunctionSettings' ``` ### FormExtensionComponents ```ts StandardComponents | 'Form' ``` ### PrintActionExtensionApi * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data Information about the currently viewed or selected items. ```ts Data ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * picker Renders a custom \[Picker]\(picker) dialog allowing users to select values from a list. ```ts PickerApi ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * resourcePicker Renders the \[Resource Picker]\(resource-picker), allowing users to select a resource for the extension to use as part of its flow. ```ts ResourcePickerApi ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### PrintActionExtensionComponents ```ts StandardComponents | 'AdminPrintAction' ``` ### ProductDetailsConfigurationApi * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data Information about the currently viewed or selected items. ```ts Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; } ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * navigation 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\`). ```ts Navigation ``` * picker Renders a custom \[Picker]\(picker) dialog allowing users to select values from a list. ```ts PickerApi ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * resourcePicker Renders the \[Resource Picker]\(resource-picker), allowing users to select a resource for the extension to use as part of its flow. ```ts ResourcePickerApi ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### Product * handle ```ts string ``` * hasOnlyDefaultVariant ```ts boolean ``` * id ```ts string ``` * onlineStoreUrl ```ts string ``` * options ```ts { id: string; name: string; position: number; values: string[]; }[] ``` * productCategory ```ts string ``` * productComponents ```ts ProductComponent[] ``` * productType ```ts string ``` * status ```ts 'ACTIVE' | 'ARCHIVED' | 'DRAFT' ``` * title ```ts string ``` * totalInventory ```ts number ``` * totalVariants ```ts number ``` ### ProductComponent * componentVariantsCount ```ts number ``` * featuredImage ```ts { id?: string | null; url?: string | null; altText?: string | null; } | null ``` * id ```ts string ``` * nonComponentVariantsCount ```ts number ``` * productUrl ```ts string ``` * title ```ts string ``` * totalVariants ```ts number ``` ### PurchaseOptionsCardConfigurationApi * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * close Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. ```ts () => void ``` * data Information about the currently viewed or selected items. ```ts { selected: { id: string; sellingPlanId?: string; }[]; } ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * picker Renders a custom \[Picker]\(picker) dialog allowing users to select values from a list. ```ts PickerApi ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * resourcePicker Renders the \[Resource Picker]\(resource-picker), allowing users to select a resource for the extension to use as part of its flow. ```ts ResourcePickerApi ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### ProductVariantDetailsConfigurationApi * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data Information about the currently viewed or selected items. ```ts Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; } ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * navigation 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\`). ```ts Navigation ``` * picker Renders a custom \[Picker]\(picker) dialog allowing users to select values from a list. ```ts PickerApi ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * resourcePicker Renders the \[Resource Picker]\(resource-picker), allowing users to select a resource for the extension to use as part of its flow. ```ts ResourcePickerApi ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### ProductVariant * barcode ```ts string ``` * compareAtPrice ```ts string ``` * displayName ```ts string ``` * id ```ts string ``` * price ```ts string ``` * productVariantComponents ```ts ProductVariantComponent[] ``` * selectedOptions ```ts { name: string; value: string; }[] ``` * sku ```ts string ``` * taxable ```ts boolean ``` * taxCode ```ts string ``` * title ```ts string ``` * weight ```ts number ``` ### ProductVariantComponent * displayName ```ts string ``` * id ```ts string ``` * image ```ts { id?: string | null; url?: string | null; altText?: string | null; } | null ``` * productVariantUrl ```ts string ``` * selectedOptions ```ts { name: string; value: string; }[] ``` * sku ```ts string ``` * title ```ts string ``` ### OrderRoutingRuleApi * applyMetafieldsChange ```ts ApplyMetafieldsChange ``` * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data ```ts Data ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### ApplyMetafieldsChange * changes ```ts MetafieldsChange[] ``` void ```ts void ``` ### MetafieldsChange ```ts MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[] ``` ### ValidationSettingsApi * applyMetafieldChange Applies a change to the validation settings. ```ts ApplyMetafieldChange ``` * auth Provides methods for authenticating calls to an app backend. ```ts Auth ``` * data ```ts ValidationData ``` * extension The identifier of the running extension target. ```ts { target: ExtensionTarget; } ``` * i18n Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions ```ts I18n ``` * intents Provides information to the receiver of an intent. ```ts Intents ``` * query Used to query the Admin GraphQL API ```ts (query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }> ``` * storage Provides methods for setting, getting, and clearing browser data from the extension ```ts Storage ``` ### ValidationData The object that exposes the validation with its settings. * shopifyFunction ```ts ShopifyFunction ``` * validation ```ts Validation ``` ### ShopifyFunction * id the validation function's unique identifier ```ts string ``` ### Validation * id the validation's gid when active in a shop ```ts string ``` * metafields the metafields owned by the validation ```ts Metafield[] ```