# Extension Targets

This is a list of all the available extension targets for Admin App Extensions.

## ExtensionTargets

### ExtensionTargets

### Playground

value: `RenderExtension<StandardApi<'Playground'>, AllComponents>`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - StandardApi: export interface StandardApi<ExtensionTarget extends AnyExtensionTarget> {
  /**
   * The identifier of the running extension target.
   */
  extension: {
    target: ExtensionTarget;
  };

  /**
   * Utilities for translating content according to the current localization of the admin.
   * More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
   */
  i18n: I18n;

  /**
   * Provides information to the receiver the of an intent.
   */
  intents: Intents;

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

### admin.customers.segmentation-templates.render

value: `RenderExtension<
    CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'>,
    CustomerSegmentTemplateComponent
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - CustomerSegmentTemplateApi: 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: CustomerSegmentationFeature[];
}
  - CustomerSegmentTemplateComponent: CustomerSegmentTemplateComponent
Renders a [`CustomerSegmentTemplate`](https://shopify.dev/docs/api/admin-extensions/components/customersegmenttemplate) in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments).

### admin.product-details.block.render

value: `RenderExtension<
    BlockExtensionApi<'admin.product-details.block.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - BlockExtensionApi: 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 an Admin Block in the product details page.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.order-details.block.render

value: `RenderExtension<
    BlockExtensionApi<'admin.order-details.block.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - BlockExtensionApi: 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 an Admin Block in the order details page.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.customer-details.block.render

value: `RenderExtension<
    BlockExtensionApi<'admin.customer-details.block.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - BlockExtensionApi: 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 an Admin Block in the customer details page.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.product-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.product-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the product details page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.order-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.order-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the order details page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.customer-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.customer-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the customer details page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.customer-segment-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.customer-segment-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the customer segment details page. Open this extension from the "Use segment" button.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.product-index.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.product-index.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.order-index.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.order-index.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the order index page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.customer-index.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.customer-index.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the customer index page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.discount-index.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.discount-index.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the discount index page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.collection-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.collection-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the collection details page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.collection-index.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.collection-index.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the collection index page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.abandoned-checkout-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the abandonded checkout page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.product-variant-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.product-variant-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the product variant details page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.draft-order-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.draft-order-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the draft order details page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.draft-order-index.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the draft orders page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.discount-details.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.discount-details.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the discount details page. Open this extension from the "More Actions" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.order-fulfilled-card.action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the order fulfilled card. Open this extension from the "3-dot" menu inside the order fulfilled card.
Note: This extension will only be visible on orders which were fulfilled by your app.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.product-index.selection-action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.product-index.selection-action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the product index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.order-index.selection-action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.order-index.selection-action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the order index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.customer-index.selection-action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.customer-index.selection-action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the customer index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.draft-order-index.selection-action.render

value: `RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ActionExtensionApi: export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  /**
   * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
   */
  close: () => void;

  /**
   * Information about the currently viewed or selected items.
   */
  data: Data;
}
Renders an admin action extension in the draft order page when multiple resources are selected. Open this extension from the "3-dot" menu.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.product-details.configuration.render

value: `RenderExtension<
    ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,
    ProductConfigurationComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - ProductDetailsConfigurationApi: export interface ProductDetailsConfigurationApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends StandardApi<ExtensionTarget> {
  data: {
    /* The product currently being viewed in the admin. */
    product: Product;
    app: {
      launchUrl: string;
      applicationUrl: string;
    };
  };
}
  - Product: interface Product {
  id: string;
  title: string;
  handle: string;
  status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';
  totalVariants: number;
  totalInventory: number;
  hasOnlyDefaultVariant: boolean;
  onlineStoreUrl?: string;
  options: {
    id: string;
    name: string;
    position: number;
    values: string[];
  }[];
  productType: string;
  productCategory?: string;
  productComponents: ProductComponent[];
}
  - ProductConfigurationComponents: ProductConfigurationComponents
Renders Product Configuration on product details and product variant details

See the [tutorial](https://shopify.dev/docs/apps/selling-strategies/bundles/product-config) for more information

### admin.product-variant-details.configuration.render

value: `RenderExtension<
    ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,
    ProductConfigurationComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - Product: interface Product {
  id: string;
  title: string;
  handle: string;
  status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';
  totalVariants: number;
  totalInventory: number;
  hasOnlyDefaultVariant: boolean;
  onlineStoreUrl?: string;
  options: {
    id: string;
    name: string;
    position: number;
    values: string[];
  }[];
  productType: string;
  productCategory?: string;
  productComponents: ProductComponent[];
}
  - ProductConfigurationComponents: ProductConfigurationComponents
  - ProductVariantDetailsConfigurationApi: export interface ProductVariantDetailsConfigurationApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends StandardApi<ExtensionTarget> {
  data: {
    /* The product variant currently being viewed in the admin. */
    variant: ProductVariant;
    app: {
      launchUrl: string;
      applicationUrl: string;
    };
  };
}
  - ProductVariant: interface ProductVariant {
  id: string;
  sku: string;
  barcode: string;
  title: string;
  displayName: string;
  price: string;
  compareAtPrice: string;
  taxable: boolean;
  taxCode: string;
  weight: number;
  selectedOptions: {
    name: string;
    value: string;
  }[];
  productVariantComponents: ProductVariantComponent[];
}
Renders Product Configuration on product details and product variant details

See the [tutorial](https://shopify.dev/docs/apps/selling-strategies/bundles/product-config) for more information

### admin.settings.internal-order-routing-rule.render

value: `RenderExtension<
    OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,
    AllComponents | OrderRoutingComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - OrderRoutingRuleApi: export interface OrderRoutingRuleApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  applyMetafieldsChange: ApplyMetafieldsChange;
  data: Data;
}
  - OrderRoutingComponents: "InternalLocationList" & { readonly type?: "InternalLocationList"; readonly props?: InternalLocationListProps; readonly children?: true; }
Renders Order Routing Rule Configuration on order routing settings.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### admin.settings.order-routing-rule.render

value: `RenderExtension<
    OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - OrderRoutingRuleApi: export interface OrderRoutingRuleApi<ExtensionTarget extends AnyExtensionTarget>
  extends StandardApi<ExtensionTarget> {
  applyMetafieldsChange: ApplyMetafieldsChange;
  data: Data;
}

### admin.settings.validation.render

value: `RenderExtension<
    ValidationSettingsApi<'admin.settings.validation.render'>,
    AllComponents
  >`

  - RenderExtension: export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
  - AllComponents: AllComponents
  - ValidationSettingsApi: export interface ValidationSettingsApi<
  ExtensionTarget extends AnyExtensionTarget,
> extends StandardApi<ExtensionTarget> {
  /**
   * Applies a change to the validation settings.
   */
  applyMetafieldChange: ApplyMetafieldChange;
  data: ValidationData;
}
  - Validation: interface Validation {
  /**
   * the validation's gid when active in a shop
   */
  id: string;
  /**
   * the metafields owned by the validation
   */
  metafields: Metafield[];
}
Renders Validation Settings within a given validation's add and edit views.

See the [list of available components](https://shopify.dev/docs/api/admin-extensions/components).

### StandardApi

The following APIs are provided to all extension targets.

### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### I18n

### formatNumber

value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string`

Returns a localized number.

This function behaves like the standard `Intl.NumberFormat()`
with a style of `decimal` applied. It uses the buyer's locale by default.

### formatCurrency

value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string`

Returns a localized currency value.

This function behaves like the standard `Intl.NumberFormat()`
with a style of `currency` applied. It uses the buyer's locale by default.

### formatDate

value: `(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string`

Returns a localized date value.

This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
the buyer's locale by default. Formatting options can be passed in as
options.

### translate

value: `I18nTranslate`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
  - I18nTranslate: export interface I18nTranslate {
  /**
   * This returns a translated string matching a key in a locale file.
   *
   * @example translate("banner.title")
   */
  <ReplacementType = string>(
    key: string,
    options?: Record<string, ReplacementType | string | number>,
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}
Returns translated content in the buyer's locale,
as supported by the extension.

- `options.count` is a special numeric value used in pluralization.
- The other option keys and values are treated as replacements for interpolation.
- If the replacements are all primitives, then `translate()` returns a single string.
- If replacements contain UI components, then `translate()` returns an array of elements.

### Intents

### launchUrl

value: `string | URL`

The URL that was used to launch the intent.

### CustomerSegmentTemplateApi

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### __enabledFeatures

value: `"b2bEnabled"[]`


### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### BlockExtensionApi

### data

value: `Data`

Information about the currently viewed or selected items.

### navigation

value: `Navigation`

  - Navigation: export interface Navigation {
  /**
   * Navigate to a specific route.
   *
   * @example navigation.navigate('extension://my-admin-action-extension-handle')
   */
  navigate: (url: string | URL) => void;
}
Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported.
For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`).

### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### Navigation

### navigate

value: `(url: string | URL) => void`

Navigate to a specific route.

### ActionExtensionApi

### close

value: `() => void`

Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.

### data

value: `Data`

Information about the currently viewed or selected items.

### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### ProductDetailsConfigurationApi

### data

value: `{ product: Product; app: { launchUrl: string; applicationUrl: string; }; }`

  - Product: interface Product {
  id: string;
  title: string;
  handle: string;
  status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';
  totalVariants: number;
  totalInventory: number;
  hasOnlyDefaultVariant: boolean;
  onlineStoreUrl?: string;
  options: {
    id: string;
    name: string;
    position: number;
    values: string[];
  }[];
  productType: string;
  productCategory?: string;
  productComponents: ProductComponent[];
}

### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### Product

### id

value: `string`


### title

value: `string`


### handle

value: `string`


### status

value: `"ACTIVE" | "ARCHIVED" | "DRAFT"`


### totalVariants

value: `number`


### totalInventory

value: `number`


### hasOnlyDefaultVariant

value: `boolean`


### onlineStoreUrl

value: `string`


### options

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


### productType

value: `string`


### productCategory

value: `string`


### productComponents

value: `ProductComponent[]`

  - Product: interface Product {
  id: string;
  title: string;
  handle: string;
  status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';
  totalVariants: number;
  totalInventory: number;
  hasOnlyDefaultVariant: boolean;
  onlineStoreUrl?: string;
  options: {
    id: string;
    name: string;
    position: number;
    values: string[];
  }[];
  productType: string;
  productCategory?: string;
  productComponents: ProductComponent[];
}
  - ProductComponent: export interface ProductComponent {
  id: string;
  title: string;
  featuredImage?: {
    id?: string | null;
    url?: string | null;
    altText?: string | null;
  } | null;
  totalVariants: number;
  productUrl: string;
  componentVariantsCount: number;
  nonComponentVariantsCount: number;
}

### ProductComponent

### id

value: `string`


### title

value: `string`


### featuredImage

value: `{ id?: string; url?: string; altText?: string; }`


### totalVariants

value: `number`


### productUrl

value: `string`


### componentVariantsCount

value: `number`


### nonComponentVariantsCount

value: `number`


### ProductVariantDetailsConfigurationApi

### data

value: `{ variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }`

  - Product: interface Product {
  id: string;
  title: string;
  handle: string;
  status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';
  totalVariants: number;
  totalInventory: number;
  hasOnlyDefaultVariant: boolean;
  onlineStoreUrl?: string;
  options: {
    id: string;
    name: string;
    position: number;
    values: string[];
  }[];
  productType: string;
  productCategory?: string;
  productComponents: ProductComponent[];
}
  - ProductVariant: interface ProductVariant {
  id: string;
  sku: string;
  barcode: string;
  title: string;
  displayName: string;
  price: string;
  compareAtPrice: string;
  taxable: boolean;
  taxCode: string;
  weight: number;
  selectedOptions: {
    name: string;
    value: string;
  }[];
  productVariantComponents: ProductVariantComponent[];
}

### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### ProductVariant

### id

value: `string`


### sku

value: `string`


### barcode

value: `string`


### title

value: `string`


### displayName

value: `string`


### price

value: `string`


### compareAtPrice

value: `string`


### taxable

value: `boolean`


### taxCode

value: `string`


### weight

value: `number`


### selectedOptions

value: `{ name: string; value: string; }[]`


### productVariantComponents

value: `ProductVariantComponent[]`

  - Product: interface Product {
  id: string;
  title: string;
  handle: string;
  status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';
  totalVariants: number;
  totalInventory: number;
  hasOnlyDefaultVariant: boolean;
  onlineStoreUrl?: string;
  options: {
    id: string;
    name: string;
    position: number;
    values: string[];
  }[];
  productType: string;
  productCategory?: string;
  productComponents: ProductComponent[];
}
  - ProductVariant: interface ProductVariant {
  id: string;
  sku: string;
  barcode: string;
  title: string;
  displayName: string;
  price: string;
  compareAtPrice: string;
  taxable: boolean;
  taxCode: string;
  weight: number;
  selectedOptions: {
    name: string;
    value: string;
  }[];
  productVariantComponents: ProductVariantComponent[];
}
  - ProductVariantComponent: export interface ProductVariantComponent {
  id: string;
  displayName: string;
  title: string;
  sku?: string;
  image?: {
    id?: string | null;
    url?: string | null;
    altText?: string | null;
  } | null;
  productVariantUrl: string;
  selectedOptions: {
    name: string;
    value: string;
  }[];
}

### ProductVariantComponent

### id

value: `string`


### displayName

value: `string`


### title

value: `string`


### sku

value: `string`


### image

value: `{ id?: string; url?: string; altText?: string; }`


### productVariantUrl

value: `string`


### selectedOptions

value: `{ name: string; value: string; }[]`


### OrderRoutingRuleApi

### applyMetafieldsChange

value: `ApplyMetafieldsChange`

  - ApplyMetafieldsChange: (changes: MetafieldsChange[]) => void
  - MetafieldsChange: MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]
  - Metafield: interface Metafield {
  description?: string;
  id: string;
  namespace: string;
  key: string;
  value: string;
  type: string;
}

### data

value: `Data`


### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### MetafieldUpdateChange

### type

value: `"updateMetafield"`

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

### key

value: `string`


### namespace

value: `string`


### value

value: `string | number`


### valueType

value: `SupportedDefinitionType`

  - SupportedDefinitionType: typeof supportedDefinitionTypes[number]

### MetafieldRemoveChange

### type

value: `"removeMetafield"`

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

### key

value: `string`


### namespace

value: `string`


### InternalLocationListProps

### locationGroups

value: `LocationGroup[]`

  - LocationGroup: export interface LocationGroup {
  /**
   * An array of locations within the group.
   */
  locations: Location[];

  /**
   * The label for the location group.
   */
  label: string;

  /**
   * A unique identifier for the location group.
   */
  id: string;
}
  - Location: export interface Location {
  /**
   * A unique identifier for the location.
   */
  id: string;

  /**
   * The name of the location.
   */
  name: string;
}
An array of location groups.

### onMoveGroup

value: `(oldIndex: number, newIndex: number) => void`

Callback when a location group is moved.
It receives the old index and the new index as parameters.

### onRenameGroup

value: `(id: string, name: string) => void`

Callback when a location group is renamed.
It receives the id of the group and the new name as parameters.

### onDeleteGroup

value: `(id: string) => void`

