Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Hide section when metafields are empty

Solved

Hide section when metafields are empty

lana-mukti
Tourist
5 0 1

 

I have added a text + image section onto the product page with content pulling from product metafields, but still setting the section heading via 'customise' in the theme editor. But when the metafields are blank, the heading still shows. how can I ensure the heading is also hidden when the metafields are blank?

Accepted Solution (1)

StoreWatchers
Trailblazer
205 30 37

This is an accepted solution.

Hi, @lana-mukti 

Greetings from the Store Watchers Support Team! Happy to help you today.

 

You can put this condition:

 

{% if product.metafields.namespace.key != blank %}
 // Put the heading tags within this condition
{% endif %}

 

 

Replace namespace with the actual namespace of the metafield and key with the key of the metafield. 

You can use this code snippet within the relevant section of your product page template to control the visibility of metafields based on their values. Repeat this code for each metafield you want to conditionally display.

Remember to adjust the code to match the structure and naming of your metafields.

 

Let me know If need further assistance

 

Regards,

Store Watchers Support Team

StoreWatchers - Automate testing for your Shopify store in seconds


If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs

View solution in original post

Replies 4 (4)

StoreWatchers
Trailblazer
205 30 37

This is an accepted solution.

Hi, @lana-mukti 

Greetings from the Store Watchers Support Team! Happy to help you today.

 

You can put this condition:

 

{% if product.metafields.namespace.key != blank %}
 // Put the heading tags within this condition
{% endif %}

 

 

Replace namespace with the actual namespace of the metafield and key with the key of the metafield. 

You can use this code snippet within the relevant section of your product page template to control the visibility of metafields based on their values. Repeat this code for each metafield you want to conditionally display.

Remember to adjust the code to match the structure and naming of your metafields.

 

Let me know If need further assistance

 

Regards,

Store Watchers Support Team

StoreWatchers - Automate testing for your Shopify store in seconds


If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs
Markas_Suika
Visitor
2 0 1

Hi, this is not the first thread I encounter, you tell the code but where to put it most of the people can't find, so do I. Can you specify where this code should ho?

jondiego
Tourist
9 0 1

It depends on how you are calling the metafield as well as how your theme is built. All you have to do is wrap your code with that condition to hide it if it's empty.

 

An example of how I use it in a liquid code section in my theme:

 

<div class="nutrition-data">
 {%- if product.metafields.custom.calories_per_serving != blank -%}
  <div class="nutrition-row">
   <span class="nutrition-title">Calories per Serving:</span>
   <span class="nutrition-data-value"> {{ product.metafields.custom.calories-per-serving }} 
   </span>
  </div>
 {%- endif -%}
</div>

 

This will not display the data unless the product has a value for that metafield.

jondiego
Tourist
9 0 1

Let me know if you still need help. If you provide a url and what you are trying to hide, it will be a lot easier for someone to give you detailed instructions.