Choose a version:

Action Extension API

This API is available to all action extension types. Refer to the tutorial for more information. Note that the AdminAction component is required to build Admin action extensions.

Anchor to actionextensionapiActionExtensionApi

Anchor to auth auth required: Provides methods for authenticating calls to an app backend.
Anchor to close close () => void required: Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
Anchor to data data required: Information about the currently viewed or selected items.
Anchor to extension extension { target: ; } required: The identifier of the running extension target.
Anchor to 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
Anchor to intents intents required: Provides information to the receiver of an intent.
Anchor to picker picker required: Renders a custom Picker dialog allowing users to select values from a list.
Anchor to query query < = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<, "2023-04">; }) => Promise<{ data?: ; errors?: []; }> required: Used to query the Admin GraphQL API
Anchor to resourcePicker resourcePicker required: Renders the Resource Picker, allowing users to select a resource for the extension to use as part of its flow.
Anchor to 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.
```
() => Promise<string>
```

interface Auth {
  /**
   * Retrieves a Shopify OpenID Connect ID token for the current user.
   */
  idToken: () => Promise<string | null>;
}

Data

selected
Information about the currently viewed or selected items.
```
{ id: string; }[]
```

export interface Data {
  /**
   * Information about the currently viewed or selected items.
   */
  selected: {id: string}[];
}

ExtensionTarget

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).
```
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.
```
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).
```
RenderExtension<
    BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,
    BlockExtensionComponents
  >
```

admin.app.tools.data

Provides tools data for the admin tools functionality.

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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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.
```
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).
```
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).
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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.
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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.
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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.
```
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).
```
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.
```
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).
```
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.
```
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).
```
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.
```
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).
```
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.
```
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).
```
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
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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.
```
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).
```
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.
```
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).
```
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).
```
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.
```
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).
```
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
```
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).
```
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).
```
RenderExtension<
    OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,
    FunctionSettingsComponents
  >
```

admin.settings.order-routing-rule.render

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).
```
RenderExtension<
    ValidationSettingsApi<'admin.settings.validation.render'>,
    FunctionSettingsComponents
  >
```

export interface ExtensionTargets {
  /**
   * 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).
   */
  'admin.customers.segmentation-templates.data': RunnableExtension<
    CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,
    {templates: CustomerSegmentTemplate[]}
  >;

  // Blocks
  /**
   * Renders an admin block in the product details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.product-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the order details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.order-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.order-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the discount details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.discount-details.function-settings.render': RenderExtension<
    DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,
    FunctionSettingsComponents
  >;

  /**
   * Renders an admin block in the customer details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.customer-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.customer-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the collection details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.collection-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.collection-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the draft order details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.draft-order-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.draft-order-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the abandoned checkout details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.abandoned-checkout-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the catalog details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.catalog-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.catalog-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the company details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.company-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.company-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the company location details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.company-location-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.company-location-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the gift card details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.gift-card-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.gift-card-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the product variant details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-variant-details.block.render': RenderExtension<
    BlockExtensionApi<'admin.product-variant-details.block.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders an admin block in the product details page.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-details.reorder.render': RenderExtension<
    BlockExtensionApi<'admin.product-details.reorder.render'>,
    BlockExtensionComponents
  >;

  // Actions
  /**
   * 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).
   */
  'admin.product-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.product-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.catalog-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.catalog-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.company-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.company-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.gift-card-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.gift-card-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.order-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.order-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.customer-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.customer-segment-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-segment-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.product-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.product-index.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.order-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.order-index.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.customer-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-index.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.discount-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.discount-index.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.collection-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.collection-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.collection-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.collection-index.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.abandoned-checkout-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.product-variant-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.product-variant-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.draft-order-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.draft-order-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.draft-order-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.discount-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.discount-details.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.order-fulfilled-card.action.render': RenderExtension<
    ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,
    ActionExtensionComponents
  >;

  // Bulk Actions

  /**
   * 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).
   */
  'admin.product-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.product-index.selection-action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.order-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.order-index.selection-action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.customer-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-index.selection-action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.draft-order-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.product-purchase-option.action.render': RenderExtension<
    PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,
    ActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.product-variant-purchase-option.action.render': RenderExtension<
    PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,
    ActionExtensionComponents
  >;

  // Print actions and bulk print actions

  /**
   * 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).
   */
  'admin.order-details.print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.order-details.print-action.render'>,
    PrintActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.product-details.print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.product-details.print-action.render'>,
    PrintActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.order-index.selection-print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,
    PrintActionExtensionComponents
  >;

  /**
   * 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).
   */
  'admin.product-index.selection-print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,
    PrintActionExtensionComponents
  >;

  // Other

  /**
   * Renders Product Configuration on product details and product variant details
   *
   * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information
   */
  'admin.product-details.configuration.render': RenderExtension<
    ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders Product Configuration on product details and product variant details
   *
   * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information
   */
  'admin.product-variant-details.configuration.render': RenderExtension<
    ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,
    BlockExtensionComponents
  >;

  /**
   * Renders Order Routing Rule Configuration on order routing settings.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.settings.internal-order-routing-rule.render': RenderExtension<
    OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,
    FunctionSettingsComponents
  >;
  'admin.settings.order-routing-rule.render': RenderExtension<
    OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,
    FunctionSettingsComponents
  >;

  /**
   * Renders Validation Settings within a given validation's add and edit views.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.settings.validation.render': RenderExtension<
    ValidationSettingsApi<'admin.settings.validation.render'>,
    FunctionSettingsComponents
  >;

  // Admin action shouldRender targets
  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.product-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.catalog-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.company-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.gift-card-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.order-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.customer-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * Controls the render state of an admin action extension in the customer segment details page. Open this extension from the "Use segment" button.
   */
  'admin.customer-segment-details.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.product-index.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.order-index.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.customer-index.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * Controls the render state of an admin action extension in the discount index page. Open this extension from the "More Actions" menu.
   */
  'admin.discount-index.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.discount-index.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.collection-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * Controls the render state of an admin action extension in the collection index page. Open this extension from the "More Actions" menu.
   */
  'admin.collection-index.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.collection-index.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.product-variant-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.draft-order-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.draft-order-index.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.discount-details.action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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-fulfilled-card.action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,
    ShouldRenderOutput
  >;

  // Admin bulk action shouldRender targets

  /**
   * 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-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.product-index.selection-action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.order-index.selection-action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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-index.selection-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.draft-order-index.selection-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,
    ShouldRenderOutput
  >;

  // Admin print action and bulk print action shouldRender targets

  /**
   * 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-details.print-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.order-details.print-action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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.print-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.product-details.print-action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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-index.selection-print-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * 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-index.selection-print-action.should-render': RunnableExtension<
    ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,
    ShouldRenderOutput
  >;

  /**
   * Provides tools data for the admin tools functionality.
   */
  'admin.app.tools.data': RunnableExtension<
    StandardApi<'admin.app.tools.data'>,
    undefined
  >;
}

RenderExtension

api
```
Api
```
components
```
ComponentsSet
```
output
```
void | Promise<void>
```

export interface RenderExtension<Api, ComponentsSet extends string> {
  api: Api;
  components: ComponentsSet;
  output: void | Promise<void>;
}

ActionExtensionComponents

StandardComponents | 'AdminAction'

StandardComponents

'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
```
Api
```
output
```
Output | Promise<Output>
```

export interface RunnableExtension<Api, Output> {
  api: Api;
  output: Output | Promise<Output>;
}

ShouldRenderApi

auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
data
Information about the currently viewed or selected items.
```
Data
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>

storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface ShouldRenderApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}

I18n

formatCurrency
Returns a localized currency value. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
formatDate
Returns a localized date value. This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options.
```
(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string
```
formatNumber
Returns a localized number. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
translate
Returns translated content in the buyer's locale, as supported by the extension. - `options.count` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then `translate()` returns a single string. - If replacements contain UI components, then `translate()` returns an array of elements.
```
I18nTranslate
```

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

This defines the i18n.translate() signature.

export interface I18nTranslate {
  /**
   * This returns a translated string matching a key in a locale file.
   *
   * @example translate("banner.title")
   */
  <ReplacementType = string>(
    key: string,
    options?: Record<string, ReplacementType | string | number>,
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}

Intents

Intent information provided to the receiver of an intent.

invoke
Invoke an intent workflow to create or edit Shopify resources.
```
IntentInvokeApi
```
launchUrl
The URL that was used to launch the intent.
```
string | URL
```

export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
  /**
   * Invoke an intent workflow to create or edit Shopify resources.
   */
  invoke?: IntentInvokeApi;
}

IntentInvokeApi

The invoke API for triggering intent workflows.

export interface IntentInvokeApi {
  (query: IntentQuery): Promise<IntentActivity>;
  (intentURL: string, options?: IntentQueryOptions): Promise<IntentActivity>;
}

ApiVersion

Union of supported API versions

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

GraphQLError

GraphQL error returned by the Shopify Admin API.

locations
```
{ line: number; column: string; }
```
message
```
string
```

export interface GraphQLError {
  message: string;
  locations: {
    line: number;
    column: string;
  };
}

Storage

clear
Clears the storage.
```
() => Promise<void>
```

delete

Deletes a key from the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<boolean>

deleteMany

Deletes multiple keys from the storage at once.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(keys: Keys[]) => Promise<Record<Keys, boolean>>

entries

Gets all the keys and values in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>() => Promise<IterableIterator<[Keys, StorageTypes[Keys]]>>

get

Gets the value of a key in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<StorageTypes[Keys]>

getMany

Gets the values of multiple keys in the storage at once.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(keys: Keys[]) => Promise<StorageTypes[Keys][]>

set

Sets the value of a key in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys, value: StorageTypes[Keys]) => Promise<void>

setMany
Sets multiple key-value pairs in the storage at once. If the operation fails, no changes are made to storage.
```
<StorageTypes extends BaseStorageTypes = BaseStorageTypes>(entries: Partial<StorageTypes>) => Promise<void>
```

export interface Storage<
  BaseStorageTypes extends Record<string, any> = Record<string, unknown>,
> {
  /**
   * Sets the value of a key in the storage.
   *
   * @param key - The key to set the value for.
   * @param value - The value to set for the key.
   * Can be any primitive type supported by `JSON.stringify`.
   *
   * Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.
   */
  set<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    key: Keys,
    value: StorageTypes[Keys],
  ): Promise<void>;

  /**
   * Sets multiple key-value pairs in the storage at once.
   *
   * If the operation fails, no changes are made to storage.
   *
   * @param entries - An object containing key-value pairs to store.
   * Values can be any primitive type supported by `JSON.stringify`.
   *
   * Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.
   */
  setMany<StorageTypes extends BaseStorageTypes = BaseStorageTypes>(
    entries: Partial<StorageTypes>,
  ): Promise<void>;

  /**
   * Gets the value of a key in the storage.
   *
   * @param key - The key to get the value for.
   * @returns The value of the key.
   *
   * If no value for the key exists, the resolved value is undefined.
   */
  get<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    key: Keys,
  ): Promise<StorageTypes[Keys] | undefined>;

  /**
   * Gets the values of multiple keys in the storage at once.
   *
   * @param keys - An array of keys to get the values for.
   * @returns An object containing key-value pairs for the requested keys.
   *
   * The returned array is in the same order as `keys`, with `undefined` values for keys that do not exist.
   */
  getMany<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    keys: Keys[],
  ): Promise<(StorageTypes[Keys] | undefined)[]>;

  /**
   * Clears the storage.
   */
  clear(): Promise<void>;

  /**
   * Deletes a key from the storage.
   *
   * @param key - The key to delete.
   * @returns A promise that resolves to `true` if the key was deleted, or `false` if the key did not exist.
   */
  delete<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    key: Keys,
  ): Promise<boolean>;

  /**
   * Deletes multiple keys from the storage at once.
   *
   * @param keys - An array of keys to delete.
   * @returns A promise that resolves to an object with `keys` keys, and boolean values,
   * which are `true` if the key was deleted, or `false` if the key did not exist.
   */
  deleteMany<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    keys: Keys[],
  ): Promise<Record<Keys, boolean>>;

  /**
   * Gets all the keys and values in the storage.
   *
   * @returns An iterator containing all the keys and values in the storage.
   */
  entries<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(): Promise<IterableIterator<[Keys, StorageTypes[Keys]]>>;
}

ShouldRenderOutput

display
```
boolean
```

export interface ShouldRenderOutput {
  display: boolean;
}

BlockExtensionApi

auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
data
Information about the currently viewed or selected items.
```
Data
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
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`).
```
Navigation
```
picker
Renders a custom [Picker](picker) dialog allowing users to select values from a list.
```
PickerApi
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => 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.
```
ResourcePickerApi
```
storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface BlockExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * 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;
}

Navigation

navigate
Navigate to a specific route.
```
(url: string | URL) => void
```

export interface Navigation {
  /**
   * Navigate to a specific route.
   *
   * @example navigation.navigate('extension://my-admin-action-extension-handle')
   */
  navigate: (url: string | URL) => void;
}

PickerApi

options
```
PickerOptions
```

Promise<Picker>

Promise<Picker>

(options: PickerOptions) => Promise<Picker>

PickerOptions

headers
The data headers for the picker. These are used to display the table headers in the picker modal.
```
Header[]
```
heading
The heading of the picker. This is displayed in the title of the picker modal.
```
string
```
items
The items to display in the picker. These are used to display the rows in the picker modal.
```
Item[]
```
multiple
The data headers for the picker. These are used to display the table headers in the picker modal.
```
boolean | number
```

interface PickerOptions {
  /**
   * The heading of the picker. This is displayed in the title of the picker modal.
   */
  heading: string;
  /**
   * The data headers for the picker. These are used to display the table headers in the picker modal.
   */
  multiple?: boolean | number;
  /**
   * The items to display in the picker. These are used to display the rows in the picker modal.
   */
  items: Item[];
  /**
   * The data headers for the picker. These are used to display the table headers in the picker modal.
   */
  headers?: Header[];
}

Header

content
The content to display in the table column header.
```
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.
```
'string' | 'number'
```

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';
}

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.
```
PickerBadge[]
```
data
The additional content to display in the second and third columns of the row, if provided.
```
DataPoint[]
```
disabled
Whether the item is disabled or not. If the item is disabled, it cannot be selected.
```
boolean
```
heading
The primary content to display in the first column of the row.
```
string
```
id
The unique identifier of the item. This will be returned by the picker if selected.
```
string
```
selected
Whether the item is selected or not when the picker is opened. The user may deselect the item if it is preselected.
```
boolean
```
thumbnail
The thumbnail to display at the start of the row. This is used to display an image or icon for the item.
```
{ url: string; }
```

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?: PickerBadge[];
  /**
   * 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};
}

PickerBadge

content
```
string
```
progress
```
Progress
```
tone
```
Tone
```

interface PickerBadge {
  content: string;
  tone?: Tone;
  progress?: Progress;
}

Progress

'incomplete' | 'partiallyComplete' | 'complete'

Tone

'info' | 'success' | 'warning' | 'critical'

DataPoint

string | number | undefined

Picker

selected
A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker.
```
Promise<string[] | undefined>
```

interface Picker {
  /**
   * A Promise that resolves with the selected item IDs when the user presses the "Select" button in the picker.
   */
  selected: Promise<string[] | undefined>;
}

ResourcePickerApi

options
```
ResourcePickerOptions
```

Promise<SelectPayload<ResourcePickerOptions['type']> | undefined>

Promise<SelectPayload<ResourcePickerOptions['type']> | undefined>

(
  options: ResourcePickerOptions,
) => Promise<SelectPayload<ResourcePickerOptions['type']> | undefined>

ResourcePickerOptions

action
The action verb appears in the title and as the primary action of the Resource Picker.
```
'add' | 'select'
```
filter
Filters for what resource to show.
```
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.
```
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.
```
string
```
selectionIds
Resources that should be preselected when the picker is opened.
```
BaseResource[]
```
type
The type of resource you want to pick.
```
'product' | 'variant' | 'collection'
```

export interface ResourcePickerOptions {
  /**
   * The type of resource you want to pick.
   */
  type: 'product' | 'variant' | 'collection';
  /**
   *  The action verb appears in the title and as the primary action of the Resource Picker.
   * @defaultValue 'add'
   */
  action?: 'add' | 'select';
  /**
   * Filters for what resource to show.
   */
  filter?: Filters;
  /**
   * 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.
   * @defaultValue false
   */
  multiple?: boolean | number;
  /**
   * 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.
   * @defaultValue ''
   */
  query?: string;
  /**
   * Resources that should be preselected when the picker is opened.
   * @defaultValue []
   */
  selectionIds?: BaseResource[];
}

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.
```
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.
```
boolean | undefined
```
hidden
Whether to show hidden resources, referring to products that are not published on any sales channels.
```
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.
```
string
```
variants
Whether to show product variants. Only applies to the Product resource type picker.
```
boolean
```

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](/docs/api/usage/search-syntax) for more information.
   * This is not displayed in the search bar when the picker is opened.
   */
  query?: string;
}

BaseResource

id
in GraphQL id format, ie 'gid://shopify/Product/1'
```
string
```
variants
```
Resource[]
```

interface BaseResource extends Resource {
  variants?: Resource[];
}

Resource

id
in GraphQL id format, ie 'gid://shopify/Product/1'
```
string
```

interface Resource {
  /** in GraphQL id format, ie 'gid://shopify/Product/1' */
  id: string;
}

SelectPayload

SelectPayload<Type>

BlockExtensionComponents

StandardComponents | 'AdminBlock' | 'Form'

StandardApi

The following APIs are provided to all extension targets.

auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>

storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface StandardApi<ExtensionTarget extends AnyExtensionTarget> {
  /**
   * 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 of an intent.
   */
  intents: Intents;

  /**
   * Provides methods for setting, getting, and clearing browser data from the extension
   */
  storage: Storage;

  /**
   * Used to query the Admin GraphQL API
   */
  query: <Data = unknown, Variables = {[key: string]: unknown}>(
    query: string,
    options?: {variables?: Variables; version?: Omit<ApiVersion, '2023-04'>},
  ) => Promise<{data?: Data; errors?: GraphQLError[]}>;
}

CustomerSegmentTemplateApi

__enabledFeatures
```
string[]
```
auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>

storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface CustomerSegmentTemplateApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends StandardApi<ExtensionTarget> {
  /* Utilities for translating content according to the current `localization` of the admin. */
  i18n: I18n;
  /** @private */
  __enabledFeatures: string[];
}

CustomerSegmentTemplate

createdOn
ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
```
string
```
dependencies
The list of customer standard metafields or custom metafields used in the template's query.
```
{ standardMetafields?: "facts.birth_date"[]; customMetafields?: string[]; }
```
description
The localized description of the template. An array can be used for multiple paragraphs.
```
string | string[]
```
query
The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
```
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.
```
string
```
title
The localized title of the template.
```
string
```

export interface CustomerSegmentTemplate {
  /**
   * The localized title of the template.
   */
  title: string;
  /**
   * The localized description of the template. An array can be used for multiple paragraphs.
   */
  description: string | string[];
  /**
   * The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
   */
  query: string;
  /**
   * The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
   */
  queryToInsert: string;
  /**
   * The list of customer standard metafields or custom metafields used in the template's query.
   */
  dependencies?: {
    standardMetafields?: CustomerStandardMetafieldDependency[];
    customMetafields?: string[];
  };
  /**
   * ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
   */
  createdOn: string;
}

DiscountFunctionSettingsApi

applyMetafieldChange
Applies a change to the discount function settings.
```
ApplyMetafieldChange
```
auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
data
```
DiscountFunctionSettingsData
```
discounts
```
DiscountsApi
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
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`).
```
Navigation
```
picker
Renders a custom [Picker](picker) dialog allowing users to select values from a list.
```
PickerApi
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => 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.
```
ResourcePickerApi
```
storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface DiscountFunctionSettingsApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends Omit<BlockExtensionApi<ExtensionTarget>, 'data'> {
  /**
   * Applies a change to the discount function settings.
   */
  applyMetafieldChange: ApplyMetafieldChange;
  data: DiscountFunctionSettingsData;
  discounts: DiscountsApi;
}

ApplyMetafieldChange

change
```
MetafieldChange
```

Promise<MetafieldChangeResult>

Promise<MetafieldChangeResult>

(
  change: MetafieldChange,
) => Promise<MetafieldChangeResult>

MetafieldChange

MetafieldUpdateChange | MetafieldRemoveChange

MetafieldUpdateChange

key
```
string
```
namespace
```
string
```
type
```
'updateMetafield'
```
value
```
string | number
```
valueType
```
SupportedDefinitionType
```

interface MetafieldUpdateChange {
  type: 'updateMetafield';
  key: string;
  namespace?: string;
  value: string | number;
  valueType?: 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
```
string
```
namespace
```
string
```
type
```
'removeMetafield'
```

interface MetafieldRemoveChange {
  type: 'removeMetafield';
  key: string;
  namespace: string;
}

MetafieldChangeResult

MetafieldChangeSuccess | MetafieldChangeResultError

MetafieldChangeSuccess

type
```
'success'
```

interface MetafieldChangeSuccess {
  type: 'success';
}

MetafieldChangeResultError

message
```
string
```
type
```
'error'
```

interface MetafieldChangeResultError {
  type: 'error';
  message: string;
}

DiscountFunctionSettingsData

The object that exposes the validation with its settings.

id
The unique identifier for the discount.
```
string
```
metafields
The discount metafields.
```
Metafield[]
```

export interface DiscountFunctionSettingsData {
  /**
   * The unique identifier for the discount.
   */
  id: string;
  /**
   * The discount metafields.
   */
  metafields: Metafield[];
}

Metafield

description
```
string
```
id
```
string
```
key
```
string
```
namespace
```
string
```
type
```
string
```
value
```
string
```

interface Metafield {
  description?: string;
  id: string;
  namespace: string;
  key: string;
  value: string;
  type: string;
}

DiscountsApi

Reactive Api for managing discount function configuration.

discountClasses
A signal that contains the discount classes.
```
ReadonlySignalLike<DiscountClass[]>
```
discountMethod
A signal that contains the discount method.
```
ReadonlySignalLike<DiscountMethod>
```
updateDiscountClasses
A function that updates the discount classes.
```
UpdateSignalFunction<DiscountClass[]>
```

export interface DiscountsApi {
  /**
   * A signal that contains the discount classes.
   */
  discountClasses: ReadonlySignalLike<DiscountClass[]>;
  /**
   * A function that updates the discount classes.
   */
  updateDiscountClasses: UpdateSignalFunction<DiscountClass[]>;
  /**
   * A signal that contains the discount method.
   */
  discountMethod: ReadonlySignalLike<DiscountMethod>;
}

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.
```
(fn: (value: T) => void) => () => void
```
value
The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.
```
T
```

export interface ReadonlySignalLike<T> {
  /**
   * 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.
   */
  readonly value: T;
  /**
   * 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.
   */
  subscribe(fn: (value: T) => void): () => void;
}

DiscountClass

'product' | 'order' | 'shipping'

DiscountMethod

'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
```
T
```

Result<T>

Result<T>

(value: T) => Result<T>

Result

A result type that indicates the success or failure of an operation.

{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.
```
string
```
issues
Field-level validation issues
```
{ message: string; path: string[]; }[]
```
message
A message describing the error.
```
string
```
type
```
'error'
```

interface ValidationError {
  type: 'error';
  /**
   * A message describing the error.
   */
  message: string;
  /**
   * A code identifier for the error.
   */
  code: string;
  /**
   * Field-level validation issues
   */
  issues?: {
    message: string;
    path: string[];
  }[];
}

FunctionSettingsComponents

FormExtensionComponents | 'FunctionSettings'

FormExtensionComponents

StandardComponents | 'Form'

PrintActionExtensionApi

auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
data
Information about the currently viewed or selected items.
```
Data
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
Intents
```
picker
Renders a custom [Picker](picker) dialog allowing users to select values from a list.
```
PickerApi
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => 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.
```
ResourcePickerApi
```
storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface PrintActionExtensionApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends StandardApi<ExtensionTarget> {
  /**
   * 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;
}

PrintActionExtensionComponents

StandardComponents | 'AdminPrintAction'

ProductDetailsConfigurationApi

auth
Provides methods for authenticating calls to an app backend.
```
Auth
```

data

Information about the currently viewed or selected items.

Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }

extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
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`).
```
Navigation
```
picker
Renders a custom [Picker](picker) dialog allowing users to select values from a list.
```
PickerApi
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => 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.
```
ResourcePickerApi
```
storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface ProductDetailsConfigurationApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends BlockExtensionApi<ExtensionTarget> {
  data: Data & {
    /*
      @deprecated 
      The product currently being viewed in the admin.
    */
    product: Product;
    app: {
      launchUrl: string;
      applicationUrl: string;
    };
  };
}

Product

handle
```
string
```
hasOnlyDefaultVariant
```
boolean
```
id
```
string
```
onlineStoreUrl
```
string
```

options

{ id: string; name: string; position: number; values: string[]; }[]

productCategory
```
string
```
productComponents
```
ProductComponent[]
```
productType
```
string
```
status
```
'ACTIVE' | 'ARCHIVED' | 'DRAFT'
```
title
```
string
```
totalInventory
```
number
```
totalVariants
```
number
```

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

componentVariantsCount
```
number
```

featuredImage

{
    id?: string | null;
    url?: string | null;
    altText?: string | null;
  } | null

id
```
string
```
nonComponentVariantsCount
```
number
```
productUrl
```
string
```
title
```
string
```
totalVariants
```
number
```

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;
}

PurchaseOptionsCardConfigurationApi

auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
close
Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
```
() => void
```
data
Information about the currently viewed or selected items.
```
{ selected: { id: string; sellingPlanId?: string; }[]; }
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
Intents
```
picker
Renders a custom [Picker](picker) dialog allowing users to select values from a list.
```
PickerApi
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => 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.
```
ResourcePickerApi
```
storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface PurchaseOptionsCardConfigurationApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends ActionExtensionApi<ExtensionTarget> {
  data: {
    selected: {id: string; sellingPlanId?: string}[];
  };
}

ProductVariantDetailsConfigurationApi

auth
Provides methods for authenticating calls to an app backend.
```
Auth
```

data

Information about the currently viewed or selected items.

Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }

extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
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`).
```
Navigation
```
picker
Renders a custom [Picker](picker) dialog allowing users to select values from a list.
```
PickerApi
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => 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.
```
ResourcePickerApi
```
storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface ProductVariantDetailsConfigurationApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends BlockExtensionApi<ExtensionTarget> {
  data: Data & {
    /*
      @deprecated
      The product variant currently being viewed in the admin.
    */
    variant: ProductVariant;
    app: {
      launchUrl: string;
      applicationUrl: string;
    };
  };
}

ProductVariant

barcode
```
string
```
compareAtPrice
```
string
```
displayName
```
string
```
id
```
string
```
price
```
string
```
productVariantComponents
```
ProductVariantComponent[]
```
selectedOptions
```
{ name: string; value: string; }[]
```
sku
```
string
```
taxable
```
boolean
```
taxCode
```
string
```
title
```
string
```
weight
```
number
```

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

displayName
```
string
```
id
```
string
```

image

{
    id?: string | null;
    url?: string | null;
    altText?: string | null;
  } | null

productVariantUrl
```
string
```
selectedOptions
```
{ name: string; value: string; }[]
```
sku
```
string
```
title
```
string
```

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;
  }[];
}

OrderRoutingRuleApi

applyMetafieldsChange
```
ApplyMetafieldsChange
```
auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
data
```
Data
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>

storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface OrderRoutingRuleApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  applyMetafieldsChange: ApplyMetafieldsChange;
  data: Data;
}

ApplyMetafieldsChange

changes
```
MetafieldsChange[]
```

void

void

(changes: MetafieldsChange[]) => void

MetafieldsChange

MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]

ValidationSettingsApi

applyMetafieldChange
Applies a change to the validation settings.
```
ApplyMetafieldChange
```
auth
Provides methods for authenticating calls to an app backend.
```
Auth
```
data
```
ValidationData
```
extension
The identifier of the running extension target.
```
{ 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
```
I18n
```
intents
Provides information to the receiver of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<ApiVersion, "2023-04">; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>

storage
Provides methods for setting, getting, and clearing browser data from the extension
```
Storage
```

export interface ValidationSettingsApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends StandardApi<ExtensionTarget> {
  /**
   * Applies a change to the validation settings.
   */
  applyMetafieldChange: ApplyMetafieldChange;
  data: ValidationData;
}

ValidationData

The object that exposes the validation with its settings.

shopifyFunction
```
ShopifyFunction
```
validation
```
Validation
```

export interface ValidationData {
  validation?: Validation;
  shopifyFunction: ShopifyFunction;
}

ShopifyFunction

id
the validation function's unique identifier
```
string
```

interface ShopifyFunction {
  /**
   * the validation function's unique identifier
   */
  id: string;
}

Validation

id
the validation's gid when active in a shop
```
string
```
metafields
the metafields owned by the validation
```
Metafield[]
```

interface Validation {
  /**
   * the validation's gid when active in a shop
   */
  id: string;
  /**
   * the metafields owned by the validation
   */
  metafields: Metafield[];
}

Was this page helpful?