Solved

Want to store privateMetafields with Shopify resources and access them in liquid files

sagar_at_avyya
Shopify Partner
31 1 16

I want to store privateMetafields with Shopify resources and access them in liquid files!

I don't want to expose data to other apps or merchants so storing in metafields is not an option. But I can't seem to access privateMetafields from liquid templates,I read in the docs that

1. privateMetafields can't be accessed from liquid files

2. meta fields can be read/edited by accessed by merchants or other apps

Now, using meta fields to store dynamic data for Shopify resources is a security risk and privateMetafields can't be accessed from liquid so it kinda defeats the purpose! I would need to have an API call or something to get data into templates.

Any help would highly be appreciated.

Thank you very much.

 


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

Accepted Solution (1)
sagar_at_avyya
Shopify Partner
31 1 16

This is an accepted solution.

There could be one good solution to this issue: Use App owned Metafields

 

EFFECTIVE APRIL 01, 2022


As of GraphQL Admin API version 2022-04, a new owner type ApiPermission is now available for metafields. A metafield with this permission type will only be readable and writable by the app that owns the metafield.

 

The app metafields are actually on app installations (as one app can have many installations based on merchants). Now these are somewhat safer than putting data on shop owned public metafields. 

 

These are accessilbe in the liquid file with the `app` object. {{ app.metafelds.namespace.key}}

 

Step1: Get App installation id

 

query {
  currentAppInstallation {
    id
  }
}

 

 

Step 2: Use that id as owner id to save metafield(s)

 

mutation ($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      id
    }
    userErrors {
      code
      field
      message
    }
  }
}

 

 

with metafilds variable:

 

metafields = [
  {
    ownerId: appInstallationId,
    namespace: 'namespace',
    key: 'key',
    value: 'value',
    type: "single_line_text_field"
  }
]

 

 

Step 3: Use those metafields in liquid files

 

{{ app.metafieds.namespace.key }}

 

 

That's it. Try it out let us know how it went.


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

View solution in original post

Replies 28 (28)

axis80
Shopify Expert
23 1 9

I am running into this exact same issue.  I want to use the new Theme App Extensions so that customers can add my app blocks within the theme customizer.  I can pass the data to the theme extension's Liquid templates through public JSON metafields, however that is going to confuse storeowners when they see it.  I would much rather store it in private metafields so they don't have to see it, and so they can't mess things up by trying to edit it.

sagar_at_avyya
Shopify Partner
31 1 16

This is an accepted solution.

There could be one good solution to this issue: Use App owned Metafields

 

EFFECTIVE APRIL 01, 2022


As of GraphQL Admin API version 2022-04, a new owner type ApiPermission is now available for metafields. A metafield with this permission type will only be readable and writable by the app that owns the metafield.

 

The app metafields are actually on app installations (as one app can have many installations based on merchants). Now these are somewhat safer than putting data on shop owned public metafields. 

 

These are accessilbe in the liquid file with the `app` object. {{ app.metafelds.namespace.key}}

 

Step1: Get App installation id

 

query {
  currentAppInstallation {
    id
  }
}

 

 

Step 2: Use that id as owner id to save metafield(s)

 

mutation ($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      id
    }
    userErrors {
      code
      field
      message
    }
  }
}

 

 

with metafilds variable:

 

metafields = [
  {
    ownerId: appInstallationId,
    namespace: 'namespace',
    key: 'key',
    value: 'value',
    type: "single_line_text_field"
  }
]

 

 

Step 3: Use those metafields in liquid files

 

{{ app.metafieds.namespace.key }}

 

 

That's it. Try it out let us know how it went.


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

hashcode_io
Shopify Partner
105 3 10

@sagar_at_avyya   I am not able to get the app meta value {{ app.metafieds.namespace.key }}  I used same reference your code. not Error on theme code.

also i am not able to access those data into the theme app extension. 

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
sagar_at_avyya
Shopify Partner
31 1 16

Hello @hashcode_io !

 

Make sure you set the orwnerId to the `appInstallationId` (which is unique for every installation of the app). When you use the appInstallationId for the `ownerId` field of the metafield, the meta field is created for that specific installation and will be removed automatically when the app is uninstalled.

 

You can make sure if the meta field is created or not using the following query:

 

 

query($namespace: String!) {
  currentAppInstallation {
    metafields(first: 50, namespace: $namespace) {
      edges {
        node {
          id
          namespace
          key
          value
        }
      }
    }
  }
}

 

 

 

It works on my end seamlessly.


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

hashcode_io
Shopify Partner
105 3 10

@sagar_at_avyya   yes i can see the app meta was gql i will get meta value  but i want access into the  those data into the theme app extension. 

i have query on 

Step 3: Use those metafields in liquid files

 

{{ app.metafieds.namespace.key }}



https://community.shopify.com/c/shopify-apis-and-sdks/want-to-access-the-app-meta-field-to-the-theme...

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
sagar_at_avyya
Shopify Partner
31 1 16

@hashcode_io Great if you could get the meta field using the query above, that makes sure that we indeed created the meta field with this specific app installation. Now just access those metafields in the theme app extension with {{ app.metafields.namespace.key }} in the liquid file (You'll need to replace your namespace and key here).

 

If you still don't see that meta field in the theme app extension, one caveat I can think of is you are trying to access a JSON field, without the ".value" method. If this is the case, the best would be just set a metafeild to a string value and make sure you can access that in the theme app extension using the {{app.metafields.namespace.key}} 

 

When you are sure you can access the string metafield(s) then you can experiment with JSON fields.


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

hashcode_io
Shopify Partner
105 3 10

@sagar_at_avyya   my meta filed type is 

{
              "namespace": "xxxx_app_keys",
              "key": "xxx_api_key",
              "type": "single_line_text_field",
              "value": "aSxxxxxxxxxxxxxxxxxxxx==",
              "ownerId": "gid://shopify/AppInstallation/xxxxxxxxxxxx"
  }

theme app extension code to access that meta filed . 

<h1>  {{app.metafields.xxxx_app_keys.xxx_api_key }} </h1> 

 

i am not getting any error on theme app extension. 

 

 

 

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
sagar_at_avyya
Shopify Partner
31 1 16

@hashcode_io You are on the very right track. The above code you have mentioned works. Try debugging where else it might have been causing the issue.

 

Possible checks:

  1. Check API version, it has to be on or above 2022-04
  2. Make sure this is the same app installation
  3. Make sure you get that meta field using currentAppInstallation GraphQL query
  4. ... etc.


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution

hashcode_io
Shopify Partner
105 3 10

@sagar_at_avyya  Thanks lot for depth debug 

  1. Check API version, it has to be on or above 2022-04 - > gql "2022-07"
  2. Make sure this is the same app installation -> yes it was the same app in my store.  
  3. Make sure you get that meta field using currentAppInstallation GraphQL query  -> i will get that data using the gql query. 

    4  fixed the issue with publish extension.
@sagar_at_avyya   Thanks lots  your answer really help.
Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
rohan_5894
Shopify Partner
34 0 5

Hi Sanjay,

 

Could you please confirm if you were able to access the App Owned Metafields within the Theme Liquid Files as well?, They are coming blank for me. It looks like they can be accessed via App Theme Extensions only?

 

I would highly appreciate a help here.

Rohan Sharma
hashcode_io
Shopify Partner
105 3 10

@rohan_5894  yes you can access that meta filed into the theme liquid file. if you facing any Errors please share what you do still now write all the steps by step so I can guide you the right way.

my app meta filed value access on theme liquid file and also app extension code too.

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
rohan_5894
Shopify Partner
34 0 5

Hi @hashcode_io 

 

Thank you for the prompt response. Below are the steps i followed.

 

1. Created App Owned Meta Fields with GraphQL using Insomnia Client with OwnerID as AppInstallation ID. Attached is the screenshot for the same.

Screenshot 2022-11-30 at 12.38.20 PM.png

 

2. Added {{ app.metafields.axtrics.material }} in main-product.liquid within Dawn theme.

 

After checking in the respective page on frontend, It is coming blank.

 

 

Rohan Sharma
hashcode_io
Shopify Partner
105 3 10

@rohan_5894  

 

this is the correct code. 

   <h3> {{ app.metafields.axtrics.material.value| strip_html }} }}  </h3>

 

add into your theme file it was work.

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
rohan_5894
Shopify Partner
34 0 5

Thanks @hashcode_io 

 

Unfortunately this also didn't worked. Kindly check the screenshots for the same

 

Screenshot 2022-11-30 at 1.31.35 PM.png

 

Frontend:

Screenshot 2022-11-30 at 1.31.47 PM.png

 

I am not sure what could be the reason. I can confirm that the App is installed and i am testing on correct store.

Rohan Sharma
hashcode_io
Shopify Partner
105 3 10

@rohan_5894 I think you putting the wrong App "Ownerid"  please double check that. 

 

Share the code snippets of All steps you perform. I will check my end.

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
rohan_5894
Shopify Partner
34 0 5

Hi @hashcode_io 

 

I used the Staging App now on different store and still the same results, Below are the detailed steps I followed:

 

1. Get the AppInstallationID along with other info to confirm the correct App name.

Screenshot 2022-11-30 at 5.17.55 PM.png

 

2. Created the AppOwned Metafield using the above AppInstallationID as Owner ID.

Screenshot 2022-11-30 at 5.20.52 PM.png

 

3. Confirmed if Metafields are created by calling the relevant GraphQL.

Screenshot 2022-11-30 at 5.22.45 PM.png

 

4. Added the Code Snippet in theme.liquid just under Body tag

