Conditional rendering with metafields

[Kochjar]

I want to clarify, that I am new to meta fields, and so my question might be an easy one to answer but I hope you bear with me.

I've been working on adding a custom feature to my product pages using metafields and Liquid but have run into a roadblock. I created a custom metafield called "Accordion 1 Visibility" with namespace "custom" and key "accordion_1_visibility". The idea is to use this metafield to control the visibility of an accordion element on the product page, which can be set to 'true' or 'false' for each product.

The problem I'm facing is that even when the metafield value is set to 'true', the accordion is not appearing on the product page. Here's the Liquid code I'm using:

{% if product.metafields.custom.accordion_1_visibility == 'true' %}
          
  <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
    <details id="Details-{{ block.id }}-{{ section.id }}">
      <summary>
        <div class="summary__title">
          {% render 'icon-accordion', icon: block.settings.icon %}
          <h2 class="h4 accordion__title inline-richtext">
            {{ block.settings.heading | default: block.settings.page.title }}
          </h2>
        </div>
        {% render 'icon-caret' %}
      </summary>
      <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
        {{ block.settings.content }}
        {{ block.settings.page.content }}
      </div>
    </details>
  </div>

{% endif %}

I have verified that the metafield is correctly set to 'true' for the product I'm testing. The namespace and key are correct, and the code is in the correct template. I've also tried clearing my browser cache to no avail.

I also checked for Liquid syntax errors using the 'Check syntax' option in the code editor and found no issues.

Could you please assist me in troubleshooting this issue? I am unable to figure out why the accordion element is not appearing as expected when the metafield is set to 'true'.

Thanks in advance. 🙂

[made4Uo · Accepted solution]

Hi @Kochjar 

You can actually just replace the code like so below, if the value is true then it should show

{% if product.metafields.custom.accordion_1_visibility %}

[Kochjar]

Wow, I just realized that i wrote "true" with quotation marks instead of true.