diff --git a/pos-ui-extension-cart-line-item-details/package.json.liquid b/pos-ui-extension-cart-line-item-details/package.json.liquid
index 057eb71e..bb7e2455 100644
--- a/pos-ui-extension-cart-line-item-details/package.json.liquid
+++ b/pos-ui-extension-cart-line-item-details/package.json.liquid
@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
+{%- endif %}
 }
-{%- endif -%}
diff --git a/pos-ui-extension-cart-line-item-details/src/Action.liquid b/pos-ui-extension-cart-line-item-details/src/Action.liquid
index cf6a868d..7a9656cd 100644
--- a/pos-ui-extension-cart-line-item-details/src/Action.liquid
+++ b/pos-ui-extension-cart-line-item-details/src/Action.liquid
@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {cartLineItem} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="CartLineItem" title="Cart Line Item">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Title for this line item: ${cartLineItem.title}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-cart-line-item-details/src/MenuItem.liquid b/pos-ui-extension-cart-line-item-details/src/MenuItem.liquid
index 80d66508..7290c118 100644
--- a/pos-ui-extension-cart-line-item-details/src/MenuItem.liquid
+++ b/pos-ui-extension-cart-line-item-details/src/MenuItem.liquid
@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+  
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,
diff --git a/pos-ui-extension-customer-details/package.json.liquid b/pos-ui-extension-customer-details/package.json.liquid
index 057eb71e..3048dcce 100644
--- a/pos-ui-extension-customer-details/package.json.liquid
+++ b/pos-ui-extension-customer-details/package.json.liquid
@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}
\ No newline at end of file
diff --git a/pos-ui-extension-customer-details/src/Action.liquid b/pos-ui-extension-customer-details/src/Action.liquid
index 7c505da5..faf99d5f 100644
--- a/pos-ui-extension-customer-details/src/Action.liquid
+++ b/pos-ui-extension-customer-details/src/Action.liquid
@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {customer} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="CustomerDetails" title="Customer Details">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Customer ID: ${customer.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from "react";
 
 import {
diff --git a/pos-ui-extension-customer-details/src/Block.liquid b/pos-ui-extension-customer-details/src/Block.liquid
index 98b57470..8ca064ca 100644
--- a/pos-ui-extension-customer-details/src/Block.liquid
+++ b/pos-ui-extension-customer-details/src/Block.liquid
@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {customer, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Customer ID for this customer: ${customer.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from "react";
 
 import {
diff --git a/pos-ui-extension-customer-details/src/MenuItem.liquid b/pos-ui-extension-customer-details/src/MenuItem.liquid
index 34e92c75..e23c2726 100644
--- a/pos-ui-extension-customer-details/src/MenuItem.liquid
+++ b/pos-ui-extension-customer-details/src/MenuItem.liquid
@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+  
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from "react";
 import {
   reactExtension,
diff --git a/pos-ui-extension-draft-order-details/package.json.liquid b/pos-ui-extension-draft-order-details/package.json.liquid
index 057eb71e..3048dcce 100644
--- a/pos-ui-extension-draft-order-details/package.json.liquid
+++ b/pos-ui-extension-draft-order-details/package.json.liquid
@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}
\ No newline at end of file
diff --git a/pos-ui-extension-draft-order-details/src/Action.liquid b/pos-ui-extension-draft-order-details/src/Action.liquid
index c552f653..4edb0d06 100644
--- a/pos-ui-extension-draft-order-details/src/Action.liquid
+++ b/pos-ui-extension-draft-order-details/src/Action.liquid
@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {draftOrder} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="DraftOrderDetailsAction" title="Draft Order Details Action">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Draft Order ID: ${draftOrder.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-draft-order-details/src/Block.liquid b/pos-ui-extension-draft-order-details/src/Block.liquid
index 6bec9a8c..23c31ffa 100644
--- a/pos-ui-extension-draft-order-details/src/Block.liquid
+++ b/pos-ui-extension-draft-order-details/src/Block.liquid
@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {draftOrder, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Draft Order ID for this draft order: ${draftOrder.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-draft-order-details/src/MenuItem.liquid b/pos-ui-extension-draft-order-details/src/MenuItem.liquid
index 4495bc12..b125ab94 100644
--- a/pos-ui-extension-draft-order-details/src/MenuItem.liquid
+++ b/pos-ui-extension-draft-order-details/src/MenuItem.liquid
@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+  
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,
diff --git a/pos-ui-extension-order-details/package.json.liquid b/pos-ui-extension-order-details/package.json.liquid
index 057eb71e..3048dcce 100644
--- a/pos-ui-extension-order-details/package.json.liquid
+++ b/pos-ui-extension-order-details/package.json.liquid
@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}
\ No newline at end of file
diff --git a/pos-ui-extension-order-details/src/Action.liquid b/pos-ui-extension-order-details/src/Action.liquid
index 0ab0f315..10d4c839 100644
--- a/pos-ui-extension-order-details/src/Action.liquid
+++ b/pos-ui-extension-order-details/src/Action.liquid
@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {order} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="OrderDetailsAction" title="Order Details Action">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Order ID: ${order.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-order-details/src/Block.liquid b/pos-ui-extension-order-details/src/Block.liquid
index f03382fa..e3583f0a 100644
--- a/pos-ui-extension-order-details/src/Block.liquid
+++ b/pos-ui-extension-order-details/src/Block.liquid
@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {order, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Order ID: ${order.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-order-details/src/MenuItem.liquid b/pos-ui-extension-order-details/src/MenuItem.liquid
index be5ec4bd..a461d620 100644
--- a/pos-ui-extension-order-details/src/MenuItem.liquid
+++ b/pos-ui-extension-order-details/src/MenuItem.liquid
@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+  
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,
diff --git a/pos-ui-extension-post-purchase/package.json.liquid b/pos-ui-extension-post-purchase/package.json.liquid
index 057eb71e..3048dcce 100644
--- a/pos-ui-extension-post-purchase/package.json.liquid
+++ b/pos-ui-extension-post-purchase/package.json.liquid
@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}
\ No newline at end of file
diff --git a/pos-ui-extension-post-purchase/src/Action.liquid b/pos-ui-extension-post-purchase/src/Action.liquid
index c6530457..40ca3214 100644
--- a/pos-ui-extension-post-purchase/src/Action.liquid
+++ b/pos-ui-extension-post-purchase/src/Action.liquid
@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {order} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="PostPurchaseAction" title="Post Purchase Action">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Order ID for complete checkout: ${order.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-post-purchase/src/Block.liquid b/pos-ui-extension-post-purchase/src/Block.liquid
index 4ed7bae8..01e8525d 100644
--- a/pos-ui-extension-post-purchase/src/Block.liquid
+++ b/pos-ui-extension-post-purchase/src/Block.liquid
@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {order, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Order ID for complete checkout: ${order.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-post-purchase/src/MenuItem.liquid b/pos-ui-extension-post-purchase/src/MenuItem.liquid
index a70fa7e0..299f3569 100644
--- a/pos-ui-extension-post-purchase/src/MenuItem.liquid
+++ b/pos-ui-extension-post-purchase/src/MenuItem.liquid
@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+  
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,
diff --git a/pos-ui-extension-product-details/package.json.liquid b/pos-ui-extension-product-details/package.json.liquid
index 057eb71e..3048dcce 100644
--- a/pos-ui-extension-product-details/package.json.liquid
+++ b/pos-ui-extension-product-details/package.json.liquid
@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}
\ No newline at end of file
diff --git a/pos-ui-extension-product-details/src/Action.liquid b/pos-ui-extension-product-details/src/Action.liquid
index 2b6bffc3..0224c526 100644
--- a/pos-ui-extension-product-details/src/Action.liquid
+++ b/pos-ui-extension-product-details/src/Action.liquid
@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {product} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="ProductDetails" title="Product Details">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Product ID: ${product.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-product-details/src/Block.liquid b/pos-ui-extension-product-details/src/Block.liquid
index f8c6db39..c483f5e7 100644
--- a/pos-ui-extension-product-details/src/Block.liquid
+++ b/pos-ui-extension-product-details/src/Block.liquid
@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {product, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Product ID for this product: ${product.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {
diff --git a/pos-ui-extension-product-details/src/MenuItem.liquid b/pos-ui-extension-product-details/src/MenuItem.liquid
index 1b795f40..5f3e46d5 100644
--- a/pos-ui-extension-product-details/src/MenuItem.liquid
+++ b/pos-ui-extension-product-details/src/MenuItem.liquid
@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+  
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,
diff --git a/pos-ui-extension-smart-grid/package.json.liquid b/pos-ui-extension-smart-grid/package.json.liquid
index 057eb71e..3048dcce 100644
--- a/pos-ui-extension-smart-grid/package.json.liquid
+++ b/pos-ui-extension-smart-grid/package.json.liquid
@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}
\ No newline at end of file
diff --git a/pos-ui-extension-smart-grid/src/Modal.liquid b/pos-ui-extension-smart-grid/src/Modal.liquid
index 36ed3269..b42972e0 100644
--- a/pos-ui-extension-smart-grid/src/Modal.liquid
+++ b/pos-ui-extension-smart-grid/src/Modal.liquid
@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="HelloWorld" title="Hello World!">
+        <s-pos-scroll-view>
+          <s-pos-text>Welcome to the extension!</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react'
 
 import { Text, Screen, ScrollView, Navigator, reactExtension } from '@shopify/ui-extensions-react/point-of-sale'
diff --git a/pos-ui-extension-smart-grid/src/Tile.liquid b/pos-ui-extension-smart-grid/src/Tile.liquid
index eeded6a7..b5ddbd90 100644
--- a/pos-ui-extension-smart-grid/src/Tile.liquid
+++ b/pos-ui-extension-smart-grid/src/Tile.liquid
@@ -1,4 +1,25 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<TileComponent />, document.body);
+};
+
+const TileComponent = () => {
+  const {action} = shopify;
+  return (
+    <s-pos-tile
+      title="My app"
+      subtitle="SmartGrid {{ flavor }} Extension"
+      onPress={() => {
+        action.presentModal()
+      }}
+      enabled
+    />
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react'
 
 import { Tile, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'