Ed, you're a genius! Thank you! Because of THIS tutorial, and your introduction to metafields video, I was able to add an intelligent button that linked back to my home site where people can gain further knowledge of the product before buying. The button is dynamic, and intelligent, such that if there is no page for that button to link to for further information the button does not show. YOU, made that all possible. Thank you for your amazing videos!
Hey Kurt, that's awesome! You're very welcome, I love to see people using my tutorials on their store. It would also be great to see it in action so if you don't mind please share your website URL. If there is anything else I can help you with let me know.
One of the best liquid tutorial ive seen so far ( im a shopify partner since 5 years) and this really really helped me out… i will be a buyer of your course… its easy and understandable… i dont code i only know some javascript, html and css… but with metafields there is a lot to do even if i dont want to be a OG
Great videos! You have perfectly responded two of my main problems today with your channel. Super helpful and to the point, thank you very much! Can't wait for your course on coding too. 🙌
Exactly what I needed, thanks so much! By the way, as of June 2024 the metafield "namespace and key" is now located inside the specific metafield details screen under the grayed out "namespace and key" section, they're no longer visible from the general list of metafields. Cheers.
Do you have any tips as to the custom CSS, or custom liquid, we can use to display metafield lists horizontally, as opposed to vertically? I'd like to use one of the metafields I use for my filtering system, under the buy now button, listing benefits of the product and what skin type it's suitable for. The metafield is a listed one, and the values display as a bullet point list. Which looks sleek in the collapsible accordion where I display 'Active ingredients'- but, it looks super clonky when it's outside of it. I can't find custom CSS for how to display the metafield lists anywhere. Thank you for all your videos, you rock!
Hi ed. Its very useful. I use a metafield in a collapsible tab. Is it possible to use if statement to show or hide collapsible tab itself if it does not have metafield. thanks
Is there any way to have variant-specific information on the Product Detail Page? Let's say I have a variant called Size and it has 3 options, Large, Medium, and Small. Now what I want to show is a piece of text snippet depending on which options I'm currently selecting. Each text snippet is different and which one will be visible will depend on which option is currently selected. Is there any way I can set the variant's options metafield like this? Thanks in advance.
Thanks so much for helping with the understanding of how to be able to use liquid. One of the most frustrating issues I was having was with HTML alignment for some of my sections in the product pages since the metafields don't offer all the rich text/embed-able tools that Shopify's Product Description offers. This is such a great workaround for making those HTML customizations! I'm moving on to how to embed YT videos in their own section. Hooray all my layout problems have been fixed.👽🤖
Is there a way to get metafields to print out on the packing slips? I have a metafield for personaliztion but I can't get it to print out or to see what was entered in the metafield. Thanks!
Hi Ed, your tutorial are very cool and clear. About adding file in the Theme, how we use the metafield to add automatically. what kind of bloc should we add ? thanks
Great video! Now to thinking what else can be done with Metafields within these Custom Liquid sections. If you have any examples for simple CRO tips, please share 🙏
Can we add a colour tab/button in the theme using custom liquid? Can you please guide how we can add product colour field. (only for single product, no variant needed)
How to show a different image for the related product: featured_image just gets you the first product image. If you want to use the second or any other image, you can replace .featured_image with .images[1] or .images[2] or whatever number. Note the count starts from 0 so images[0] gets the first image The full line for the second image would be like so: {{ product.metafields.suggestions.related_product.value.images[1] | img_url: ‘300x' }}
Hi Ed! Your instruction has made understanding metafields MUCH easier to understand and use! Thank you! I do have one question as I do not have the Custom Liquid option with my theme, Expanse. Is it that you added that functionality through your magical developer skills, or is that Expanse does not have it?
Hi Kurt, no I didn't add the liquid section myself - Dawn and most 2.0 themes have it by default. I've never used Expanse but yeah it might be that it does not have it. It's pretty easy to add though... I can make a tutorial if you're keen to DIY.
Yeah I do actually, watch either the SKU video - th-cam.com/video/PyNZ3h9N8DQ/w-d-xo.html - or the variant inventory video - th-cam.com/video/WMdYdvrFQ1s/w-d-xo.html - they both use the same method which is exactly what you are describing, and you can use it on any variant property (including metafields). Instead of variant.sku you would output something like variant.metafield.your-namespace.your-key
To include a size chart on your product page? It's possible but you will need some basic-intermediate HTML and CSS skills to format it nicely. The easiest way would probably be to include your size charts as a single image if possible.
Thanks for the great video! Regarding the Related Product image, I found that if I don't choose the related product for metafields, it will show a "No image" icon, how to avoid it? Or I have to choose the "related product" for every product list? Thank you!
Hi, yes this is something I forgot to mention but you should also wrap that code in an IF statement so that it doesn't show up when there is no related product. Something like this - {% if product.metafields.suggestions.related_product %} {% endif %}
Thanks for the video. One question, how can I show list of values for 1 metafield? When I try to insert in a custom block, it won't show up (it does if the metafield is not a list). Thanks
I'm not sure about your exact situation. There is a new option to make a metafield a list of values - are you using this? If you just output {{ product.metafields.namespace.key }} then it should at least output the whole array like ["Blue", "Yellow"]. Or are they just comma-separated words? Then you need to first use the split filter. This might help too - www.shopify.com/partners/shopify-cheat-sheet
Thank you for explaining Metafields and what to do with them so well, I'm hooked on creating them. I have a related product one like you created in this video. But now I have a question the 300x was a bit to small for desktop so I up-ed it to 500x, but that was to large for mobile, so is it possible to make it flexible in the code?
When you say too large for mobile, do you mean that it is going out of bounds of the column? You can use style="max-width: 100%;" inside the tag to keep it inside. e.g. It its just visually too large, you should use CSS in a separate block to make a media query. You need to also add a class to the so you can target it with CSS. .related-product {max-width: 100%;} @media (max-width: 768px) { .related-product {width: 300px;} } I hope that makes sense. It's a bit too much to explain in a comment - I will make some videos on basic CSS and classes soon, that will give you the skills to do things like this.
@@EdCodes And again the perfect solution for my problem!!! was with your code ending in: | img_url: '500x'}}" style="max-width: 100%;"> I had tried something similar but obviously not the right code as it didn't do the trick. Thank you very very much!
I'm wondering when working with Reference fields if you can incorporate an add to cart function to the related products so you don't have to click and go to that product page. You can add it (and others possibly) from that area of the primary product page without leaving. Any idea on that?
It's possible, but probably too complicated to be made into a tutorial video. You would be editing the theme code and it would be different for every theme. For an easy solution - there are apps that do this.
@@EdCodes True, I try to avoid apps as much as possible to reduce load times and lags. I just didn't know if you knew of a quick way to make that happen with metafields. I can build something out for that section. Thank you for the quick response and the great vid!
Is there a way to add costume video to metafields? In a way that i can change the video for each product through inserting the video link to metafields value in the product page.
Yeah, there is. I can make a video about it. Do you mind telling me - is there any reason you prefer to do this instead of just adding the video as product media (where you add product images)?
@@EdCodes hi, I'm using the dawn theme that has the option to add separate videos to the product page, but not changeable from product to product. so first, and most important, - my shop offers tactical solutions for medic and rescue teams, and we need order.. :-) photos is one thing and video is something else. and in a practical note, on first view for new costumers, they not always braws the media, spacialy in mobiles. they see the main photo and move on. if the video is separated, highly chances they will see it. I uploaded videos to Shopify files and to youtube. and if I can add the link of the specific product video to meta fields in the product page it will be amazing. second - I want to use a design app for Shopify that allows 1 general page design for all the products. I cant add a video to the design because I want them to change according to the products. with meta fields, I can do that. I believe I'm not unique with this need. hope you will find it interesting enough to make a video for it. On the same note.. it will be great to understand how to make a video page that contains all of the product intro videos. can be a great way to introduce products to clients. people love good short videos and if the videos are any good, and they played automatically one after the other, they will stay to watch more and more products. thanks for your patience and your replays.
Thanks for sharing. This is probably an obvious question, but do we need to add IF CONDITION to related products to prevent images from appearing on multiple product pages? Also, do you have a tutorial on Metafields + JSON? Thx!
Yes exactly, that's a good point I forgot to mention - wrap your related product snippet in an {% if product.metafields.suggestions.related_product %} to check that its not empty. Thanks for pointing that out. Regarding JSON - do you mean the json data type metafield? Or something else? I haven't encountered a lot of use cases for the json metafield yet. If you have a good example of where you would use it, let me know! I would gladly make a video on it.
Hi, thank you for the great video. Hiding the unused metafields works great. The recommended products also work very well. Is it possible to display the recommended products in a 4 column grid under the product information section? For example like in the featured category section. I could not figure out how to display 4 custom liquid blocks in a row. Your plan with the video courses for store owners is great and unique. I am on it. Thank you.
Hey it's great to see you here again! Yeah there is a lot of interest in this related products thing so I'm going to make another video where I will go more in-depth on it. Multiple recommended products in a grid is going to be more complex so it's something I would build as a completely new type of block. We will be editing theme template code. Expect this in the next week or so. Maybe I will also provide a downloadable code snippet for this + options like grid, slider, second image on hover etc... Thanks for the feedback regarding the course!
@@EdCodes Hi, thanks for the quick feedback. I am already looking forward to the video. You are doing a really great job in explaining and documenting the code. Thank you.
Yeah you definitely can do math in this. Check out the math filters in Liquid - shopify.dev/docs/api/liquid/filters/math-filters Output your price using {{ product.price }} and then use pipe | to apply any filters for your maths e.g. Unit Price: {{ product.price | divided_by: 50 }}
Need a more advanced Related Products block? I've got you. Check out my Gumroad for pre-built code snippets - edcodes.gumroad.com/
Ed, you're a genius! Thank you! Because of THIS tutorial, and your introduction to metafields video, I was able to add an intelligent button that linked back to my home site where people can gain further knowledge of the product before buying. The button is dynamic, and intelligent, such that if there is no page for that button to link to for further information the button does not show. YOU, made that all possible. Thank you for your amazing videos!
Hey Kurt, that's awesome! You're very welcome, I love to see people using my tutorials on their store. It would also be great to see it in action so if you don't mind please share your website URL. If there is anything else I can help you with let me know.
Best teaching style on shopify development! Already purchased his brief summary course, and I like this as well.
Really looking forward to the course. I have looked everywhere for something similar without success! Great video. Thanks!
Great to hear there is interest in this sort of thing, I really wasn't sure. Thanks so much for the feedback!
One of the best liquid tutorial ive seen so far ( im a shopify partner since 5 years) and this really really helped me out… i will be a buyer of your course… its easy and understandable… i dont code i only know some javascript, html and css… but with metafields there is a lot to do even if i dont want to be a OG
THANK YOU SO MUCH !! Thanks for the tutorial and the code on your website!!
Great videos! You have perfectly responded two of my main problems today with your channel. Super helpful and to the point, thank you very much! Can't wait for your course on coding too. 🙌
thank you for this class, Ed... it opened my eyes to all possibilities
Thank you for this tutorials. They're great! Is it possible to know how I can add a metafield in a notification email? Thanks
Bruh you’re the Truth 💚 God bless you for this outformation
Fabulous help! Thanks Ed
Great Videos Ed. Thanks for the help.
Learn to BULK EDIT Metafields on 100's of products - th-cam.com/video/n-JnSDrDt-4/w-d-xo.html
Extremely helpful! There are some good upsell/cross-sell apps out there, but I just wanted something simple. Thank you!
Thanks for this! This is very helpful!
Exactly what I needed, thanks so much! By the way, as of June 2024 the metafield "namespace and key" is now located inside the specific metafield details screen under the grayed out "namespace and key" section, they're no longer visible from the general list of metafields. Cheers.
Hi Ed, thanks for the tutorial. Is there a way to add the custom liquid code ina collapsible row?
Thank you for this detailed video, how can I select custom size option if customer choose custom option in variant picker
Very helpful! Thank you so much.
Hello again! Is it possible to use this liquid code when we want to feature a product list metafield?
Do you have any tips as to the custom CSS, or custom liquid, we can use to display metafield lists horizontally, as opposed to vertically? I'd like to use one of the metafields I use for my filtering system, under the buy now button, listing benefits of the product and what skin type it's suitable for. The metafield is a listed one, and the values display as a bullet point list. Which looks sleek in the collapsible accordion where I display 'Active ingredients'- but, it looks super clonky when it's outside of it. I can't find custom CSS for how to display the metafield lists anywhere.
Thank you for all your videos, you rock!
Thank for sharing,is it possible the metafield can do ask a question and pop up and link the product they what to know about?
A pop up is complex to build and metafield doesnt help that much. Popup tutorial coming soon!
Looking forward to that course as well. Just subscribed
WOW IT'S LIKE MAGIC , THANKS VERY MUCH
OMG super helpful. Thank you.
Hi ed. Its very useful. I use a metafield in a collapsible tab. Is it possible to use if statement to show or hide collapsible tab itself if it does not have metafield. thanks
goat thumbnail. keep it up
Is there any way to have variant-specific information on the Product Detail Page?
Let's say I have a variant called Size and it has 3 options, Large, Medium, and Small.
Now what I want to show is a piece of text snippet depending on which options I'm currently selecting. Each text snippet is different and which one will be visible will depend on which option is currently selected.
Is there any way I can set the variant's options metafield like this?
Thanks in advance.
Thanks so much for helping with the understanding of how to be able to use liquid. One of the most frustrating issues I was having was with HTML alignment for some of my sections in the product pages since the metafields don't offer all the rich text/embed-able tools that Shopify's Product Description offers. This is such a great workaround for making those HTML customizations! I'm moving on to how to embed YT videos in their own section. Hooray all my layout problems have been fixed.👽🤖
Is there a way to get metafields to print out on the packing slips? I have a metafield for personaliztion but I can't get it to print out or to see what was entered in the metafield. Thanks!
Perfect! Thank you! I'm excited to try this out and explore it more!
Awesome! Let me know if you run into any issues and I will address them in a follow-up video.
Really enjoyed your videos! Super helpful. I'm learning a lot. Do you have anything about how to create breadcrumbs?
Thanks for the great video's!
You're awesome! :) VIDEO REQUEST - selling fractional units (like part meters) using variants & +/- selector. Please 🙏 🙏 🙏
Hi Ed, your tutorial are very cool and clear. About adding file in the Theme, how we use the metafield to add automatically. what kind of bloc should we add ? thanks
Hi Can you make a video on how to add Product Dimension (L*B*H) and weight.
Great video! Now to thinking what else can be done with Metafields within these Custom Liquid sections. If you have any examples for simple CRO tips, please share 🙏
What if I want to add a video. What kind of filter should I use?
Can we add a colour tab/button in the theme using custom liquid? Can you please guide how we can add product colour field. (only for single product, no variant needed)
How to show a different image for the related product:
featured_image just gets you the first product image. If you want to use the second or any other image, you can replace .featured_image with .images[1] or .images[2] or whatever number. Note the count starts from 0 so images[0] gets the first image
The full line for the second image would be like so: {{ product.metafields.suggestions.related_product.value.images[1] | img_url: ‘300x' }}
This answers the question I was thinking! Thank you Ed!
Thanks Ed, I wonder if I wish to add a picture rather than a related product, shall I still follow all of your coding process?
No, it should be much easier for just a picture. Do you have an example of another site that you want to copy?
Hi do you have a video on how I can add a custom liquid block. It will really help me a lot. Please reply :(
Hi Ed! Your instruction has made understanding metafields MUCH easier to understand and use! Thank you! I do have one question as I do not have the Custom Liquid option with my theme, Expanse. Is it that you added that functionality through your magical developer skills, or is that Expanse does not have it?
Hi Kurt, no I didn't add the liquid section myself - Dawn and most 2.0 themes have it by default. I've never used Expanse but yeah it might be that it does not have it. It's pretty easy to add though... I can make a tutorial if you're keen to DIY.
@@EdCodes I'd love to follow that video if you'd be kind enough to explain the process of adding it!
Do you have a video on how to get variant metafields to show on product pages and change when you switch
Between variants?
Yeah I do actually, watch either the SKU video - th-cam.com/video/PyNZ3h9N8DQ/w-d-xo.html - or the variant inventory video - th-cam.com/video/WMdYdvrFQ1s/w-d-xo.html - they both use the same method which is exactly what you are describing, and you can use it on any variant property (including metafields). Instead of variant.sku you would output something like variant.metafield.your-namespace.your-key
Great tutorial 👍
Great video! 🤘🏼
Thanks!
Is it possible to do something like a size chart that is NOT a product in this way?
To include a size chart on your product page? It's possible but you will need some basic-intermediate HTML and CSS skills to format it nicely. The easiest way would probably be to include your size charts as a single image if possible.
Thanks for the great video! Regarding the Related Product image, I found that if I don't choose the related product for metafields, it will show a "No image" icon, how to avoid it? Or I have to choose the "related product" for every product list? Thank you!
Hi, yes this is something I forgot to mention but you should also wrap that code in an IF statement so that it doesn't show up when there is no related product. Something like this - {% if product.metafields.suggestions.related_product %}
{% endif %}
@@EdCodes Thanks for your reply! It's a big help!!! :))))))
Thanks for the video. One question, how can I show list of values for 1 metafield? When I try to insert in a custom block, it won't show up (it does if the metafield is not a list). Thanks
I'm not sure about your exact situation. There is a new option to make a metafield a list of values - are you using this? If you just output {{ product.metafields.namespace.key }} then it should at least output the whole array like ["Blue", "Yellow"]. Or are they just comma-separated words? Then you need to first use the split filter. This might help too - www.shopify.com/partners/shopify-cheat-sheet
What if condition could I write to not show a metafield UNLESS logged in?
Simply {% if customer %} ...your content {% endif %}
Brilliant!
Thank you for explaining Metafields and what to do with them so well, I'm hooked on creating them. I have a related product one like you created in this video. But now I have a question the 300x was a bit to small for desktop so I up-ed it to 500x, but that was to large for mobile, so is it possible to make it flexible in the code?
When you say too large for mobile, do you mean that it is going out of bounds of the column? You can use style="max-width: 100%;" inside the tag to keep it inside. e.g.
It its just visually too large, you should use CSS in a separate block to make a media query. You need to also add a class to the so you can target it with CSS.
.related-product {max-width: 100%;}
@media (max-width: 768px) {
.related-product {width: 300px;}
}
I hope that makes sense. It's a bit too much to explain in a comment - I will make some videos on basic CSS and classes soon, that will give you the skills to do things like this.
@@EdCodes And again the perfect solution for my problem!!! was with your code ending in: | img_url: '500x'}}" style="max-width: 100%;">
I had tried something similar but obviously not the right code as it didn't do the trick. Thank you very very much!
I'm wondering when working with Reference fields if you can incorporate an add to cart function to the related products so you don't have to click and go to that product page. You can add it (and others possibly) from that area of the primary product page without leaving. Any idea on that?
It's possible, but probably too complicated to be made into a tutorial video. You would be editing the theme code and it would be different for every theme. For an easy solution - there are apps that do this.
@@EdCodes True, I try to avoid apps as much as possible to reduce load times and lags. I just didn't know if you knew of a quick way to make that happen with metafields. I can build something out for that section. Thank you for the quick response and the great vid!
Is there a way to add costume video to metafields? In a way that i can change the video for each product through inserting the video link to metafields value in the product page.
Ofcorse, Thanks for the video you posted. Very clear and needed for unprogrammer as my self.
Yeah, there is. I can make a video about it. Do you mind telling me - is there any reason you prefer to do this instead of just adding the video as product media (where you add product images)?
@@EdCodes hi, I'm using the dawn theme that has the option to add separate videos to the product page, but not changeable from product to product. so first, and most important, - my shop offers tactical solutions for medic and rescue teams, and we need order.. :-) photos is one thing and video is something else. and in a practical note, on first view for new costumers, they not always braws the media, spacialy in mobiles. they see the main photo and move on. if the video is separated, highly chances they will see it.
I uploaded videos to Shopify files and to youtube. and if I can add the link of the specific product video to meta fields in the product page it will be amazing.
second - I want to use a design app for Shopify that allows 1 general page design for all the products. I cant add a video to the design because I want them to change according to the products. with meta fields, I can do that.
I believe I'm not unique with this need. hope you will find it interesting enough to make a video for it. On the same note..
it will be great to understand how to make a video page that contains all of the product intro videos. can be a great way to introduce products to clients. people love good short videos and if the videos are any good, and they played automatically one after the other, they will stay to watch more and more products.
thanks for your patience and your replays.
Thanks for sharing. This is probably an obvious question, but do we need to add IF CONDITION to related products to prevent images from appearing on multiple product pages? Also, do you have a tutorial on Metafields + JSON? Thx!
Yes exactly, that's a good point I forgot to mention - wrap your related product snippet in an {% if product.metafields.suggestions.related_product %} to check that its not empty. Thanks for pointing that out.
Regarding JSON - do you mean the json data type metafield? Or something else? I haven't encountered a lot of use cases for the json metafield yet. If you have a good example of where you would use it, let me know! I would gladly make a video on it.
Thanks so much!
Hi, thank you for the great video. Hiding the unused metafields works great. The recommended products also work very well. Is it possible to display the recommended products in a 4 column grid under the product information section? For example like in the featured category section. I could not figure out how to display 4 custom liquid blocks in a row. Your plan with the video courses for store owners is great and unique. I am on it. Thank you.
Hey it's great to see you here again! Yeah there is a lot of interest in this related products thing so I'm going to make another video where I will go more in-depth on it. Multiple recommended products in a grid is going to be more complex so it's something I would build as a completely new type of block. We will be editing theme template code. Expect this in the next week or so.
Maybe I will also provide a downloadable code snippet for this + options like grid, slider, second image on hover etc... Thanks for the feedback regarding the course!
@@EdCodes Hi, thanks for the quick feedback. I am already looking forward to the video. You are doing a really great job in explaining and documenting the code. Thank you.
Hi Ed, below you talked about a video reviewing "multiple products" ... did you ever do one? I can't find it.
Thank you :)
🔥🔥🔥!
Please make a video on how to make only a part part of the text in a metafield bold! (like allergies in a product...) & thanks for the great videos! 💖
Use the bold html tag. It would look something like this: Just normal text. Nothing to see here. Bold text. Some more normal text.
if you want to do it dynamically, its way more complicated.
love to know how to add a free shipping badge using custom liquid :)
Is this badge an image? Do you need any other text around it? If you show me a (visual) example, I can make a tutorial.
Can I do math in this? If I have a 50 foot hose for sale at 100 bucks. I would like to create a block that says "Unit Price: $2.00 per foot"
Yeah you definitely can do math in this. Check out the math filters in Liquid - shopify.dev/docs/api/liquid/filters/math-filters
Output your price using {{ product.price }} and then use pipe | to apply any filters for your maths e.g.
Unit Price: {{ product.price | divided_by: 50 }}
Think you're about to save me $30 a month for an app Iwon't be needing if this works out ;) Cheers.
Nice!
Beautiful! #1 YT views provider -> P-R-O-M-O-S-M!!!
Hi Ed, i wrote you on Instagram and also a Mail would be great to hear from you need further assistance.