How to display Collection field A on Product page when Collection field B has value?

[hockey2112]

I have a Collection metafield called "Top Level". It is a single-value text field, and it has one pre-filled option called "yes".

If a Collection has "yes" selected for this metafield, then I need to display the Collection's Title and Image on the Product page that has that Collection selected. If a Collection does NOT have "yes" selected, then that Collection's data should NOT be displayed on the product page. In other words, if "Ranch Dip" product is in the Dips collection, and the Dips collection has "yes" selected for the "Top Level" collection metafield, I need the Dips title and image to be displayed on the Ranch Dip product page.

This code successfully displays the metafield and title:

<div id="productcategory" class="productblock">
     {% for p_col in product.collections %}
       <a href="{{ p_col.url }}">{{ p_col.title }}</a>
       <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
       {{ p_col.metafields.custom.top_level }}
     {% endfor %}
</div> 

But this code will also display the title and image for each collection the product is associated with, whether or not the "Top Level" field value is yes or blank.

=================

This code completely hides the metafield and title on the product page; I was expecting it to check for "blank" value in the "Top Level" field and return the "Top Level" collection's title and image:

{% if p_col.metafields.custom.top_level != blank %}
<div id="productcategory" class="productblock">
     {% for p_col in product.collections %}
       <a href="{{ p_col.url }}">{{ p_col.title }}</a>
       <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
       {{ p_col.metafields.custom.top_level }}
     {% endfor %}
</div> 
{%- endif -%} 

The code below also didn't work. I was expecting it to match up with a value of "yes" for the Top Level field, and thus display the title and image field contents; it does not work, and nothing is displayed.

{% if p_col.metafields.custom.top_level == "yes" %}
<div id="productcategory" class="productblock">
     {% for p_col in product.collections %}
       <a href="{{ p_col.url }}">{{ p_col.title }}</a>
       <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
       {{ p_col.metafields.custom.top_level }}
     {% endfor %}
</div> 
{%- endif -%} 

How can I accomplish the output I described above?

[hockey2112 · Accepted solution]

The last thing I had to do was to move the "for" statement outside of the "if" statement. It is now returning the value I need.

{% for collection in product.collections %}
  {% if collection.metafields.custom.top_level.value == "yes" %}
  <div id="productcategory" class="productblock">
      <div class="productcategory">
        <div class="productcategory-image"><a href="{{ collection.url }}"><img src="{{ collection.image | image_url }}"></a></div>
        <div class="productcategory-title"><a href="{{ collection.url }}">{{ collection.title }}</a></div>
      </div>
  </div>
  {%- endif -%}
{% endfor %}