Hiding Metafield sections & blocks when they're empty

[@EdCodes]

❗Related video: How to do this without liquid, on any website - kzbin.info/www/bejne/i2Guaqhtgq50qdE

[@jonathanliddle518]

This is mega! This has fixed an issue with a template in shopify I am working with to hide blank content on product pages. Thanks!

[@saucydee1]

I found your videos yesterday. I have little to no coding knowledge but you explain things in a way that I can start to understand it. I'm not about to start writing my own code but I'm beginning to understand the components. Thank you!

[@jencarlson]

Awesome! This was the only solution that worked. You are amazing!

[@_aisolo]

This is awesome! Just the tutorial I needed! Def subbing!

[@gee-ecom]

Perfectly explained, thank you!

[@Alicja5891]

you are genius! :) thanks

[@SanjitSutroDhor]

Awesome tutorial Ed. I'm new to shopify and learning. Your Videos are helping me a lot. I want to request you please make a tutorial on how we can create custom section where client will be able to change content of the section.

[@johnsalimie7886]

this solution didnt work on mobile .. desktop was flawless thank you

[@MarceloDiament]

There might be 2 IDs, one for desktop and the other one for the mobile device.

[@Kotenbo]

Very helpfull and instructive content, thanks a lot

[@DavidCouillard]

Keep sharing those small tips Ed! Love them! I don’t think this javascript trick would work with a multi-language website right? Since, in this case, the word « ingredients » would change based on the visitors language.

[@EdCodes]

It depends on the theme. Upon inspecting the code, there might be something else you can use - maybe the original language word is visible in the code, maybe it is added to a class name or ID, or maybe you can use the nth-child to target an accordion with specific order as @pedroalfaiate suggests in his comment.

[@irisbrugts7936]

This works for me, when I code it. But when I view my code later, sometimes the section has a slightly different id, and then it is no longer hidden. What can one do about this?

[@Human_Evolution-]

Great stuff. If someone is not using a git repo, this is the best. I have not used custom code blocks yet, might be fun for stores that do not want to invest a lot of time.

[@EdCodes]

For professional developers there are better ways to get this done. But I love the possibilities custom liquid blocks open up for amateur coders.

[@Human_Evolution-]

Yes and for sites that only need a small amount of custom code. I had a project last month that only had 1 custom feature asked from the store owner, we ended up not doing it because he did not want to create a GitHub repo, but I might have been able to use this little custom code blocks. Thanks @@EdCodes

[@DaveTechover]

Hi Ed! Is it possible to add the functionality of using a Dynic source on a part of a section that doesn't? For example, a section with a video. I want to connect a dynamic source to the video URL settings but it doesn't have the option to connect a dynamic source. Is there a way around that?

[@pedroalfaiate]

Really nice tutorial Ed. Never thought about this possible solution. Thanks for that. By the way, on the second case you might be able to use CSS instead of Javascript. It is possible to apply style to an specific element inside another (the first, the second, the third...) by using something like this :nth-child(2), :nth-child(3) { display:none; } Anyway is just another potential solution instead of using javascript. Once again, thanks for the anwsome tutorial.

[@EdCodes]

I wouldn't like to use nth-child because if they reorder the accordions then this will break and the wrong accordion will be hidden. They might forget about the code by then and not understand what is happening. Another option is new css selectors like :has and :empty but browser support is not great and I didn't want to get too experimental. In a real project I would try harder to avoid JS but for the video I wanted to demo a js solution too. Thanks for the thoughtful comment!

[@pedroalfaiate]

@@EdCodes makes perfect sense. It is good that you showed both examples. The viewers now can use whatever suits them better. By the way, glad to see you back on youtube.

[@saucydee1]

I've tried this a few times. It isn't hiding the empty accordion. I added this code. When I add TEST123 after the first IF condition, and it shows that. But it isn't hiding the empty accordion. Can you see what the issue is? {% if product.metafields.custom.video == blank %} // Select all elements with the class .accordian__title document.querySelectorAll('.accordian__title').forEach(title => { // Check if the text content includes "Video" if (title.textContent.includes('Video')) { // Hide the parent element with the class .product__accordian const parent = title.closest('.product__accordian'); if (parent) { parent.style.display = 'none'; } } }); {% endif %}

[@qayotiq]

Off topic. How can I update my theme without loosing any code? Im using dawn 12, but now theres dawn 13.01. I have so much coding style its dawn on steriods, and do not want ot loose anything.

[@HairyNick]

Absolute life saver, thanks!

[@luiginica]

Thank you! Can't we do something using some condition like "if body of the accordion is empty" then delete it? This would solve the problem for all the empty accordions. This way, we don't have to look for the title of the accordion and we don't have to take care of each accordion. Problem is that I don't know how to check for empty body in an accordion nor if this is even possible. Just an idea.

[@EdCodes]

Yeah, if you're using javascript then you could probably check if an accordion is empty... although that might be messy. I'd rather just target the specific accordion if possible. There are lots of ways you could do it with javascript, this was just an example. But as I mentioned in another comment, javascript should be a last resort. CSS is much safer and easier.

[@mcpisik]

My custom theme has blocks Custom Html & Custom image, but not Custom liquid?

[@mcneillshiner4718]

It might work in custom HTML. Our custom theme has a "custom content" block that only mentions HTML, but does also support Liquid and JS

[@user-uk4de6zr2g]

Thank you so much!

[@olgagal8800]

🤗👍 Thank you Ed....

[@MarceloDiament]

You could also get the ingredients title through metafields and choose not to bring the title to the legging. Once you have no title neither ingredients, the block won't appear.

[@londelidess]

My sensei

[@roaldschinkel1668]

Hi, I want to hide a d-flex element. Can you please help me with that? When I put in this code in the liquid element nothing happens unfortunatly: {% if collection.metafields.custom.collectie_afbeelding_1 == blank %} .d-flex { display: none; } {% endif %}

[@Irfan-PineappleStudio]

Thanks ad , I have a question related to your video , supposed I have "watch now video" collapsible row instead of "ingredients" and if I put meta field value for a product then show it other wise hide it , as you told in this video

[@davidgoult8694]

Hi I believe you would just need to follow the video and were the JavaScript targets title ingredients put your “watch now video “ title.

[@BrendanZuza-q8k]

👌

[@Klee87278]

I love u

[@MattBullen-u4o]

Hi Ed, im doing it to my broadcast theme, its hiding the custom content section but its still hiding for all products even though the metafiels iv states in the {%if collection.metafield.XXXX%} has a value in in it. this is the code im using: {%if collection.metafields.custom.custom.product_page_featured_image_1 ==blank %} #BrickSection--template--17166480474364__imgtxt {display:none;} {%endif%}

[@redzeppelinuk]

Not sure if you fixed this, but I had the same when adding the code this morning, but changing the code from 'collection.metafields' to 'product.metafields' fixed it for me. I guess it depends how / where you've added the metafield, but I caught it after comparing the code with another custom liquid block in the same template for hiding videos when not present - another of Ed's fixes 👍

[@GSrinivas08]

This worked as I used product metafields {% unless product.metafields.custom.ingredients %} div[data-id="ingredients"] { display: none; } {% endunless %}

[@TnSkillers]

Thank you so much!