Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
I'm looking to add product value proposition sections to my product pages (just a headline + text on one side and image on the other side). I can set all these 3 variables (headline, text & image) as metafields, but I'm struggling with hiding the sections if any of those metafields is empty (meaning I only want to make these sections appear on the product page in case I've actually added content into these metafields).
So the functionality I'm after is:
"If metafield X for a specific product is empty, hide section Y on this product's page"
I've tried achieving this with the following CSS in my theme CSS file:
{% if product.metafields.custom.example_metafield == blank %}
#example_product_page_section_123 {
display: none;
}
{% endif %}
Unfortunately this does not work for me - if I do it like this, the section is hidden on all product pages disregarding whether the particular product's metafield has a value or not.
How might I get it to work the way I need it to?
add the following condition
{% if product.metafields.custom.example_metafield != blank %}
write your code
{% endif %}
if it helpfull please select as a solution . if not work please inform me i will help you to solve . thanks
Thank you for the proposal. Unfortunately this isn't an option - it's not a custom html section, but a preset responsive section for my theme.
Check this url with discussion of emtpy fields in Shopify: https://github.com/Shopify/liquid/issues/223
Some people are using empty instead of blank and other use nil or just "". It seems to depend on if it string or not. I'm no expert, but I had to encase mine in style tags, but I wasn't looking for blank metafields. I was looking for a metafield that was set. Mine was like this:
{% if product.metafields.custom.example_metafield == example %}
<style>
#example_product_page_section_123 {
display: none;
}
</style>
{% endif %}