Displaying Metafields in front end

[IOANNARITSONI]

I want to have recipe blogs on my site and I want each recipe to have the products that I used from my shop.

i made a meta field in blog posts of type product list

Im trying to add it in the template of my blog posts with liquid but the product list doesn't seem to get rendered 

I added this in main-article.liquid

   {% if article.metafields.custom.ingredients %}
  <div class="ingredients">
    <h3>Ingredients</h3>
    <ul>
      {% for product_id in article.metafields.custom.ingredients %}
        {% assign product_id_cleaned = product_id | remove: "gid://shopify/Product/" %}
        {% assign product = all_products[product_id_cleaned] %}
        {% if product %}
          <li>
            <a href="{{ product.url }}">{{ product.title }}</a>
          </li>
        {% else %}
          <li>Product not found</li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% else %}
  <p>No ingredients metafield found for this article.</p>
{% endif %}

All it shows in the front end is "Ingredients" and an empty list 

Where am I going wrong?

[Guleria · Accepted solution]

Try this

   {% if article.metafields.custom.ingredients %}
  <div class="ingredients">
    <h3>Ingredients</h3>
    <ul>
{% assign list_metafield = article.metafields.custom.ingredients.value %}
      {% for item in list_metafield  %}
         
          <li>
            <a href="{{ item.url }}">{{ item.title }}</a>
          </li> 
      {% endfor %}
    </ul>
  </div>
{% else %}
  <p>No ingredients metafield found for this article.</p>
{% endif %}

[IOANNARITSONI]

this worked thank you!

[PageFly-Amelia]

Hello @IOANNARITSONI 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try 

 {% if article.metafields.custom.ingredients %}
  <div class="ingredients">
    <h3>Ingredients</h3>
    <ul>
{% assign list_metafield = article.metafields.custom.ingredients.value %}
      {% for item in list_metafield  %}
          <li>
            <a href="{{ item.url }}">{{ item.title }}</a>
          </li> 
      {% endfor %}
    </ul>
  </div>
{% else %}
  <p>No ingredients metafield found for this article.</p>
{% endif %}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly