diff --git a/checkout-extension/locales/en.default.json b/checkout-extension/locales/en.default.json
index 7cf280ba..165d01cf 100644
--- a/checkout-extension/locales/en.default.json
+++ b/checkout-extension/locales/en.default.json
@@ -2,5 +2,6 @@
   "welcome": "Welcome to the {{target}} extension!",
   "iWouldLikeAFreeGiftWithMyOrder": "I would like to receive a free gift with my order",
   "addAFreeGiftToMyOrder": "Add a free gift to my order",
-  "attributeChangesAreNotSupported": "Attribute changes are not supported in this checkout"
+  "attributeChangesAreNotSupported": "Attribute changes are not supported in this checkout",
+  "metafieldChangesAreNotSupported": "Cart metafield changes are not supported in this checkout"
 }
diff --git a/checkout-extension/locales/fr.json b/checkout-extension/locales/fr.json
index 95da7867..5219e785 100644
--- a/checkout-extension/locales/fr.json
+++ b/checkout-extension/locales/fr.json
@@ -2,5 +2,6 @@
   "welcome": "Bienvenue dans l'extension {{target}}!",
   "iWouldLikeAFreeGiftWithMyOrder": "Je souhaite recevoir un cadeau gratuit avec ma commande",
   "addAFreeGiftToMyOrder": "Ajouter un cadeau gratuit à ma commande",
-  "attributeChangesAreNotSupported": "Les modifications d'attribut ne sont pas prises en charge dans cette commande"
+  "attributeChangesAreNotSupported": "Les modifications d'attribut ne sont pas prises en charge dans cette commande",
+  "metafieldChangesAreNotSupported": "Les modifications de métachamps de panier ne sont pas prises en charge dans cette commande"
 }
diff --git a/checkout-extension/shopify.extension.toml.liquid b/checkout-extension/shopify.extension.toml.liquid
index 9d1a4490..b181fbe0 100644
--- a/checkout-extension/shopify.extension.toml.liquid
+++ b/checkout-extension/shopify.extension.toml.liquid
@@ -37,12 +37,18 @@ api_access = true
 # products, customers, and more. Learn more:
 # https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#metafields
 
+{%- if flavor contains "preact" %}
+[[extensions.metafields]]
+namespace = "$app"
+key = "requestedFreeGift"
+{%- else %}
 # [[extensions.metafields]]
 # namespace = "my_namespace"
 # key = "my_key"
 # [[extensions.metafields]]
 # namespace = "my_namespace"
 # key = "my_other_key"
+{%- endif %}
 
 # Defines settings that will be collected from merchants installing
 # your extension. Learn more:
diff --git a/checkout-extension/src/Checkout.liquid b/checkout-extension/src/Checkout.liquid
index a46c760a..d1813fb6 100644
--- a/checkout-extension/src/Checkout.liquid
+++ b/checkout-extension/src/Checkout.liquid
@@ -8,17 +8,19 @@ export default async () => {
 };
 
 function Extension() {
-  // 2. Check instructions for feature availability, see https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions for details
-  if (!shopify.instructions.value.attributes.canUpdateAttributes) {
-    // For checkouts such as draft order invoices, cart attributes may not be allowed
-    // Consider rendering a fallback UI or nothing at all, if the feature is unavailable
+  // 2. Check instructions for feature availability
+  if (!shopify.instructions.value.metafields.canSetCartMetafields) {
     return (
       <s-banner heading="{{ name }}" tone="warning">
-        {shopify.i18n.translate("attributeChangesAreNotSupported")}
+        {shopify.i18n.translate("metafieldChangesAreNotSupported")}
       </s-banner>
     );
   }
 
+  const freeGiftRequested = shopify.appMetafields.value.find(
+    (appMetafield) => appMetafield.target.type === 'cart' && appMetafield.metafield.namespace === "$app" && appMetafield.metafield.key === "requestedFreeGift"
+  );
+
   // 3. Render a UI
   return (
     <s-banner heading="{{ name }}">
@@ -28,21 +30,28 @@ function Extension() {
             target: <s-text type="emphasis">{shopify.extension.target}</s-text>,
           })}
         </s-text>
-        <s-button onClick={handleClick}>
-          {shopify.i18n.translate("addAFreeGiftToMyOrder")}
-        </s-button>
+        <s-checkbox
+          checked={freeGiftRequested?.metafield?.value === "true"}
+          onChange={onCheckboxChange}
+          label={shopify.i18n.translate("iWouldLikeAFreeGiftWithMyOrder")}
+        />
       </s-stack>
     </s-banner>
   );
 
-  async function handleClick() {
+  async function onCheckboxChange(event) {
+    const isChecked = event.target.checked;
     // 4. Call the API to modify checkout
-    const result = await shopify.applyAttributeChange({
-      key: "requestedFreeGift",
-      type: "updateAttribute",
-      value: "yes",
+    const result = await shopify.applyMetafieldChange({
+      type: "updateCartMetafield",
+      metafield: {
+        namespace: "$app",
+        key: "requestedFreeGift",
+        value: isChecked ? "true" : "false",
+        type: "boolean",
+      },
     });
-    console.log("applyAttributeChange result", result);
+    console.log("applyMetafieldChange result", result);
   }
 }
 {%- elsif flavor contains "react" -%}