Why isn't my metafield-controlled accordion appearing on my product page?

Solved

Why isn't my metafield-controlled accordion appearing on my product page?

Kochjar
Tourist
4 0 3

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. 🙂

Accepted Solution (1)

made4Uo
Shopify Partner
3840 716 1177

This is an 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 %}

 

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 2 (2)

made4Uo
Shopify Partner
3840 716 1177

This is an 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 %}

 

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Kochjar
Tourist
4 0 3

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