using product_reference metafield is not working properly on liquid

1 0 1

Screen Shot 2022-02-23 at 1.01.44 AM.pngScreen Shot 2022-02-23 at 1.00.49 AM.png
























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



as follow the document,

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


Can any body help about this issue ? 😢

Replies 2 (2)

Shopify Partner
2 0 1

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

Shopify Partner
158 32 96
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>
{% 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!
Check out Metafields Guru, the #1 ranked metafields app.

Bulk editor | Data import/export | Metafield sets | Browser extension