Theme app extension access app metafiels attached to products

Topic summary

A developer encountered an issue accessing app-namespaced product metafields from a theme app extension using Liquid.

Initial Problem:

  • Metafields created with reserved namespace $app:bundle on products were not accessible via Liquid in theme app extensions
  • Standard syntax {{ product.metafields["$app:bundle"].components.value }} returned no value
  • Using app.metafields was suggested but didn’t work, as it only accesses metafields attached to the app installation itself

Solution Found:
Create a metafield definition with storefront: PUBLIC_READ access using the metafieldDefinitionCreate mutation. This allows the metafield to remain private in the admin while being publicly readable on the storefront. After creating this definition, the original Liquid syntax successfully retrieves the metafield value in the theme app extension.

Key Takeaway:
App-namespaced metafields require explicit storefront access configuration through metafield definitions to be accessible in theme app extensions, even when the metafield data is already set on products.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

I am trying to access a metafield created with an app reserved namespace that is owned by a product using a theme app extension. So far I am not able to access the value stored in the metafield using liquid in the theme app extension.

GQL:

mutation UpdateProductMetafield($productInput:ProductUpdateInput!){
  productUpdate(product: $productInput){
    userErrors{
      field
      message
    }
  }
}
{
  "productInput": {
    "id": "gid://shopify/Product/12345",
    "metafields": {
      "namespace": "$app:bundle",
      "key": "components",
      "type": "json",
      "value": "{\"id\":\"gid://shopify/ProductVariant/12345\", \"static\":true}" 
    }
  }
}

Liquid: (does not work)

{{ product.metafields["$app:bundle"].components.value }}

I know the value is set as I am able to use GQL to show that the value is set on the product metafield.

Does anyone know how I can access this metafield using the theme app extension liquid?

Hi there @ChrisLL ;

You can use app.metafields

I have tried using {{ app.metafields[“$app:bundle”].components.value }} It does not show a value either. From what I have read this will show metafields attached to the current app installation and not a product. Although it is not working so I could be wrong.

After looking at your query it seems you are saving data in product metafields with namespace $app:bundle?

I have found a solution that allows the metafield to still be private but will show on the storefront. A metafield definitions needs to be created like so:

mutation{
  metafieldDefinitionCreate(definition: {
    namespace: "$app:bundle"
    key: "components"
    ownerType: PRODUCTVARIANT
    type: "json"
    name: "bundleComponents"
    access: {
      storefront: PUBLIC_READ
    }
  }){
    userErrors{
      code
      elementIndex
      field
      message
    }
  }
}

then the metafield can be referenced from the theme app extension using liquid:

{{ product.metafields["$app:bundle"].components.value }}
1 Like

I am facing the same issue , am unable to access product metadata fields on app theme extension. You are able to resolve it?

Did you turn on the “Storefront API access” option in metafield definition?

Works fine now thank you sean

1 Like