<h2>App =====> {{ app.metafields.axtrics.recipe.value }} </h2>

 

5. Visited frontend to confirm but it was blank.

 

Screenshot 2022-11-30 at 5.26.32 PM.png

 

 

Thanks Again

 

 

 

 

Rohan Sharma
hashcode_io
Shopify Partner
105 3 10

@rohan_5894  share the code i can copy past else you can try into the   https://shopify.dev/apps/tools/graphiql-admin-api  try this one run your code you will get the meta value.

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
rohan_5894
Shopify Partner
34 0 5

Hi @hashcode_io 

 

I have not written any code but used the GraphQL queries within Insomnia API Tool.

 

I am still sharing the GQL queries for your to check

 

1. Get App Installation ID

POST Request to https://yourshopname.myshopify.com/admin/api/2022-10/graphql.json

{
  app {
		id,
		title
		developerName
		installation{
			id
			activeSubscriptions{name}
			launchUrl
		}
  }
}

 

2. Create Metafields using InstallationID

POST Request to https://yourshopname.myshopify.com/admin/api/2022-10/graphql.json

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

Query Variables

{
	"metafields": [
		{
			"key": "recipe",
			"namespace": "axtrics",
			"ownerId": "gid://shopify/AppInstallation/YourID",
			"type": "single_line_text_field",
			"value": "This is the recipe"
		}
	]
}

 

3. Add below code to theme.liquid

{{ app.metafields.axtrics.recipe.value }}

 

Thanks Again

Rohan Sharma
rohan_5894
Shopify Partner
34 0 5

@hashcode_io 

 

I even installed the Shopify GraphiQL App on that same store and create the Metafields using the AppInstallationId for GraphQL App. The metafields again got created but not showing on frontend.

Below are the screenshots:

 

Screenshot 2022-12-01 at 11.58.04 AM.png

 

 

Screenshot 2022-12-01 at 11.58.58 AM.png

 

 

Screenshot 2022-12-01 at 11.59.32 AM.png

 

Very strange.

Rohan Sharma
hashcode_io
Shopify Partner
105 3 10

Hi @rohan_5894  

I am was able to create and get app-owned metafield  with code i got the app-owned metafield value into theme liquid file also.

 

when I try your code with Shopify graphql explore I was successfully able to read the field value but it was not shown on the storefront. so I think it was app access scopes not properly defiled on your app. 

i will suggest use any client library to perform this operation.  

# read the metafiled

query AppInstallationMetafield($namespace: String!, $key: String!, $ownerId: ID!) {
  appInstallation(id: $ownerId) {
    apiKey: metafield(namespace: $namespace, key: $key) {
      value
    }
  }
}

 

 

 

Sanjay_io_0-1669882106303.png

 

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
rohan_5894
Shopify Partner
34 0 5

Thank You @hashcode_io for your support.

 

I don't think it is an issue with App Scope because we were able to create Metafields using the same App Token. Anyways we have created tickets with Shopify to see if they can share some insights.

 

Thanks Again.

Rohan Sharma
rohan_5894
Shopify Partner
34 0 5

Okay, I have been finally been able to get the App Owned Metafields value at Storefront and I thought i should share the information with others as well.

 

Kindly note that you cannot access App Owned Metafield values directly at the Theme Liquid files.

You need to create App Block Extensions for your App and within thse extensions you can access the App Owned Metafield values. This makes sense as well because if these Metafields can be access at Liquid level then it violates the purpose of keeping App Owned data only to App Owners.

 

I hope this will be helpful for others.

Rohan Sharma
hashcode_io
Shopify Partner
105 3 10

@rohan_5894  Thanks for the update I was access the app meta direct into the theme liquid.  still Tuesday 04 October 2022 12∶21∶01 PM IST.

After that  we are not able to access into the  direct theme files. but yes using theme app extension work well. 


Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
edo888
Shopify Partner
19 1 7

@hashcode_io wrote:


4  fixed the issue with publish extension.

 

Can you provide more info about this comment?

 

Thanks!

hashcode_io
Shopify Partner
105 3 10

@edo888   what Error you getting  https://shopify.dev/apps/online-store/theme-app-extensions

follow this guide if it is still an Error gives me the complete information on what steps you doing.  i will help you

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
edo888
Shopify Partner
19 1 7

sercanov
Tourist
4 1 2

Same blocker, I also mentioned in https://community.shopify.com/c/shopify-apis-and-sdks/how-to-store-external-api-key-with-theme-exten...

I was happy with ScriptTag implementation. Online Store 2.0 and Theme Extensions isn't featured enough for my business logic, or I'm missing something for weeks.

sagar_at_avyya
Shopify Partner
31 1 16

There could be one good solution to this issue: Use App owned Metafields,  Wrote in detail in the thread.


Sagar @ Avyya - Modern Sales Booster
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution