---
title: Customer Segment Template Extension API
description: This API is available to all customer segment template extension types.
api_version: 2024-01
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/latest/target-apis/contextual-apis/customer-segment-template-extension-api
  md: >-
    https://shopify.dev/docs/api/admin-extensions/latest/target-apis/contextual-apis/customer-segment-template-extension-api.md
---

# Customer Segment Template Extension API

This API is available to all customer segment template extension types.

## CustomerSegmentTemplateApi

* **extension**

  **{ target: ExtensionTarget; }**

  **required**

  The identifier of the running extension target.

* **i18n**

  **I18n**

  **required**

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

* **intents**

  **Intents**

  **required**

  Provides information to the receiver the of an intent.

* **navigation**

  **Navigation**

  **required**

  Provides methods to navigate to other features in the Admin.

* **query**

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

  **required**

  Used to query the Admin GraphQL API

### ExtensionTarget

```ts
keyof ExtensionTargets
```

### ExtensionTargets

* admin.customer-details.action.render

  Renders an Admin Action in the customer details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.customer-details.block.render

  Renders an Admin Block in the customer details page. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.customer-index.action.render

  Renders an Admin Action in the customer index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

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

  Renders an Admin Action in the customer index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

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

  Renders an Admin Action in the customer segment details page. Open this extension from the "Use segment" button. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.customers.segmentation-templates.render

  Renders a \[\`CustomerSegmentTemplate\`]\(/docs/api/admin-extensions/components/customersegmenttemplate) in the \[customer segment editor]\(https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments).

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

* admin.order-details.action.render

  Renders an Admin Action in the order details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.order-details.block.render

  Renders an Admin Block in the order details page. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.order-index.action.render

  Renders an Admin Action in the order index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

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

  Renders an Admin Action in the order index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.product-details.action.render

  Renders an Admin Action in the product details page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.product-details.block.render

  Renders an Admin Block in the product details page. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

* admin.product-details.configuration.render

  Renders Product Configuration on product details and product variant details See the \[tutorial]\(docs/apps/selling-strategies/bundles/product-config) for more information

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

* admin.product-index.action.render

  Renders an Admin Action in the product index page. Open this extension from the "More Actions" menu. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

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

  Renders an Admin Action in the product index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

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

  Renders Product Configuration on product details and product variant details See the \[tutorial]\(docs/apps/selling-strategies/bundles/product-config) for more information

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

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

  Renders Order Routing Rule Configuration on order routing settings. See the \[list of available components]\(/docs/api/admin-extensions/components).

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

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

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

* Playground

  ```ts
  RenderExtension<StandardApi<'Playground'>, AllComponents>
  ```

```ts
export interface ExtensionTargets {
  /**
   * @private
   */
  Playground: RenderExtension<StandardApi<'Playground'>, AllComponents>;

  /**
   * 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.render': RenderExtension<
    CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'>,
    CustomerSegmentTemplateComponent
  >;

  // 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'>,
    AllComponents
  >;

  /**
   * 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'>,
    AllComponents
  >;

  /**
   * 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'>,
    AllComponents
  >;

  // Actions
  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  // Bulk Actions

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * Renders an Admin Action 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'>,
    AllComponents
  >;

  /**
   * 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'>,
    ProductConfigurationComponents
  >;

  /**
   * 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'>,
    ProductConfigurationComponents
  >;

  /**
   * 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'>,
    AllComponents | OrderRoutingComponents
  >;
  'admin.settings.order-routing-rule.render': RenderExtension<
    OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,
    AllComponents
  >;
}
```

### RenderExtension



```ts
export interface RenderExtension<
  Api,
  AllowedComponents extends RemoteComponentType<
    string,
    any,
    any
  > = RemoteComponentType<any, any, any>,
> {
  (
    connection: RenderExtensionConnection<AllowedComponents>,
    api: Api,
  ): void | Promise<void>;
}
```

### ActionExtensionApi

* close

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

  ```ts
  () => void
  ```

* data

  Information about the currently viewed or selected items.

  ```ts
  Data
  ```

* extension

  The identifier of the running extension target.

  ```ts
  { target: ExtensionTarget; }
  ```

* i18n

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

  ```ts
  I18n
  ```

* intents

  Provides information to the receiver the of an intent.

  ```ts
  Intents
  ```

* navigation

  Provides methods to navigate to other features in the Admin.

  ```ts
  Navigation
  ```

* query

  Used to query the Admin GraphQL API

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

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

### Data

* selected

  Information about the currently viewed or selected items.

  ```ts
  { id: string; }[]
  ```

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

### I18n

* formatCurrency

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

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

* formatDate

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

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

* formatNumber

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

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

* translate

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

  ```ts
  I18nTranslate
  ```

```ts
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.



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

### Intents

* launchUrl

  The URL that was used to launch the intent.

  ```ts
  string | URL
  ```

```ts
export interface Intents {
  /**
   * The URL that was used to launch the intent.
   */
  launchUrl?: string | URL;
}
```

### Navigation

* navigate

  A method to navigate to a specific route.

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

```ts
export interface Navigation {
  /**
   * A method to navigate to a specific route.
   */
  navigate: (url: string | URL) => void;
}
```

### ApiVersion

Union of supported API versions

```ts
'2023-04' | '2023-07' | '2023-10' | '2024-01' | 'unstable'
```

### GraphQLError

GraphQL error returned by the Shopify Admin API.

* locations

  ```ts
  { line: number; column: string; }
  ```

* message

  ```ts
  string
  ```

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

### AllComponents

See the \[list of available components]\(/docs/api/admin-extensions/components).

```ts
any
```

### BlockExtensionApi

* data

  Information about the currently viewed or selected items.

  ```ts
  Data
  ```

* extension

  The identifier of the running extension target.

  ```ts
  { target: ExtensionTarget; }
  ```

* i18n

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

  ```ts
  I18n
  ```

* intents

  Provides information to the receiver the of an intent.

  ```ts
  Intents
  ```

* navigation

  Provides methods to navigate to other features in the Admin.

  ```ts
  Navigation
  ```

* query

  Used to query the Admin GraphQL API

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

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

### CustomerSegmentTemplateComponent

```ts
any
```

### ProductDetailsConfigurationApi

* data

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

* extension

  The identifier of the running extension target.

  ```ts
  { target: ExtensionTarget; }
  ```

* i18n

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

  ```ts
  I18n
  ```

* intents

  Provides information to the receiver the of an intent.

  ```ts
  Intents
  ```

* navigation

  Provides methods to navigate to other features in the Admin.

  ```ts
  Navigation
  ```

* query

  Used to query the Admin GraphQL API

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

```ts
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

* handle

  ```ts
  string
  ```

* hasOnlyDefaultVariant

  ```ts
  boolean
  ```

* id

  ```ts
  string
  ```

* onlineStoreUrl

  ```ts
  string
  ```

* options

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

* productCategory

  ```ts
  string
  ```

* productComponents

  ```ts
  ProductComponent[]
  ```

* productType

  ```ts
  string
  ```

* status

  ```ts
  'ACTIVE' | 'ARCHIVED' | 'DRAFT'
  ```

* title

  ```ts
  string
  ```

* totalInventory

  ```ts
  number
  ```

* totalVariants

  ```ts
  number
  ```

```ts
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

  ```ts
  number
  ```

* featuredImage

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

* id

  ```ts
  string
  ```

* nonComponentVariantsCount

  ```ts
  number
  ```

* productUrl

  ```ts
  string
  ```

* title

  ```ts
  string
  ```

* totalVariants

  ```ts
  number
  ```

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

### ProductConfigurationComponents

```ts
any
```

### ProductVariantDetailsConfigurationApi

* data

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

* extension

  The identifier of the running extension target.

  ```ts
  { target: ExtensionTarget; }
  ```

* i18n

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

  ```ts
  I18n
  ```

* intents

  Provides information to the receiver the of an intent.

  ```ts
  Intents
  ```

* navigation

  Provides methods to navigate to other features in the Admin.

  ```ts
  Navigation
  ```

* query

  Used to query the Admin GraphQL API

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

```ts
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

* barcode

  ```ts
  string
  ```

* compareAtPrice

  ```ts
  string
  ```

* displayName

  ```ts
  string
  ```

* id

  ```ts
  string
  ```

* price

  ```ts
  string
  ```

* productVariantComponents

  ```ts
  ProductVariantComponent[]
  ```

* selectedOptions

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

* sku

  ```ts
  string
  ```

* taxable

  ```ts
  boolean
  ```

* taxCode

  ```ts
  string
  ```

* title

  ```ts
  string
  ```

* weight

  ```ts
  number
  ```

```ts
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

  ```ts
  string
  ```

* id

  ```ts
  string
  ```

* image

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

* productVariantUrl

  ```ts
  string
  ```

* selectedOptions

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

* sku

  ```ts
  string
  ```

* title

  ```ts
  string
  ```

```ts
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

  ```ts
  ApplyMetafieldsChange
  ```

* data

  ```ts
  Data
  ```

* extension

  The identifier of the running extension target.

  ```ts
  { target: ExtensionTarget; }
  ```

* i18n

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

  ```ts
  I18n
  ```

* intents

  Provides information to the receiver the of an intent.

  ```ts
  Intents
  ```

* navigation

  Provides methods to navigate to other features in the Admin.

  ```ts
  Navigation
  ```

* query

  Used to query the Admin GraphQL API

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

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

### ApplyMetafieldsChange

* changes

  ```ts
  MetafieldsChange[]
  ```

void

```ts
void
```

```ts
(changes: MetafieldsChange[]) => void
```

### MetafieldsChange

```ts
MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]
```

### MetafieldUpdateChange

* key

  ```ts
  string
  ```

* namespace

  ```ts
  string
  ```

* type

  ```ts
  'updateMetafield'
  ```

* value

  ```ts
  string | number
  ```

* valueType

  ```ts
  SupportedDefinitionType
  ```

```ts
interface MetafieldUpdateChange {
  type: 'updateMetafield';
  key: string;
  namespace?: string;
  value: string | number;
  valueType?: SupportedDefinitionType;
}
```

### SupportedDefinitionType

```ts
'boolean' | 'url' | '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' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'
```

### MetafieldRemoveChange

* key

  ```ts
  string
  ```

* namespace

  ```ts
  string
  ```

* type

  ```ts
  'removeMetafield'
  ```

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

### OrderRoutingComponents

```ts
any
```