You Can Use Metafields In Custom Liquid Blocks! Shopify 2.0

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ส.ค. 2024

ความคิดเห็น • 96

  • @EdCodes
    @EdCodes  2 ปีที่แล้ว

    Need a more advanced Related Products block? I've got you. Check out my Gumroad for pre-built code snippets - edcodes.gumroad.com/

  • @kurtahrens
    @kurtahrens 2 ปีที่แล้ว +2

    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!

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      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.

  • @tamalhasan661
    @tamalhasan661 10 หลายเดือนก่อน

    Best teaching style on shopify development! Already purchased his brief summary course, and I like this as well.

  • @biscotteyarns
    @biscotteyarns ปีที่แล้ว

    THANK YOU SO MUCH !! Thanks for the tutorial and the code on your website!!

  • @Ciaran.wasted
    @Ciaran.wasted 2 ปีที่แล้ว

    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

  • @blaqkSTARRR
    @blaqkSTARRR ปีที่แล้ว

    Bruh you’re the Truth 💚 God bless you for this outformation

  • @makenamurungi5904
    @makenamurungi5904 2 ปีที่แล้ว +2

    Really looking forward to the course. I have looked everywhere for something similar without success! Great video. Thanks!

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      Great to hear there is interest in this sort of thing, I really wasn't sure. Thanks so much for the feedback!

  • @user-up9ck1rb2x
    @user-up9ck1rb2x 6 หลายเดือนก่อน

    thank you for this class, Ed... it opened my eyes to all possibilities

  • @sabiria_mediterraneo
    @sabiria_mediterraneo 2 ปีที่แล้ว +2

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

  • @smbuckley
    @smbuckley 2 หลายเดือนก่อน

    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.

  • @QuelParish
    @QuelParish ปีที่แล้ว

    Extremely helpful! There are some good upsell/cross-sell apps out there, but I just wanted something simple. Thank you!

  • @dharmakelleherauthor
    @dharmakelleherauthor ปีที่แล้ว

    Thanks for this! This is very helpful!

  • @creepyphoebe6382
    @creepyphoebe6382 3 หลายเดือนก่อน

    Very helpful! Thank you so much.

  • @belindacameron8497
    @belindacameron8497 2 ปีที่แล้ว

    Fabulous help! Thanks Ed

  • @taniarodriguez9341
    @taniarodriguez9341 ปีที่แล้ว

    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.👽🤖

  • @mancyoumisaya5892
    @mancyoumisaya5892 ปีที่แล้ว

    WOW IT'S LIKE MAGIC , THANKS VERY MUCH

  • @EdCodes
    @EdCodes  2 ปีที่แล้ว +2

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

    • @KahdijaImari
      @KahdijaImari 2 ปีที่แล้ว

      This answers the question I was thinking! Thank you Ed!

  • @rusty_fordy1922
    @rusty_fordy1922 ปีที่แล้ว

    You're awesome! :) VIDEO REQUEST - selling fractional units (like part meters) using variants & +/- selector. Please 🙏 🙏 🙏

  • @Metaverse-Marketer
    @Metaverse-Marketer ปีที่แล้ว

    OMG super helpful. Thank you.

  • @nickbdaniels
    @nickbdaniels 2 ปีที่แล้ว

    Looking forward to that course as well. Just subscribed

  • @exitoagency8966
    @exitoagency8966 ปีที่แล้ว

    Thanks for the great video's!

  • @ernestocaste5953
    @ernestocaste5953 ปีที่แล้ว

    Great Videos Ed. Thanks for the help.

  • @humbertg.9661
    @humbertg.9661 ปีที่แล้ว +1

    Thank you for this tutorials. They're great! Is it possible to know how I can add a metafield in a notification email? Thanks

  • @erinnlamattery5075
    @erinnlamattery5075 2 ปีที่แล้ว

    Perfect! Thank you! I'm excited to try this out and explore it more!

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      Awesome! Let me know if you run into any issues and I will address them in a follow-up video.

  • @ingrid8986
    @ingrid8986 20 วันที่ผ่านมา

    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!

  • @kurtahrens
    @kurtahrens 2 ปีที่แล้ว +1

    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?

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว +1

      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.

    • @kurtahrens
      @kurtahrens 2 ปีที่แล้ว

      @@EdCodes I'd love to follow that video if you'd be kind enough to explain the process of adding it!

  • @jimcunliffe6549
    @jimcunliffe6549 2 ปีที่แล้ว

    Brilliant!

  • @GStreetFabrics
    @GStreetFabrics ปีที่แล้ว

    Really enjoyed your videos! Super helpful. I'm learning a lot. Do you have anything about how to create breadcrumbs?

  • @biscotteyarns
    @biscotteyarns ปีที่แล้ว

    Hello again! Is it possible to use this liquid code when we want to feature a product list metafield?

  • @DrazOutshineGaming
    @DrazOutshineGaming ปีที่แล้ว

    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 🙏

  • @EdCodes
    @EdCodes  2 ปีที่แล้ว +1

    Learn to BULK EDIT Metafields on 100's of products - th-cam.com/video/n-JnSDrDt-4/w-d-xo.html

  • @andrevangijsel957
    @andrevangijsel957 2 ปีที่แล้ว

    Great tutorial 👍

  • @RojanGeorge34
    @RojanGeorge34 ปีที่แล้ว

    Hi Ed, thanks for the tutorial. Is there a way to add the custom liquid code ina collapsible row?

  • @sheenamadhavan1719
    @sheenamadhavan1719 2 ปีที่แล้ว

    Thank you for this detailed video, how can I select custom size option if customer choose custom option in variant picker

  • @user-iq6om6rh1j
    @user-iq6om6rh1j 9 หลายเดือนก่อน

    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.

  • @travelnowords
    @travelnowords ปีที่แล้ว

    Thanks so much!

  • @minoukruger7956
    @minoukruger7956 2 ปีที่แล้ว

    Thank you :)

  • @SuLi-so5nv
    @SuLi-so5nv ปีที่แล้ว

    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?

    • @EdCodes
      @EdCodes  ปีที่แล้ว

      No, it should be much easier for just a picture. Do you have an example of another site that you want to copy?

  • @kellytwins4819
    @kellytwins4819 2 ปีที่แล้ว

    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!

  • @hellyski
    @hellyski 2 ปีที่แล้ว

    Great video! 🤘🏼

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      Thanks!

  • @jonathans.1874
    @jonathans.1874 ปีที่แล้ว

    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

  • @redhornsofficial
    @redhornsofficial 2 ปีที่แล้ว

    Hi Can you make a video on how to add Product Dimension (L*B*H) and weight.

  • @Ch-tb5bf
    @Ch-tb5bf ปีที่แล้ว

    Hi do you have a video on how I can add a custom liquid block. It will really help me a lot. Please reply :(

  • @parikshithmo
    @parikshithmo ปีที่แล้ว

    What if I want to add a video. What kind of filter should I use?

  • @revabeads
    @revabeads 2 ปีที่แล้ว

    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)

  • @zumrutkaraca
    @zumrutkaraca ปีที่แล้ว

    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

    • @luiginica
      @luiginica 10 หลายเดือนก่อน

      You can see this video th-cam.com/video/6XSuYF3rNa4/w-d-xo.html
      This is the liquid section code in order to hide an accordion named "Ingredients" that has empty content.
      {% if
      product.metafields.custom.ingredients == blank %}|
      // Select all elements with the class .accordion__title
      const accordionTitles = document.querySelectorAll(' accordion__title');
      // Loop through each of the selected elements
      accordionTitles.forEach(title => {
      / Check if the title's text content contains "Ingredients"
      if (title.textContent.includes('Ingredients')) {
      // Find the closest parent with the class .product__accordion and t
      const parentAccordion = title.closest('.product__accordion');
      if (parentAccordion){
      parentAccordion.style.display = 'none';
      }
      }
      });
      {% endif %}
      document.addEventListener('DOMContentLoaded', function() {
      // Select all elements with the class .accordion__title
      const accordionTitles = document.querySelectorAll(' accordion__title');
      // Loop through each of the selected elements
      accordionTitles. forEach(title => {
      // Check if the title's text content contains "Ingredients"
      if (title.textContent.includes('Ingredients')) {
      // Find the closest parent with the class product__accordion and hi
      const parentAccordion = title.closest(' product__accordion');
      if (parentAccordion){
      parentAccordion.remove();
      }
      }
      });

  • @cythinageo6648
    @cythinageo6648 2 ปีที่แล้ว

    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?

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      A pop up is complex to build and metafield doesnt help that much. Popup tutorial coming soon!

  • @naomibenarie6322
    @naomibenarie6322 2 ปีที่แล้ว

    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! 💖

    • @wake-digital
      @wake-digital 11 หลายเดือนก่อน

      Use the bold html tag. It would look something like this: Just normal text. Nothing to see here. Bold text. Some more normal text.

    • @wake-digital
      @wake-digital 11 หลายเดือนก่อน

      if you want to do it dynamically, its way more complicated.

  • @jonward1314
    @jonward1314 2 ปีที่แล้ว

    🔥🔥🔥!

  • @jeffdashley4116
    @jeffdashley4116 2 ปีที่แล้ว +1

    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?

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว +2

      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.

    • @jeffdashley4116
      @jeffdashley4116 2 ปีที่แล้ว

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

  • @frankief96
    @frankief96 2 ปีที่แล้ว

    Do you have a video on how to get variant metafields to show on product pages and change when you switch
    Between variants?

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว +1

      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

  • @MarjonScheffer
    @MarjonScheffer 2 ปีที่แล้ว

    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?

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว +2

      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.

    • @MarjonScheffer
      @MarjonScheffer 2 ปีที่แล้ว

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

  • @ep6319
    @ep6319 2 ปีที่แล้ว

    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!

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      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.

  • @steelcorestudio
    @steelcorestudio 2 ปีที่แล้ว

    Is it possible to do something like a size chart that is NOT a product in this way?

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      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.

  • @mdelvita
    @mdelvita 2 ปีที่แล้ว

    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

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      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

  • @lmw1business
    @lmw1business 10 หลายเดือนก่อน

    What if condition could I write to not show a metafield UNLESS logged in?

    • @EdCodes
      @EdCodes  10 หลายเดือนก่อน

      Simply {% if customer %} ...your content {% endif %}

  • @joannew4279
    @joannew4279 2 ปีที่แล้ว

    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!

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว +3

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

    • @joannew4279
      @joannew4279 2 ปีที่แล้ว

      @@EdCodes Thanks for your reply! It's a big help!!! :))))))

  • @omniarte
    @omniarte 2 ปีที่แล้ว

    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.

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว +4

      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!

    • @omniarte
      @omniarte 2 ปีที่แล้ว

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

    • @belindacameron8497
      @belindacameron8497 2 ปีที่แล้ว

      Hi Ed, below you talked about a video reviewing "multiple products" ... did you ever do one? I can't find it.

  • @MrYosstt
    @MrYosstt 2 ปีที่แล้ว

    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.

    • @MrYosstt
      @MrYosstt 2 ปีที่แล้ว

      Ofcorse, Thanks for the video you posted. Very clear and needed for unprogrammer as my self.

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      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)?

    • @MrYosstt
      @MrYosstt 2 ปีที่แล้ว

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

  • @johndowney9534
    @johndowney9534 ปีที่แล้ว

    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"

    • @EdCodes
      @EdCodes  ปีที่แล้ว

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

  • @BauerPower
    @BauerPower 2 ปีที่แล้ว

    love to know how to add a free shipping badge using custom liquid :)

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      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.

  • @kaimorgin9222
    @kaimorgin9222 2 ปีที่แล้ว

    Think you're about to save me $30 a month for an app Iwon't be needing if this works out ;) Cheers.

    • @EdCodes
      @EdCodes  2 ปีที่แล้ว

      Nice!

  • @claytonfranklin2474
    @claytonfranklin2474 2 ปีที่แล้ว

    Beautiful! #1 YT views provider -> P-R-O-M-O-S-M!!!

  • @taminohaas2836
    @taminohaas2836 2 ปีที่แล้ว

    Hi Ed, i wrote you on Instagram and also a Mail would be great to hear from you need further assistance.