How can I correctly use reference metafields in my code?

Technical Q&A

Topic summary

Topic: Using Shopify reference metafields that return a GID (e.g., gid://shopify/OnlineStorePage/…) to access actual page data instead of the raw identifier.

Key update: The original issue was resolved by applying the metafield_tag filter to the reference metafield, which renders HTML for the referenced object (e.g., suitable for direct output).

General solution for data access (URL, handle, title):

Notes:

  • Metafield (reference): a field that stores a reference to another resource; here, an OnlineStorePage GID.
  • Page object: Liquid object exposing page properties (URL, title, handle); a documentation link was provided.

Open point: One participant asked where to add the code; placement guidance wasn’t answered directly.

Status: Resolved for the OP, with an additional, more general implementation pattern provided.

Summarized with AI on January 14. AI used: gpt-5.
1

Hi All

I am using new metafields. But it reurns the value like gid://shopify/OnlineStorePage/83483295905 instead of page information

I have used this {{product.metafields.my_fields.ref_page }}

Would someone know what would be the code to do that?

Thank you,

2

Issue is resolved use {{ product.metafields.my_fields.refrence_test | metafield_tag }} code

3

Hi , Can you tell me where to add the code please?

4

Writing a solve up for the more general case here where you have a metafield returning an OnlineStorePage gid. The above will return HTML, but if you want to simply access the URL, or the handle, or title, etc, do the following:

{{pages[product.metafields.my_fields.ref_page]}} (using the above example, replace the item inside the brackets with whatever yields the OnlineStorePage gid) will give you the Page Object, which you can use to do anything you would do with a page object.

ie. {{pages[product.metafields.my_fields.ref_page].title