Cart metafield is empty on checkout ui extension

Extensions
1

I created cart metafield using,

fetch('/api/unstable/graphql.json', {
  method: 'post',
  headers: {
    'conent-type': 'application/json',
    'x-shopify-storefront-access-token': 'hidden'
  },
  body: JSON.stringify({
    query: `
    	mutation cartMetafieldsSet {
  			cartMetafieldsSet(metafields: [
                {
                    ownerId: "gid://shopify/Cart/cart-token-with-key",
                    key: "your-key",
                    value: "your-value",
                    type: "single_line_text_field"
                 }
  			]) {
    		       metafields {
      			     id
      			     namespace
    			   }
    			   userErrors {
      			     field
      			     message
    			   }
  			    }
			}
    `
  })
})

metafield declaration in shopify.extension.toml

[[extensions.metafields]]
namespace = "$app"
key = "your-key"

my Checkout.tsx

const metafields = useAppMetafields({
  namespace: '$app',
  key: 'your-key',
  type: 'cart'
})

And this returning empty array. I am using 2025-07 checkout ui version. Anything am I doing wrong? or cart metafield is just not available?

2

Hi @abid_hasan,

If you wish to make changes to cart metafields at checkout, I recommend doing that directly through the Checkout UI Extension instead of using the Storefront API as it’s much faster and efficient that way.

Here is the documentation on setting and reading cart metafields with Checkout UI Extensions:

If you prefer to use the Storefront API, you will find the correct syntax in the access examples in this documentation:

Let me know how you go :slight_smile: