Add tutorial references

Add tutorial references.

Author: LucasLacerdaUX

extensions/custom-delivery-instructions/package.json

@@ -6,6 +6,6 @@
   "dependencies": {
     "preact": "^10.10.x",
     "@preact/signals": "^2.3.x",
-    "@shopify/ui-extensions": "~2025.10.0-rc"
+    "@shopify/ui-extensions": "2025.10.x"
   }
 }

extensions/custom-delivery-instructions/shopify.extension.toml

@@ -15,38 +15,14 @@ uid = "9d93ba67-d760-b256-641e-db7147a028d983fc5ddc"
 # and the file that contains your extension’s source code. Learn more:
 # https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview
 
+# [START custom-field.ext-config]
 [[extensions.targeting]]
 module = "./src/Checkout.jsx"
 target = "purchase.checkout.shipping-option-list.render-after"
+# [END custom-field.ext-config]
 
 [extensions.capabilities]
 # Gives your extension access to directly query Shopify’s storefront API.
 # https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access
 api_access = true
 
-# Gives your extension access to make external network calls, using the
-# JavaScript `fetch()` API. Learn more:
-# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#network-access
-# network_access = true
-
-# Loads metafields on checkout resources, including the cart,
-# products, customers, and more. Learn more:
-# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#metafields
-
-# [[extensions.metafields]]
-# namespace = "my_namespace"
-# key = "my_key"
-# [[extensions.metafields]]
-# namespace = "my_namespace"
-# key = "my_other_key"
-
-# Defines settings that will be collected from merchants installing
-# your extension. Learn more:
-# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#settings-definition
-
-# [extensions.settings]
-# [[extensions.settings.fields]]
-# key = "banner_title"
-# type = "single_line_text_field"
-# name = "Banner title"
-# description = "Enter a title for the banner"

extensions/custom-delivery-instructions/src/Checkout.jsx

@@ -3,37 +3,45 @@ import {useMetafield} from "@shopify/ui-extensions/checkout/preact";
 import {render} from "preact";
 import {useState} from "preact/hooks";
 
+// [START custom-field.ext-index]
 // 1. Export the extension
 export default function() {
   render(<Extension />, document.body)
 }
+// [END custom-field.ext-index]
 
 function Extension() {
+  // [START custom-field.instruction-ui]
   const {
     applyMetafieldChange,
     i18n: {translate},
     target: {value: deliveryGroupList},
   } = shopify;
   const [checked, setChecked] = useState(false);
+  // [END custom-field.instruction-ui]
 
+  // [START custom-field.define-metafield]
   // Define the metafield namespace and key
   const metafieldNamespace = "yourAppNamespace"
   const metafieldKey = "deliveryInstructions";
+  // [END custom-field.define-metafield]
 
+  // [START custom-field.use-metafield]
   // Get a reference to the metafield
   const deliveryInstructions = useMetafield({
     namespace: metafieldNamespace,
     key: metafieldKey,
   });
+  // [END custom-field.use-metafield]
 
   // Guard against duplicate rendering of `shipping-option-list.render-after` target for one-time purchase and subscription sections. Calling `applyMetafieldsChange()` on the same namespace-key pair from duplicated extensions would otherwise cause an overwrite of the metafield value.
   // Instead of guarding, another approach would be to prefix the metafield key when calling `applyMetafieldsChange()`. The `deliveryGroupList`'s `groupType` could be used to such effect.'
   if (!deliveryGroupList || deliveryGroupList.groupType !== 'oneTimePurchase') {
     return null;
   }
 
-  // Get a reference to the metafield
-  // 3. Render a UI
+  // [START custom-field.instruction-ui]
+  // Render UI components
   return (
     <s-stack gap="base">
       <s-checkbox
@@ -45,7 +53,9 @@ function Extension() {
         <s-text-area
           label={translate('deliveryInstructions')}
           rows={3}
+          // [START custom-field.update-metafield]
           onBlur={(event) => {
+            // Apply the change to the metafield
             applyMetafieldChange({
               type: "updateMetafield",
               namespace: metafieldNamespace,
@@ -54,11 +64,13 @@ function Extension() {
               value: event.target.value,
             })
           }}
+          // [END custom-field.update-metafield]
           value={`${deliveryInstructions?.value || ''}`}
         />
       )}
     </s-stack>
   );
+  // [END custom-field.instruction-ui]
 
   async function handleChange() {
     setChecked(!checked);