How can I conditionally display a metafield in collapsible content?

Store Design
1

Hi,

I only want to display a metafield as part of collapsible-content if it has a value.

I am not sure how/where to place the If/Then/Else in the code below, was hoping someone could help.

TIA

“164732449085fa8a6a”: {
“type”: “collapsible-content”,
“blocks”: {
“16473244907fcd9243-1”: {
“type”: “collapsible_row”,
“settings”: {
“heading”: “Learning Outcomes”,
“icon”: “none”,
“row_content”: “

{{ product.metafields.my_fields.learning_outcomes | metafield_tag }}</p>”,
“page”: “”
}
},

1 Like
2

@Fionam

Welcome to the Shopify community!
Thanks for your good question.

For that you need a developer help or Hire a developer to achieve this.
Thank you.

1 Like
3

Hey @Fionam

Please take help of a developer who can help with your requirement.

Regards

4

If you are using the dawn theme, probably you want to update the code in the main-product.liquid file in the sections folder. Look for the code starting with {%- when ‘collapsible_tab’ -%}. Wrap the code after it in a div tag like this

That will hide the collapsible tab block if the metafield is empty. This will also hide any other collapsible tabs on the page, might not be what you want.

The code will look something like this:

{%- when 'collapsible_tab' -%}
2 Likes
5

Hi @Fionam ,

You may want to create a custom snippet file to contain your Liquid code with an extra conditional logic. Then you can simply render that snippet in the same spot you’re currently using to display the metafield content. So this part of the JSON scheme:

"row_content": "

{{ product.metafields.my_fields.learning_outcomes | metafield_tag }}<\/p>",

would be replaced with something like this:

"row_content": "{% render 'INSERT_THE_SNIPPET_NAME_HERE' %}",

However, if you’d like to display or hide the entire collapsible row based on the whether a product has that specific metafield or not, you may want to try out the solution suggested by @Alan15 .

6

Thanks so much for your time Alan.

I don’t want all collapsible tabs to be hidden. I have multiple collapsible tabs, each of which I would like to hide or display dependant on whether there is data contained in a metafield.

I was hoping I could just include the condition in the JSON scheme?

7

Hi FiKel,

I just found a usefull way to do this.

In {% schema %} in main-product.liquid :
1- Find “type”: “collapsible_tab”

2- After
“type”: “richtext”,
“id”: “content” …
add something like this :

{
  "type": "liquid",
  "id": "content_liquid",
  "label": "or Custom liquid",
  "info": "Developper only"
},​

3- Then in the HTML content, find

{%- when ‘collapsible_tab’ -%}, and under

you can use something like this :

{{ block.settings.content }}
{{ block.settings.content_liquid }}
{{ block.settings.page.content }}

4- Now go on your Theme editor and insert your liquid code directly with conditions regarding each product metafields.

It’s the better way I found to do it. Hope it helps.
Can’t find how to put condition on each product metafields at once, knowing that here we must also specify “if content contains a metafield”.

Best,
Audrey - Studio Boskant

8

Hi Fionam,

In case this is still relevant, you could do the following: just add an if statement in the liquid code within main-product.liquid right under the “{%- when ‘collapsible_tab’ -%}”:

{%- if block.settings.content != blank -%}

And close it after the with:

{%- endif -%}

That should do the trick and only displays the dropdown if there is a value available in the metafield.

Best

Fabian

2 Likes
9

That method worked for me. Thank you very much :slightly_smiling_face: