Merge pull request #54 from Shopify/include-declarative-definition

Feature: Include declarative product metafield

Author: shauns

CHANGELOG.md

@@ -1,5 +1,9 @@
 # @shopify/shopify-app-template-react-router
 
+## 2025.09.26
+
+- [#54](https://github.com/Shopify/shopify-app-template-react-router/pull/54) Includes a declarative product metafield definition
+
 ## 2025.08.17
 
 - [#58](https://github.com/Shopify/shopify-app-template-react-router/pull/58) Update Shopify & React Router dependencies.  Use Shopify React Router in graphqlrc, not shopify-api

README.md

@@ -73,6 +73,7 @@ This template comes pre-configured with examples of:
 1. Setting up your Shopify app in [/app/shopify.server.ts](https://github.com/Shopify/shopify-app-template-react-router/blob/main/app/shopify.server.ts)
 2. Querying data using Graphql. Please see: [/app/routes/app.\_index.tsx](https://github.com/Shopify/shopify-app-template-react-router/blob/main/app/routes/app._index.tsx).
 3. Responding to webhooks. Please see [/app/routes/webhooks.tsx](https://github.com/Shopify/shopify-app-template-react-router/blob/main/app/routes/webhooks.app.uninstalled.tsx).
+4. Using metafields and declarative metafield definitions. Please see [/app/routes/app.\_index.tsx](https://github.com/Shopify/shopify-app-template-react-router/blob/main/app/routes/app._index.tsx) and [/shopify.app.toml](https://github.com/Shopify/shopify-app-template-react-router/blob/main/shopify.app.toml).
 
 Please read the [documentation for @shopify/shopify-app-react-router](https://shopify.dev/docs/api/shopify-app-react-router) to see what other API's are available.
 
@@ -155,7 +156,7 @@ This only applies if your app is embedded, which it will be by default.
 
 ### Webhooks: shop-specific webhook subscriptions aren't updated
 
-If you are registering webhooks in the `afterAuth` hook, using `shopify.registerWebhooks`, you may find that your subscriptions aren't being updated.  
+If you are registering webhooks in the `afterAuth` hook, using `shopify.registerWebhooks`, you may find that your subscriptions aren't being updated.
 
 Instead of using the `afterAuth` hook declare app-specific webhooks in the `shopify.app.toml` file.  This approach is easier since Shopify will automatically sync changes every time you run `deploy` (e.g: `npm run deploy`).  Please read these guides to understand more:
 
@@ -171,7 +172,7 @@ During normal development, the app won't need to re-authenticate most of the tim
 
 ### Webhooks: Admin created webhook failing HMAC validation
 
-Webhooks subscriptions created in the [Shopify admin](https://help.shopify.com/en/manual/orders/notifications/webhooks) will fail HMAC validation. This is because the webhook payload is not signed with your app's secret key.  
+Webhooks subscriptions created in the [Shopify admin](https://help.shopify.com/en/manual/orders/notifications/webhooks) will fail HMAC validation. This is because the webhook payload is not signed with your app's secret key.
 
 The recommended solution is to use [app-specific webhooks](https://shopify.dev/docs/apps/build/webhooks/subscribe#app-specific-subscriptions) defined in your toml file instead.  Test your webhooks by triggering events manually in the Shopify admin(e.g. Updating the product title to trigger a `PRODUCTS_UPDATE`).
 

app/routes/app._index.tsx

@@ -39,13 +39,21 @@ export const action = async ({ request }: ActionFunctionArgs) => {
                 }
               }
             }
+            demoInfo: metafield(namespace: "$app", key: "demo_info") { jsonValue }
           }
         }
       }`,
     {
       variables: {
         product: {
           title: `${color} Snowboard`,
+          metafields: [
+            {
+              namespace: "$app",
+              key: "demo_info",
+              value: `Created by React Router Template`,
+            },
+          ],
         },
       },
     },
@@ -140,7 +148,12 @@ export default function Index() {
           >
             productCreate
           </s-link>{" "}
-          mutation in our API references.
+          mutation in our API references. Includes a product <s-link
+            href="https://shopify.dev/docs/apps/build/custom-data/metafields/manage-metafields"
+            target="_blank"
+          >
+            metafield
+          </s-link>.
         </s-paragraph>
         <s-stack direction="inline" gap="base">
           <s-button
@@ -214,6 +227,15 @@ export default function Index() {
             GraphQL
           </s-link>
         </s-paragraph>
+        <s-paragraph>
+          <s-text>API: </s-text>
+          <s-link
+            href="https://shopify.dev/docs/apps/build/custom-data"
+            target="_blank"
+          >
+            Metafields & metaobjects
+          </s-link>
+        </s-paragraph>
         <s-paragraph>
           <s-text>Database: </s-text>
           <s-link href="https://www.prisma.io/" target="_blank">

shopify.app.toml

@@ -2,6 +2,13 @@
 
 scopes = "write_products"
 
+# Product metafield for tracking demo products created by this template
+[product.metafields.app.demo_info]
+type = "single_line_text_field"
+name = "Demo Source Info"
+description = "Tracks products created by the Shopify app template for development"
+access.admin = "merchant_read_write"
+
 [webhooks]
 api_version = "2025-07"