using product_reference metafield is not working properly on liquid

[novelview9]

I've already custom metafield on the product and set it up as a product_reference,

so when I use  <p>{{ product.metafields.my_fields.new_product}}</p>, it return string

gid://shopify/Product/7223085072540

as follow the document,https://shopify.dev/api/liquid/objects/metafield

{{ product.metafields.my_fields.new_product.value}} should return product object, but its not, it return noting

Can any body help about this issue ? 😢

[tjames]

I've been trying to diagnose the same issue for a couple hours now.

[MetafieldsGuru]

Hi there,

The thing is that the payload returned by this code appears to be an entire product object. Obviously, Liquid can’t convert an object into a valid HTML element to be displayed on the storefront. You may want to retrieve more details from that object and combine them with proper HTML code to make things work. 

I tried using a code similar to yours on my dev store and got the exact same message:

So I decided to improve this code and managed to make it work, here is the result:

The initial version of my code (technically, it's pretty much the same code you've shared, but with different namespace and key) looked like this:

{{ product.metafields.my_fields.product.value }}

and there is the updated version:

{% assign related_product = product.metafields.my_fields.product.value %}
{% if related_product != blank %} 
 <a href = "{{shop.url | append: "/products/" | append: related_product.handle }}">
  <div class = "related-product">
    <div class = "related-product-image" style="background-image:url('{{related_product.featured_image |img_url}}')"> </div>
    <div class = "related-product-name">{{related_product.title}}</div>
    <div class = "related-product-price">{{related_product.price | money}}</div>
  </div>
 </a>
{% endif %}

It's just a quickly made draft code, but I think that it might be helpful. Don't forget to change the namespace/key combination and feel free to use my code for creating a solution for your stores!