Conversations about creating, managing, and using metafields to store and retrieve custom data for apps and themes.
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?
Solved! Go to the solution
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
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
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?
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.
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.