Choose a version:

Customer Segment Template Extension API

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

Anchor to customersegmenttemplateapiCustomerSegmentTemplateApi

Anchor to extension extension { target: ; } required: The identifier of the running extension target.
Anchor to i18n i18n required: Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
Anchor to intents intents required: Provides information to the receiver the of an intent.
Anchor to query query < = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: Omit<, "2023-04">; }) => Promise<{ data?: ; errors?: []; }> required: Used to query the Admin GraphQL API

ExtensionTarget

keyof ExtensionTargets

ExtensionTargets

admin.abandoned-checkout-details.action.render
Renders an admin action extension in the abandoned checkout page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,
    AllComponents
  >
```
admin.abandoned-checkout-details.block.render
Renders an admin block in the abandoned checkout details page. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,
    AllComponents
  >
```
admin.collection-details.action.render
Renders an admin action extension in the collection details page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.collection-details.action.render'>,
    AllComponents
  >
```
admin.collection-details.block.render
Renders an admin block in the collection details page. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    BlockExtensionApi<'admin.collection-details.block.render'>,
    AllComponents
  >
```
admin.collection-index.action.render
Renders an admin action extension in the collection index page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.collection-index.action.render'>,
    AllComponents
  >
```
admin.customer-details.action.render
Renders an admin action extension in the customer details page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.customer-details.action.render'>,
    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).
```
RenderExtension<
    BlockExtensionApi<'admin.customer-details.block.render'>,
    AllComponents
  >
```
admin.customer-index.action.render
Renders an admin action extension in the customer index page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.customer-index.action.render'>,
    AllComponents
  >
```
admin.customer-index.selection-action.render
Renders an admin action extension in the customer index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.customer-index.selection-action.render'>,
    AllComponents
  >
```
admin.customer-segment-details.action.render
Renders an admin action extension in the customer segment details page. Open this extension from the "Use segment" button. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.customer-segment-details.action.render'>,
    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).
```
RenderExtension<
    CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.render'>,
    CustomerSegmentTemplateComponent
  >
```
admin.discount-details.action.render
Renders an admin action extension in the discount details page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.discount-details.action.render'>,
    AllComponents
  >
```
admin.discount-index.action.render
Renders an admin action extension in the discount index page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.discount-index.action.render'>,
    AllComponents
  >
```
admin.draft-order-details.action.render
Renders an admin action extension in the draft order details page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.draft-order-details.action.render'>,
    AllComponents
  >
```
admin.draft-order-details.block.render
Renders an admin block in the draft order details page. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    BlockExtensionApi<'admin.draft-order-details.block.render'>,
    AllComponents
  >
```
admin.draft-order-index.action.render
Renders an admin action extension in the draft orders page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.action.render'>,
    AllComponents
  >
```
admin.draft-order-index.selection-action.render
Renders an admin action extension in the draft order page when multiple resources are selected. Open this extension from the "3-dot" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,
    AllComponents
  >
```
admin.order-details.action.render
Renders an admin action extension in the order details page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.order-details.action.render'>,
    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).
```
RenderExtension<
    BlockExtensionApi<'admin.order-details.block.render'>,
    AllComponents
  >
```
admin.order-details.print-action.render
Renders an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    PrintActionExtensionApi<'admin.order-details.print-action.render'>,
    AllComponents
  >
```
admin.order-fulfilled-card.action.render
Renders an admin action extension in the order fulfilled card. Open this extension from the "3-dot" menu inside the order fulfilled card. Note: This extension will only be visible on orders which were fulfilled by your app. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,
    AllComponents
  >
```
admin.order-index.action.render
Renders an admin action extension in the order index page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.order-index.action.render'>,
    AllComponents
  >
```
admin.order-index.selection-action.render
Renders an admin action extension in the order index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.order-index.selection-action.render'>,
    AllComponents
  >
```
admin.order-index.selection-print-action.render
Renders an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,
    AllComponents
  >
```
admin.product-details.action.render
Renders an admin action extension in the product details page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.product-details.action.render'>,
    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).
```
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
```
RenderExtension<
    ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,
    ProductConfigurationComponents
  >
```
admin.product-details.print-action.render
Renders an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    PrintActionExtensionApi<'admin.product-details.print-action.render'>,
    AllComponents
  >
```
admin.product-details.reorder.render
Renders an admin block in the product details page. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    BlockExtensionApi<'admin.product-details.reorder.render'>,
    AllComponents
  >
```
admin.product-index.action.render
Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.product-index.action.render'>,
    AllComponents
  >
```
admin.product-index.selection-action.render
Renders an admin action extension in the product index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.product-index.selection-action.render'>,
    AllComponents
  >
```
admin.product-index.selection-print-action.render
Renders an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,
    AllComponents
  >
```
admin.product-variant-details.action.render
Renders an admin action extension in the product variant details page. Open this extension from the "More Actions" menu. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    ActionExtensionApi<'admin.product-variant-details.action.render'>,
    AllComponents
  >
```
admin.product-variant-details.block.render
Renders an admin block in the product variant details page. See the [list of available components](/docs/api/admin-extensions/components).
```
RenderExtension<
    BlockExtensionApi<'admin.product-variant-details.block.render'>,
    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
```
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).
```
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
  >

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

Playground

RenderExtension<StandardApi<'Playground'>, AllComponents>

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

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

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

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

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

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

  // Actions
  /**
   * Renders an admin action extension in the product details page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.product-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the order details page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.order-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.order-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the customer details page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.customer-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the customer segment details page. Open this extension from the "Use segment" button.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.customer-segment-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-segment-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.product-index.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the order index page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.order-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.order-index.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the customer index page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.customer-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-index.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the discount index page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.discount-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.discount-index.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the collection details page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.collection-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.collection-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the collection index page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.collection-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.collection-index.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the abandoned checkout page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.abandoned-checkout-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the product variant details page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-variant-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.product-variant-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the draft order details page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.draft-order-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.draft-order-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the draft orders page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.draft-order-index.action.render': RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the discount details page. Open this extension from the "More Actions" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.discount-details.action.render': RenderExtension<
    ActionExtensionApi<'admin.discount-details.action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the order fulfilled card. Open this extension from the "3-dot" menu inside the order fulfilled card.
   * Note: This extension will only be visible on orders which were fulfilled by your app.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.order-fulfilled-card.action.render': RenderExtension<
    ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,
    AllComponents
  >;

  // Bulk Actions

  /**
   * Renders an admin action extension in the product index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.product-index.selection-action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the order index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.order-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.order-index.selection-action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the customer index page when multiple resources are selected. Open this extension from the "More Actions" menu of the resource list. The resource ids are available to this extension at runtime.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.customer-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.customer-index.selection-action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin action extension in the draft order page when multiple resources are selected. Open this extension from the "3-dot" menu.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.draft-order-index.selection-action.render': RenderExtension<
    ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,
    AllComponents
  >;

  // Print actions and bulk print actions

  /**
   * Renders an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.order-details.print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.order-details.print-action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-details.print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.product-details.print-action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin print action extension in the order index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.order-index.selection-print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,
    AllComponents
  >;

  /**
   * Renders an admin print action extension in the product index page when multiple resources are selected. Open this extension from the "Print" menu of the resource list. The resource ids are available to this extension at runtime.
   *
   * See the [list of available components](/docs/api/admin-extensions/components).
   */
  'admin.product-index.selection-print-action.render': RenderExtension<
    PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,
    AllComponents
  >;

  // Other

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

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

RenderExtension

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.
```
() => void
```
data
Information about the currently viewed or selected items.
```
Data
```
extension
The identifier of the running extension target.
```
{ target: ExtensionTarget; }
```
i18n
Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
```
I18n
```
intents
Provides information to the receiver the of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

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

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.
```
{ id: string; }[]
```

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

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

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

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

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

I18nTranslate

This defines the i18n.translate() signature.

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

Intents

launchUrl
The URL that was used to launch the intent.
```
string | URL
```

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

ApiVersion

Union of supported API versions

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

GraphQLError

GraphQL error returned by the Shopify Admin API.

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

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

AllComponents

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

any

BlockExtensionApi

data
Information about the currently viewed or selected items.
```
Data
```
extension
The identifier of the running extension target.
```
{ target: ExtensionTarget; }
```
i18n
Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
```
I18n
```
intents
Provides information to the receiver the of an intent.
```
Intents
```
navigation
Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported. For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`).
```
Navigation
```

query

Used to query the Admin GraphQL API

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

resourcePicker
Renders the [Resource Picker](/docs/api/app-bridge-library/apis/resource-picker), allowing users to select a resource for the extension to use as part of its flow.
```
ResourcePickerApi
```

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

  /**
   * Provides methods to navigate to other features in the Admin. Currently, only navigation from an admin block to an admin action extension *on the same resource page* is supported.
   * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`).
   */
  navigation: Navigation;

  /**
   * Renders the [Resource Picker](/docs/api/app-bridge-library/apis/resource-picker), allowing users to select a resource for the extension to use as part of its flow.
   */
  resourcePicker: ResourcePickerApi;
}

Navigation

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

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

ResourcePickerApi

options
```
ResourcePickerOptions
```

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

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

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

ResourcePickerOptions

action
The action verb appears in the title and as the primary action of the Resource Picker.
```
'add' | 'select'
```
filter
Filters for what resource to show.
```
Filters
```
multiple
Whether to allow selecting multiple items of a specific type or not. If a number is provided, then limit the selections to a maximum of that number of items. When type is Product, the user may still select multiple variants of a single product, even if multiple is false.
```
boolean | number
```
query
GraphQL initial search query for filtering resources available in the picker. See [search syntax](/docs/api/usage/search-syntax) for more information. This is displayed in the search bar when the picker is opened and can be edited by users. For most use cases, you should use the `filter.query` option instead which doesn't show the query in the UI.
```
string
```
selectionIds
Resources that should be preselected when the picker is opened.
```
BaseResource[]
```
type
The type of resource you want to pick.
```
'product' | 'variant' | 'collection'
```

export interface ResourcePickerOptions {
  /**
   * The type of resource you want to pick.
   */
  type: 'product' | 'variant' | 'collection';
  /**
   *  The action verb appears in the title and as the primary action of the Resource Picker.
   * @defaultValue 'add'
   */
  action?: 'add' | 'select';
  /**
   * Filters for what resource to show.
   */
  filter?: Filters;
  /**
   * Whether to allow selecting multiple items of a specific type or not. If a number is provided, then limit the selections to a maximum of that number of items. When type is Product, the user may still select multiple variants of a single product, even if multiple is false.
   * @defaultValue false
   */
  multiple?: boolean | number;
  /**
   * GraphQL initial search query for filtering resources available in the picker. See [search syntax](/docs/api/usage/search-syntax) for more information.
   * This is displayed in the search bar when the picker is opened and can be edited by users.
   * For most use cases, you should use the `filter.query` option instead which doesn't show the query in the UI.
   * @defaultValue ''
   */
  query?: string;
  /**
   * Resources that should be preselected when the picker is opened.
   * @defaultValue []
   */
  selectionIds?: BaseResource[];
}

Filters

archived
Whether to show [archived products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). Only applies to the Product resource type picker. Setting this to undefined will show a badge on draft products.
```
boolean | undefined
```
draft
Whether to show [draft products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). Only applies to the Product resource type picker. Setting this to undefined will show a badge on draft products.
```
boolean | undefined
```
hidden
Whether to show hidden resources, referring to products that are not published on any sales channels.
```
boolean
```
query
GraphQL initial search query for filtering resources available in the picker. See [search syntax](/docs/api/usage/search-syntax) for more information. This is not displayed in the search bar when the picker is opened.
```
string
```
variants
Whether to show product variants. Only applies to the Product resource type picker.
```
boolean
```

interface Filters {
  /**
   * Whether to show hidden resources, referring to products that are not published on any sales channels.
   * @defaultValue true
   */
  hidden?: boolean;
  /**
   * Whether to show product variants. Only applies to the Product resource type picker.
   * @defaultValue true
   */
  variants?: boolean;
  /**
   * Whether to show [draft products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability).
   * Only applies to the Product resource type picker.
   * Setting this to undefined will show a badge on draft products.
   * @defaultValue true
   */
  draft?: boolean | undefined;
  /**
   * Whether to show [archived products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability).
   * Only applies to the Product resource type picker.
   * Setting this to undefined will show a badge on draft products.
   * @defaultValue true
   */
  archived?: boolean | undefined;
  /**
   * GraphQL initial search query for filtering resources available in the picker.
   * See [search syntax](/docs/api/usage/search-syntax) for more information.
   * This is not displayed in the search bar when the picker is opened.
   */
  query?: string;
}

BaseResource

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

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

Resource

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

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

SelectPayload

SelectPayload<Type>

CustomerSegmentTemplateComponent

any

PrintActionExtensionApi

data
Information about the currently viewed or selected items.
```
Data
```
extension
The identifier of the running extension target.
```
{ target: ExtensionTarget; }
```
i18n
Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
```
I18n
```
intents
Provides information to the receiver the of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

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

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

ProductDetailsConfigurationApi

data

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

extension
The identifier of the running extension target.
```
{ target: ExtensionTarget; }
```
i18n
Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
```
I18n
```
intents
Provides information to the receiver the of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

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

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
```
string
```
hasOnlyDefaultVariant
```
boolean
```
id
```
string
```
onlineStoreUrl
```
string
```

options

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

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

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

ProductComponent

componentVariantsCount
```
number
```

featuredImage

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

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

export interface ProductComponent {
  id: string;
  title: string;
  featuredImage?: {
    id?: string | null;
    url?: string | null;
    altText?: string | null;
  } | null;
  totalVariants: number;
  productUrl: string;
  componentVariantsCount: number;
  nonComponentVariantsCount: number;
}

ProductConfigurationComponents

any

ProductVariantDetailsConfigurationApi

data

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

extension
The identifier of the running extension target.
```
{ target: ExtensionTarget; }
```
i18n
Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
```
I18n
```
intents
Provides information to the receiver the of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

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

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
```
string
```
compareAtPrice
```
string
```
displayName
```
string
```
id
```
string
```
price
```
string
```
productVariantComponents
```
ProductVariantComponent[]
```
selectedOptions
```
{ name: string; value: string; }[]
```
sku
```
string
```
taxable
```
boolean
```
taxCode
```
string
```
title
```
string
```
weight
```
number
```

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

ProductVariantComponent

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

image

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

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

export interface ProductVariantComponent {
  id: string;
  displayName: string;
  title: string;
  sku?: string;
  image?: {
    id?: string | null;
    url?: string | null;
    altText?: string | null;
  } | null;
  productVariantUrl: string;
  selectedOptions: {
    name: string;
    value: string;
  }[];
}

OrderRoutingRuleApi

applyMetafieldsChange
```
ApplyMetafieldsChange
```
data
```
Data
```
extension
The identifier of the running extension target.
```
{ target: ExtensionTarget; }
```
i18n
Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
```
I18n
```
intents
Provides information to the receiver the of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

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

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

ApplyMetafieldsChange

changes
```
MetafieldsChange[]
```

void

void

(changes: MetafieldsChange[]) => void

MetafieldsChange

MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]

MetafieldUpdateChange

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

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

SupportedDefinitionType

'boolean' | '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
```
string
```
namespace
```
string
```
type
```
'removeMetafield'
```

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

OrderRoutingComponents

any

ValidationSettingsApi

applyMetafieldChange
Applies a change to the validation settings.
```
ApplyMetafieldChange
```
data
```
ValidationData
```
extension
The identifier of the running extension target.
```
{ target: ExtensionTarget; }
```
i18n
Utilities for translating content according to the current localization of the admin. More info - /docs/apps/checkout/best-practices/localizing-ui-extensions
```
I18n
```
intents
Provides information to the receiver the of an intent.
```
Intents
```

query

Used to query the Admin GraphQL API

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

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

ApplyMetafieldChange

change
```
MetafieldChange
```

Promise<MetafieldChangeResult>

Promise<MetafieldChangeResult>

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

MetafieldChange

MetafieldUpdateChange | MetafieldRemoveChange

MetafieldChangeResult

MetafieldChangeSuccess | MetafieldChangeResultError

MetafieldChangeSuccess

type
```
'success'
```

interface MetafieldChangeSuccess {
  type: 'success';
}

MetafieldChangeResultError

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

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

ValidationData

The object that exposes the validation with its settings.

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

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

ShopifyFunction

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

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

Validation

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

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

Metafield

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

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

Was this page helpful?