Theme app extension access app metafiels attached to products

Shopify Apps
1

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?

2

Hi there @ChrisLL ;

You can use app.metafields

3

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.

4

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

5

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