@shopify/ui-extensions 2026.1.1 → 2026.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2026.1.1",
+  "version": "2026.1.2",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",

package/src/surfaces/admin/api/action/examples/handle-errors.jsx

@@ -0,0 +1,47 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleFulfill = async () => {
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const orderId = data.selected[0]?.id;
+      
+      const response = await fetch(`/api/orders/${orderId}/fulfill`, {
+        method: 'POST',
+      });
+      
+      const result = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(result.error || 'Fulfillment failed');
+      }
+      
+      console.log('Order fulfilled:', result);
+      shopify.close();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <s-admin-action title="Fulfill Order">
+      {error && <s-banner status="critical">{error}</s-banner>}
+      <s-button onClick={handleFulfill} disabled={loading}>
+        {loading ? 'Fulfilling...' : 'Fulfill Order'}
+      </s-button>
+    </s-admin-action>
+  );
+}

package/src/surfaces/admin/api/action/examples/process-selected-products.jsx

@@ -0,0 +1,33 @@
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+
+  const handleProcess = async () => {
+    const productIds = data.selected.map((item) => item.id);
+
+    const response = await fetch('/api/bulk-process', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({productIds}),
+    });
+
+    if (response.ok) {
+      console.log('Products processed successfully');
+      shopify.close();
+    } else {
+      console.error('Failed to process products');
+    }
+  };
+
+  return (
+    <s-admin-action title="Bulk Process">
+      <s-text>Processing {data.selected.length} products</s-text>
+      <s-button onClick={handleProcess}>Process Products</s-button>
+    </s-admin-action>
+  );
+}

package/src/surfaces/admin/api/action/examples/select-additional-resources.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 [selected, setSelected] = useState(null);
+
+  const currentProductId = data.selected[0]?.id;
+
+  const handleSelectProducts = async () => {
+    const selectedProducts = await shopify.resourcePicker({
+      type: 'product',
+      multiple: 5,
+      action: 'select',
+    });
+
+    if (selectedProducts) {
+      setSelected(selectedProducts);
+      
+      await fetch('/api/create-bundle', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+          mainProduct: currentProductId,
+          components: selectedProducts.map((p) => p.id),
+        }),
+      });
+      
+      shopify.close();
+    }
+  };
+
+  return (
+    <s-admin-action title="Create Bundle">
+      <s-text>Main product: {currentProductId}</s-text>
+      <s-button onClick={handleSelectProducts}>
+        Select Component Products
+      </s-button>
+      {selected && <s-text>Selected {selected.length} products</s-text>}
+    </s-admin-action>
+  );
+}

package/src/surfaces/admin/api/block/examples/display-product-info.jsx

@@ -0,0 +1,46 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [product, setProduct] = useState(null);
+
+  useEffect(() => {
+    const fetchProduct = async () => {
+      const productId = data.selected[0]?.id;
+
+      const {data: productData} = await shopify.query(
+        `query GetProduct($id: ID!) {
+          product(id: $id) {
+            title
+            totalInventory
+            status
+          }
+        }`,
+        {variables: {id: productId}},
+      );
+
+      setProduct(productData.product);
+    };
+
+    fetchProduct();
+  }, [data]);
+
+  return (
+    <s-admin-block heading="Product Information">
+      {product ? (
+        <>
+          <s-text>Title: {product.title}</s-text>
+          <s-text>Inventory: {product.totalInventory}</s-text>
+          <s-text>Status: {product.status}</s-text>
+        </>
+      ) : (
+        <s-spinner />
+      )}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/block/examples/navigate-to-action.jsx

@@ -0,0 +1,50 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [eligible, setEligible] = useState(false);
+  const [checking, setChecking] = useState(true);
+
+  useEffect(() => {
+    const checkEligibility = async () => {
+      const productId = data.selected[0]?.id;
+
+      if (!productId) {
+        setChecking(false);
+        return;
+      }
+
+      const response = await fetch(`/api/products/${productId}/check-eligibility`, {
+        method: 'GET',
+        headers: {'Content-Type': 'application/json'},
+      });
+
+      const {eligible} = await response.json();
+      setEligible(eligible);
+      setChecking(false);
+    };
+
+    checkEligibility();
+  }, [data]);
+
+  const handleNavigate = () => {
+    shopify.navigation.navigate('extension://my-product-action-extension-handle');
+  };
+
+  return (
+    <s-admin-block heading="Advanced Actions">
+      {checking ? (
+        <s-spinner />
+      ) : eligible ? (
+        <s-button onClick={handleNavigate}>Launch Advanced Workflow</s-button>
+      ) : (
+        <s-text>Product not eligible for advanced actions</s-text>
+      )}
+    </s-admin-block>
+  );
+}

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/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/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>
+  );
+}

package/src/surfaces/admin/api/intents/examples/create-article.jsx

@@ -0,0 +1,35 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [result, setResult] = useState(null);
+  const [creating, setCreating] = useState(false);
+
+  const handleCreate = async () => {
+    setCreating(true);
+    
+    const activity = await shopify.intents.invoke('create:shopify/Article');
+    const response = await activity.complete;
+
+    setResult(response);
+    setCreating(false);
+  };
+
+  return (
+    <s-admin-block heading="Create Article">
+      <s-button onClick={handleCreate} disabled={creating}>
+        {creating ? 'Creating...' : 'Launch Article Creator'}
+      </s-button>
+      {result?.code === 'ok' && (
+        <s-banner status="success">Article created successfully!</s-banner>
+      )}
+      {result?.code === 'closed' && (
+        <s-text>Creation cancelled</s-text>
+      )}
+    </s-admin-block>
+  );
+}