Re: how to hide a collapsible row metafield when its blank

Solved

how to hide a collapsible row metafield when its blank

tarekanani
Shopify Partner
20 0 1

https://www.awakeningra.com/products/khnum?_pos=1&_psq=kh&_ss=e&_v=1.0 

 

I want to hide the collapsible row field "material powers" when its black for a product how could I do this ? 

Accepted Solution (1)
WalkYourStyle
Trailblazer
449 54 78

This is an accepted solution.

Instructions

1. Go to 'Online Store' -> Theme

2. In your Active Theme click on the 3 dots (...) -> Edit Code

3. In the Sections folder locate the file  'main-product.liquid' or similar. 

4. Find {%- when 'collapsible_tab' -%} 

5. Below the {%- when 'collapsible_tab' -%}  you will see something like this

{%- when 'collapsible_tab' -%}
  <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 | escape }}
          </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>

6. Surround everything in an if statement like this:

{%- when 'collapsible_tab' -%}
  {% if block.settings.content != blank or block.settings.page.content != blank %}
  <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 | escape }}
          </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 %}


This should work

View solution in original post

Replies 11 (11)

BSSCommerce-TA
Shopify Partner
124 24 24

@tarekanani Does every product on your site not have this field?

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
tarekanani
Shopify Partner
20 0 1

some of them has it and some doesn't contain any info for this one 

BSSCommerce-TA
Shopify Partner
124 24 24

@tarekanani Can you show me a product that has that part?

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
tarekanani
Shopify Partner
20 0 1

this product has no info for this metafield

WalkYourStyle
Trailblazer
449 54 78
tarekanani
Shopify Partner
20 0 1

does this work with any theme ? and I have a multi-word metafield "material powers" How could I contain this to the code ? 

WalkYourStyle
Trailblazer
449 54 78

This is an accepted solution.

Instructions

1. Go to 'Online Store' -> Theme

2. In your Active Theme click on the 3 dots (...) -> Edit Code

3. In the Sections folder locate the file  'main-product.liquid' or similar. 

4. Find {%- when 'collapsible_tab' -%} 

5. Below the {%- when 'collapsible_tab' -%}  you will see something like this

{%- when 'collapsible_tab' -%}
  <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 | escape }}
          </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>

6. Surround everything in an if statement like this:

{%- when 'collapsible_tab' -%}
  {% if block.settings.content != blank or block.settings.page.content != blank %}
  <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 | escape }}
          </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 %}


This should work

tarekanani
Shopify Partner
20 0 1

thanks this worked !

rachp528
Tourist
9 0 2

@WalkYourStyle I've tried this and I'm getting this errors, ideas? I added the following only, did I miss something or place in the wrong place?

 

{% if block.settings.content != blank or block.settings.page.content != blank %}

 

ss3.png

WalkYourStyle
Trailblazer
449 54 78

You forgot to close the if statement like this : {% endif %} at the end

rachp528
Tourist
9 0 2

Thank you!