@shopify/ui-extensions 2025.10.13 → 2025.10.14

package/src/surfaces/admin/api/block/examples/select-related-products.jsx

@@ -0,0 +1,46 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [relatedCount, setRelatedCount] = useState(0);
+
+  const currentProductId = data.selected[0]?.id;
+
+  const handleSelectRelated = async () => {
+    const selectedProducts = await shopify.resourcePicker({
+      type: 'product',
+      multiple: true,
+      filter: {
+        hidden: false,
+        draft: false,
+      },
+    });
+
+    if (selectedProducts) {
+      await fetch('/api/product-recommendations', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+          productId: currentProductId,
+          relatedProducts: selectedProducts.map((p) => p.id),
+        }),
+      });
+      
+      setRelatedCount(selectedProducts.length);
+    }
+  };
+
+  return (
+    <s-admin-block heading="Product Recommendations">
+      <s-button onClick={handleSelectRelated}>Select Related Products</s-button>
+      {relatedCount > 0 && (
+        <s-text>Added {relatedCount} related products</s-text>
+      )}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/checkout-rules/examples/configure-shipping-restrictions.jsx

@@ -0,0 +1,52 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [countries, setCountries] = useState('US, CA, GB');
+  const [errorMsg, setErrorMsg] = useState('Shipping not available to your location');
+
+  const handleSave = async () => {
+    const blockedCountries = countries.split(',').map((c) => c.trim());
+
+    await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'validation',
+      key: 'blocked_shipping_countries',
+      value: JSON.stringify(blockedCountries),
+      valueType: 'json',
+    });
+
+    await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'validation',
+      key: 'error_message',
+      value: errorMsg,
+      valueType: 'single_line_text_field',
+    });
+  };
+
+  return (
+    <s-function-settings>
+      <s-stack direction="block">
+        <s-text-field
+          label="Blocked countries (comma-separated)"
+          value={countries}
+          onChange={(value) => setCountries(value)}
+        />
+        <s-text-field
+          label="Error message"
+          value={errorMsg}
+          onChange={(value) => setErrorMsg(value)}
+        />
+        <s-button onClick={handleSave}>Save Restrictions</s-button>
+        <s-text>Validation ID: {data.validation?.id}</s-text>
+        <s-text>Function ID: {data.shopifyFunction.id}</s-text>
+      </s-stack>
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/checkout-rules/examples/load-validation-config.jsx

@@ -0,0 +1,55 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [mode, setMode] = useState('loading');
+  const [settings, setSettings] = useState({});
+
+  useEffect(() => {
+    const initializeSettings = async () => {
+      if (data.validation) {
+        const config = data.validation.metafields.reduce((acc, field) => {
+          acc[field.key] = field.value;
+          return acc;
+        }, {});
+        
+        setSettings(config);
+        setMode('edit');
+      } else {
+        await shopify.applyMetafieldChange({
+          type: 'updateMetafield',
+          namespace: 'validation',
+          key: 'default_rule',
+          value: 'require_minimum_cart_total',
+          valueType: 'single_line_text_field',
+        });
+        
+        setMode('created');
+      }
+    };
+
+    initializeSettings();
+  }, [data]);
+
+  return (
+    <s-function-settings>
+      {mode === 'loading' && <s-spinner />}
+      {mode === 'edit' && (
+        <>
+          <s-text>Editing existing validation</s-text>
+          {Object.entries(settings).map(([key, value]) => (
+            <s-text key={key}>
+              {key}: {value}
+            </s-text>
+          ))}
+        </>
+      )}
+      {mode === 'created' && <s-text>Created new validation configuration</s-text>}
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/checkout-rules/examples/set-minimum-quantity.jsx

@@ -0,0 +1,40 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [quantity, setQuantity] = useState('3');
+  const [result, setResult] = useState(null);
+
+  const handleSave = async () => {
+    const res = await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'validation',
+      key: 'minimum_quantity',
+      value: quantity,
+      valueType: 'number_integer',
+    });
+
+    setResult(res);
+  };
+
+  return (
+    <s-function-settings>
+      <s-number-field
+        label="Minimum quantity"
+        value={quantity}
+        onChange={(value) => setQuantity(value)}
+      />
+      <s-button onClick={handleSave}>Save Validation</s-button>
+      {result?.type === 'success' && (
+        <s-banner status="success">Minimum quantity configured</s-banner>
+      )}
+      {result?.type === 'error' && (
+        <s-banner status="critical">{result.message}</s-banner>
+      )}
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/checkout-rules/launch-options.ts

@@ -1,33 +1,45 @@
+/**
+ * A [metafield](/docs/apps/build/metafields) that stores validation function configuration data. Use metafields to persist settings that control how your validation function behaves, such as minimum quantities, restricted shipping zones, or custom validation rules.
+ */
 interface Metafield {
+  /** A human-readable description explaining the metafield's purpose and how it affects validation behavior. Use this to document your settings for other developers. */
   description?: string;
+  /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */
   id: string;
+  /** The namespace that organizes related metafields together. All metafields for a validation should use a consistent namespace to group related settings. */
   namespace: string;
+  /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_quantity'` or `'blocked_countries'`). */
   key: string;
+  /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */
   value: string;
+  /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */
   type: string;
 }
+
+/**
+ * A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.
+ */
 interface Validation {
-  /**
-   * the validation's gid when active in a shop
-   */
+  /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */
   id: string;
-  /**
-   * the metafields owned by the validation
-   */
+  /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */
   metafields: Metafield[];
 }
 
+/**
+ * A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.
+ */
 interface ShopifyFunction {
-  /**
-   * the validation function's unique identifier
-   */
+  /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */
   id: string;
 }
 
 /**
- * The object that exposes the validation with its settings.
+ * The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.
  */
 export interface ValidationData {
+  /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */
   validation?: Validation;
+  /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */
   shopifyFunction: ShopifyFunction;
 }

package/src/surfaces/admin/api/checkout-rules/metafields.ts

@@ -1,31 +1,66 @@
 import {SupportedDefinitionType} from '../shared';
 
+/**
+ * A metafield update or creation operation. Use this to set or modify metafield values that store validation function configuration data.
+ */
 interface MetafieldUpdateChange {
+  /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */
   type: 'updateMetafield';
+  /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_quantity'` or `'shipping_restriction'`). */
   key: string;
+  /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */
   namespace?: string;
+  /** The metafield value to store. Can be a string or number depending on your configuration needs. */
   value: string | number;
+  /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */
   valueType?: SupportedDefinitionType;
 }
 
+/**
+ * A metafield removal operation. Use this to delete metafields that are no longer needed for your validation configuration.
+ */
 interface MetafieldRemoveChange {
+  /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */
   type: 'removeMetafield';
+  /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */
   key: string;
+  /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */
   namespace: string;
 }
 
+/**
+ * A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify validation settings stored in metafields.
+ */
 type MetafieldChange = MetafieldUpdateChange | MetafieldRemoveChange;
+
+/**
+ * A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.
+ */
 interface MetafieldChangeResultError {
+  /** Indicates the operation failed. Check this value to determine if you need to handle an error. */
   type: 'error';
+  /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */
   message: string;
 }
+
+/**
+ * A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.
+ */
 interface MetafieldChangeSuccess {
+  /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */
   type: 'success';
 }
+
+/**
+ * The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.
+ */
 type MetafieldChangeResult =
   | MetafieldChangeSuccess
   | MetafieldChangeResultError;
 
+/**
+ * A function that applies metafield changes to validation settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.
+ */
 export type ApplyMetafieldChange = (
   change: MetafieldChange,
 ) => Promise<MetafieldChangeResult>;

package/src/surfaces/admin/api/checkout-rules/validation-settings.ts

@@ -4,12 +4,16 @@ import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-target
 import {ApplyMetafieldChange} from './metafields';
 import {ValidationData} from './launch-options';
 
+/**
+ * The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.
+ */
 export interface ValidationSettingsApi<
   ExtensionTarget extends AnyExtensionTarget,
 > extends StandardApi<ExtensionTarget> {
   /**
-   * Applies a change to the validation settings.
+   * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.
    */
   applyMetafieldChange: ApplyMetafieldChange;
+  /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */
   data: ValidationData;
 }

package/src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts

@@ -2,42 +2,54 @@ import type {StandardApi} from '../standard/standard';
 import type {I18n} from '../../../../api';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 
+/**
+ * The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.
+ */
 export interface CustomerSegmentTemplateApi<
   ExtensionTarget extends AnyExtensionTarget,
 > extends StandardApi<ExtensionTarget> {
-  /* Utilities for translating content according to the current `localization` of the admin. */
+  /** Utilities for translating template content into the merchant's language. */
   i18n: I18n;
   /** @private */
   __enabledFeatures: string[];
 }
 
+/**
+ * Standard customer metafields that can be referenced as template dependencies.
+ */
 export type CustomerStandardMetafieldDependency = 'facts.birth_date';
+
+/**
+ * Defines a customer segment template that merchants can use to create targeted customer groups.
+ */
 export interface CustomerSegmentTemplate {
   /**
-   * The localized title of the template.
+   * The template title in the merchant's language.
    */
   title: string;
   /**
-   * The localized description of the template. An array can be used for multiple paragraphs.
+   * The template description in the merchant's language. Use an array for multiple paragraphs.
    */
   description: string | string[];
   /**
-   * The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
+   * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.
    */
   query: string;
   /**
-   * The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
+   * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.
    */
   queryToInsert: string;
   /**
-   * The list of customer standard metafields or custom metafields used in the template's query.
+   * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.
    */
   dependencies?: {
+    /** Standard Shopify customer metafields used in the query. */
     standardMetafields?: CustomerStandardMetafieldDependency[];
+    /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */
     customMetafields?: string[];
   };
   /**
-   * ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
+   * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a "New" badge.
    */
   createdOn: string;
 }

package/src/surfaces/admin/api/customer-segment-template/examples/abandoned-cart-recovery.jsx

@@ -0,0 +1,30 @@
+export default () => {
+  return {
+    templates: [
+      {
+        title: 'Cart abandoners',
+        description: [
+          'Customers who abandoned carts in the last 7 days',
+          'Use this segment for email recovery campaigns',
+        ],
+        query: `{
+  abandoned_checkouts_count: {
+    min: 1
+  }
+  last_abandoned_order_date: {
+    min: "${new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()}"
+  }
+}`,
+        queryToInsert: `{
+  abandoned_checkouts_count: {
+    min: 1
+  }
+  last_abandoned_order_date: {
+    min: "LAST_7_DAYS"
+  }
+}`,
+        createdOn: '2025-01-15T00:00:00Z',
+      },
+    ],
+  };
+};

package/src/surfaces/admin/api/customer-segment-template/examples/birthday-this-month.jsx

@@ -0,0 +1,32 @@
+export default () => {
+  return {
+    templates: [
+      {
+        title: 'Birthday this month',
+        description: 'Customers with birthdays in the current month',
+        query: `{
+  metafields: {
+    key: "birth_date"
+    namespace: "customer"
+    value: {
+      month: ${new Date().getMonth() + 1}
+    }
+  }
+}`,
+        queryToInsert: `{
+  metafields: {
+    key: "birth_date"
+    namespace: "customer"
+    value: {
+      month: ${new Date().getMonth() + 1}
+    }
+  }
+}`,
+        dependencies: {
+          standardMetafields: ['facts.birth_date'],
+        },
+        createdOn: '2025-01-15T00:00:00Z',
+      },
+    ],
+  };
+};

package/src/surfaces/admin/api/customer-segment-template/examples/high-value-customers.jsx

@@ -0,0 +1,27 @@
+export default () => {
+  return {
+    templates: [
+      {
+        title: shopify.i18n.translate('templates.highValue.title'),
+        description: shopify.i18n.translate('templates.highValue.description'),
+        query: `{
+  total_spent: {
+    min: 500
+  }
+  orders_count: {
+    min: 5
+  }
+}`,
+        queryToInsert: `{
+  total_spent: {
+    min: 500
+  }
+  orders_count: {
+    min: 5
+  }
+}`,
+        createdOn: '2025-01-15T00:00:00Z',
+      },
+    ],
+  };
+};

package/src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts

@@ -4,12 +4,16 @@ import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-target
 import {ApplyMetafieldChange} from './metafields';
 import {DiscountFunctionSettingsData} from './launch-options';
 
+/**
+ * The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.
+ */
 export interface DiscountFunctionSettingsApi<
   ExtensionTarget extends AnyExtensionTarget,
 > extends Omit<BlockExtensionApi<ExtensionTarget>, 'data'> {
   /**
-   * Applies a change to the discount function settings.
+   * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.
    */
   applyMetafieldChange: ApplyMetafieldChange;
+  /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */
   data: DiscountFunctionSettingsData;
 }

package/src/surfaces/admin/api/discount-function-settings/examples/configure-discount-threshold.jsx

@@ -0,0 +1,39 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [threshold, setThreshold] = useState('50.00');
+  const [saved, setSaved] = useState(false);
+
+  const handleSave = async () => {
+    const result = await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'discount-config',
+      key: 'minimum_purchase',
+      value: threshold,
+      valueType: 'number_decimal',
+    });
+
+    if (result.type === 'success') {
+      setSaved(true);
+    } else {
+      console.error('Configuration failed:', result.message);
+    }
+  };
+
+  return (
+    <s-function-settings>
+      <s-text-field
+        label="Minimum purchase amount"
+        value={threshold}
+        onChange={(value) => setThreshold(value)}
+      />
+      <s-button onClick={handleSave}>Save Threshold</s-button>
+      {saved && <s-banner status="success">Threshold configured!</s-banner>}
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/discount-function-settings/examples/configure-eligibility-rules.jsx

@@ -0,0 +1,45 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [tags, setTags] = useState('vip, wholesale, premium');
+  const [maxUses, setMaxUses] = useState('5');
+
+  const handleSave = async () => {
+    await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'discount-config',
+      key: 'eligible_customer_tags',
+      value: JSON.stringify(tags.split(',').map((t) => t.trim())),
+      valueType: 'json',
+    });
+
+    await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'discount-config',
+      key: 'max_uses_per_customer',
+      value: maxUses,
+      valueType: 'number_integer',
+    });
+  };
+
+  return (
+    <s-function-settings>
+      <s-text-field
+        label="Eligible customer tags (comma-separated)"
+        value={tags}
+        onChange={(value) => setTags(value)}
+      />
+      <s-number-field
+        label="Max uses per customer"
+        value={maxUses}
+        onChange={(value) => setMaxUses(value)}
+      />
+      <s-button onClick={handleSave}>Save Eligibility Rules</s-button>
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/discount-function-settings/examples/load-existing-settings.jsx

@@ -0,0 +1,45 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [settings, setSettings] = useState({});
+
+  useEffect(() => {
+    const initializeSettings = async () => {
+      const existingSettings = data.metafields.reduce((acc, field) => {
+        acc[field.key] = field.value;
+        return acc;
+      }, {});
+
+      setSettings(existingSettings);
+
+      if (!existingSettings.eligible_tags) {
+        await shopify.applyMetafieldChange({
+          type: 'updateMetafield',
+          namespace: 'discount-config',
+          key: 'eligible_tags',
+          value: JSON.stringify(['vip', 'wholesale']),
+          valueType: 'json',
+        });
+      }
+    };
+
+    initializeSettings();
+  }, [data]);
+
+  return (
+    <s-function-settings>
+      <s-text>Current settings:</s-text>
+      {Object.entries(settings).map(([key, value]) => (
+        <s-text key={key}>
+          {key}: {String(value)}
+        </s-text>
+      ))}
+    </s-function-settings>
+  );
+}