Show Only Filled Collapsible Rows on Product Page

Store Design
, , , ,
1

Hi, I have 4 collapsible rows set up using metafields on my product page. Some products have content for all 4, others only have 2 or 3.

How can I make it so only the rows with content show, and empty ones stay hidden?

I’m using the Hyper Garace theme. Thanks!

2

Hello @ma-ruhh026 ,

Please share the URL.

Regards
Guleria

3

@ma-ruhh026 , hey, thanks for posting here.
Can you please share the link so we can inspect it? thanks

4

If now they are still displayed if they are not filled with anything, then you need to change the theme. By adding a check like this:

{%- when ‘collapsible_tab’ -%}
{% if block.settings.content != blank %}
.. default content
{% endif %}

this is an approximate code, maybe the names will be different, but in general you need to know the code of this block, it starts with {%- when ‘block name’ -%} in product.liquid or something like that.
and wrap everything in a condition that will not display this block if there is no text

5

Hey! @ma-ruhh026 ,

To show only the collapsible rows that have content (and hide the empty ones), you can wrap each collapsible block in a conditional check using Liquid. Here’s how you can do it for each metafield:

{% if product.metafields.custom.row1 != blank %}
  
  
    #### Row Title 1
    {{ product.metafields.custom.row1 }}

  

{% endif %}

{% if product.metafields.custom.row2 != blank %}
  
  
    #### Row Title 2
    {{ product.metafields.custom.row2 }}

  

{% endif %}

{% if product.metafields.custom.row3 != blank %}
  
  
    #### Row Title 3
    {{ product.metafields.custom.row3 }}

  

{% endif %}

{% if product.metafields.custom.row4 != blank %}
  
  
    #### Row Title 4
    {{ product.metafields.custom.row4 }}

  

{% endif %}
6

Hi @ma-ruhh026 :waving_hand: This is an advanced theme customization because it requires modifying the code.

Basically you’d have to find where it’s output and add some conditions to check if there is content or not.

Another approach is to create alternate template that only have the set amount of collapsible rows so none will be empty,

https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates#create-a-new-template

Advanced is using shopify-flow or other automation tool to swap the templates if data is added or removed needing more rows.

If you need this customization setup then contact me for services.
Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.