Question 11621 in Shopify Question posted in
The Shopify help center can be found here.

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

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">
  <h2>product category image goes here...</h2>
    {% 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @Onkar got me most of the way there. 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 %}

  2. 0

    You need to check the value of meta-fields and code is like this sample code

    {% if p_col.metafields.custom.top_level.value == "yes" %}
<div id="productcategory" class="productblock">
  <h2>product category image goes here...</h2>
    {% 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 -%}

    You can check more about the metafields here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search