Callback when a location group is deleted.
It receives the id of the group as a parameter.

### onMoveTag

value: `(tagId: number, oldGroupIndex: number, newGroupIndex: number) => void`

Callback when a tag is moved from one group to another.
It receives the id of the tag, the old group index, and the new group index as parameters.

### onCreateGroup

value: `(id: string) => void`

Callback when a new group is created.
It receives the id of the new group as a parameter.

### LocationGroup

### locations

value: `Location[]`

  - Location: export interface Location {
  /**
   * A unique identifier for the location.
   */
  id: string;

  /**
   * The name of the location.
   */
  name: string;
}
An array of locations within the group.

### label

value: `string`

The label for the location group.

### id

value: `string`

A unique identifier for the location group.

### Location

### id

value: `string`

A unique identifier for the location.

### name

value: `string`

The name of the location.

### ValidationSettingsApi

### applyMetafieldChange

value: `ApplyMetafieldChange`

  - ApplyMetafieldChange: (
  change: MetafieldChange,
) => Promise<MetafieldChangeResult>
  - MetafieldChange: MetafieldUpdateChange | MetafieldRemoveChange
  - Metafield: interface Metafield {
  description?: string;
  id: string;
  namespace: string;
  key: string;
  value: string;
  type: string;
}
Applies a change to the validation settings.

### data

value: `ValidationData`

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

### extension

value: `{ target: ExtensionTarget; }`

  - ExtensionTarget: keyof ExtensionTargets
The identifier of the running extension target.

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content according to the current localization of the admin.
More info - /docs/apps/checkout/best-practices/localizing-ui-extensions

### intents

value: `Intents`

  - Intents: export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
Provides information to the receiver the of an intent.

### query

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

  - ApiVersion: '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | 'unstable'
Used to query the Admin GraphQL API

### MetafieldChangeSuccess

### type

value: `"success"`


### MetafieldChangeResultError

### type

value: `"error"`


### message

value: `string`


### ValidationData

The object that exposes the validation with its settings.

### validation

value: `Validation`

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

### shopifyFunction

value: `ShopifyFunction`

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

### Validation

### id

value: `string`

the validation's gid when active in a shop

### metafields

value: `Metafield[]`

  - Metafield: interface Metafield {
  description?: string;
  id: string;
  namespace: string;
  key: string;
  value: string;
  type: string;
}
the metafields owned by the validation

### Metafield

### description

value: `string`


### id

value: `string`


### namespace

value: `string`


### key

value: `string`


### value

value: `string`


### type

value: `string`


### ShopifyFunction

### id

value: `string`

the validation function's unique identifier