Hiding Metafield sections & blocks when they're empty

No video

Hiding Metafield sections & blocks when they're empty

Рет қаралды 3,731

Күн бұрын

A quick and easy way to conditionally show or hide sections & blocks based on if they have Metafield content, or if the Metafield is blank.
📢 STAY UPDATED
Subscribe to my newsletter: ed.codes/newsletter
KZfaq won’t always show you my latest videos, subscribe to be notified and see other content that I don't post on KZfaq.
🙏 SUPPORT THE CHANNEL ON PATREON
Request and vote on videos, get discounts, and be listed as a community member.
/ edcodes
📚 MY SHOPIFY CODING EBOOK
ed.codes/shopify-coding-handbook
Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify.
👨🏼‍💻 WHO AM I?
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
I'm a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.
Visit my website: ed.codes
Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:
ed.codes/community
🛠 CODE SHOP
ed.codes/shop
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.
👍 MY FAVOURITE APPS & THEMES
ed.codes/tools
⏭ CHAPTERS
00:00 Example #1 - Blocks
00:39 Example #2 - Sections
01:28 Solutions?
02:57 Sections vs Blocks
03:13 Hiding sections with CSS
06:38 Hiding a block with JS
13:34 Bug fix
15:12 Newsletter & Patreon
#Shopify #Metafields #CustomLiquid

Пікірлер: 40

@EdCodes 8 ай бұрын

❗Related video: How to do this without liquid, on any website - kzfaq.info/get/bejne/i5Z7bNhosq-lo6M.html

@saucydee1 2 ай бұрын

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!

@user-pe6gr3vq5l 22 күн бұрын

Thank you so much!

@jencarlson 6 ай бұрын

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

@_aisolo 6 ай бұрын

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

@MarceloDiament 2 ай бұрын

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.

@SanjitSutroDhor 9 ай бұрын

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.

@HairyNick 5 ай бұрын

Absolute life saver, thanks!

@Kotenbo 6 ай бұрын

Very helpfull and instructive content, thanks a lot

@olgagal8800 9 ай бұрын

🤗👍 Thank you Ed....

@johnsalimie7886 5 ай бұрын

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

@MarceloDiament 2 ай бұрын

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

@Human_Evolution- 9 ай бұрын

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 9 ай бұрын

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- 9 ай бұрын

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

@pedroalfaiate 9 ай бұрын

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 9 ай бұрын

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 9 ай бұрын

@@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.

@DavidCouillard 9 ай бұрын

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 9 ай бұрын

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?

@londelidess 4 ай бұрын

My sensei

@DaveTechover 2 ай бұрын

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?

@user-gs4jg1rs6n 9 ай бұрын

👌

@justame7638 5 ай бұрын

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.

@Klee87278 8 ай бұрын

I love u

@luiginica 9 ай бұрын

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 9 ай бұрын

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.

@Irfan-PineappleStudio 6 ай бұрын

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 6 ай бұрын

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

@mcpisik 9 ай бұрын

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

@mcneillshiner4718 7 ай бұрын

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

@saucydee1 2 ай бұрын

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 %}

@roaldschinkel1668 4 ай бұрын

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 %}

@user-wy7ud1go2s 6 ай бұрын

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 👍