Shopify Metafields - How to use Custom Fields

[Music] hey everyone yang here codingwithyen.com and today we're going to have a look at shopify meta fields sometimes also called custom fields really important stuff because they basically allow us to store additional information for products orders or other important objects and especially in the context of online store 2.0 there were some significant changes you need to know about so let's have a look all right so starting this video off let's quickly talk about why we need meta fields in the first place and why they are so important and i assume you all know how to create products in shopify you just go to the admin dashboard or products and when you add a new one the editor is pretty straightforward you just enter a title a description you can upload a few images set the price or add a bit of further information like the stock keeping unit and so forth and we could say this editor is quite good because it works with most products and i mean that's what it's designed for but there are also certain instances where you want to display additional details in this example it could be the headphones sensitivity the charging current the voltage the battery type and so forth and then you wouldn't find suitable input fields here or let me also give another example if someone was in the food industry or maybe selling supplements they would want to enter nutrition values like calories sugar the different vitamins and then you wouldn't find suitable input fields in here as well and then you could create meta fields to store that additional information so that's what they are mainly used for okay now in the past the only way to create meta fields though was by using apps or some hacky workarounds and now shopify actually released a native feature that also integrates very well with the new theme architecture that we talked about in my last video and that's what i want to show you today okay so first i want to show you some of the new customizer features and as you can see i currently have the dawn theme installed a theme built on the 2.0 architecture that's very important and then let's just visit the customizer and bring up one of the product pages so i have this collection right here with three different headphones uh let's just bring up the first one and now i want to add a bit of the meta information or additional information that i just mentioned something like sensitivity voltage and charging current and then we could create a new block element right here and let's use one of these collapsible tabs down here and then we could just name that details and paste some of the details right here i already have them in my clipboard so sensitivity 110 decibels voltage and recharging current let's give it a save for now okay now we can find these values on the front end so sensitivity voltage and recharging current and the only problem is that these values are now hard coded or let's say constant across all the product pages let me even show you that so here we have another product page and the third one so let me show you that so here we have the exact same details tab with the exact same values same here and in reality these headphones may have completely different values so we need to find a solution to make these truly dynamic on a per product basis and now in order to do that i'm jumping back into the customizer so this is the first product page again and here we now find this little database icon where it reads insert dynamic source and that's entirely new you won't find that on older themes and if we click on that we can now add meta fields directly in here or i want to say we can reference them as an output and previously we could only do that by editing the code now you could only render meta fields in your theme files and now we can do it directly in the customizer so let's click on add meta field and see what happens and now it brings us to shopify's new meta field editor so this is not an app or anything this is just a native feature you could also find that if you click on settings and let's see there should be one tab that reads meta fields so this gets you to the exact same place and now we can add definitions for products and variants collections customers and orders soon to be released but for now let's use products and then let's click on add definition so this is where we can define new meta fields or one new meta field and as a first one we could go with voltage and then it automatically generates this namespace and the key so myfields.voltage so this is basically how you would access that meta field through code if you want so then you could access that through product.metafields.myfields.voltage and then we can also add a description if we want we don't need that for now or maybe yeah maybe we should just add a short description um so that we can see that internally and then we can click on this plus icon to select the content type because now we can actually select different data types for the meta fields we will talk more about this in a minute uh and for now let's just use text because that's the easiest going to be a single line of text and we can also add some validation rules like the minimum length the maximum length or a regular expression if you want to check whether or not the text contains certain keywords or so i will leave everything on default or everything blank for now we don't need any validation so let's save this meta field and now we can go ahead to create the other ones as well so they were sensitivity and current so let me do current first this one is going to be of type text as well save it and the third one sensitivity another one of type text single line let's save it okay and now that we have these definitions in place we can go back to the product editor you definitely need to refresh this once so let's refresh all three and once that's loaded we should now find all the meta fields down here and we can now use these as additional input fields so let's add a bit of dummy data uh sensitivity for the first one could be 100 decibels current i don't know 100 milliampere and voltage 5 volt [Music] second one the i don't know sensitivity 110 uh current 80 and voltage three volt just so that we can see a few differences and then third one uh let's do 120 decibels current 70 and voltage forward okay save all three okay so now we have different values in place for all of the three products and then we can jump back into the customizer and after the next refresh we should now be able to reference these meta fields down here so instead of this hard coded 110 decibels i can now add the new sensitivity right here and instead of the voltage we can now use this meta field and instead of the current we can use the third one come on and let's save that and now if we compare all three product pages you would find that the values are 105 100 110 3 and 80 and 124 and 70. yeah so they are all independent from each other and completely dynamic on a per product basis how awesome is that all right now if this channel was called customizer with yun the video would end right here but you my friend you have subscribed for coding with jan so there's more so let's talk about data types and i actually want to show you all of these different meta field data types right here and what i want to do next is create one meta field for each of the types and i will just name them according to the type so the first one is going to be test underscore color excuse me and then yeah i will just create one for each of these so the second is date the third is fire json measurement number rating and so forth and i will just pause the video and skip ah okay so now i went ahead and created all these different meta fields test url boolean text reference number measurement json file date and color and i also deleted the ones that we initially had just to maintain a better overview then let's have a look at the product editor so we got that right here and at the bottom we find all these new meta fields and now what i want to draw your attention to is that depending on the meta field type we will have a different input or select mechanism and also different validation so for example for a url i couldn't just enter a single character it would say something like um i don't know what what does it say where you cannot have an empty scheme so it needs to be something like https in slash slash codingwithyan.com or something like that and then we can save that so yeah validation is different and for some of the meta fields you would also find different input elements so for example the boolean can either be true or false the text can just be text so abc reference can only be a page in the store so we could do the about us page a number is obviously a number let's do five measurement is also just a number but it also contains a unit so it's a kilogram json can only be adjacent string so let's do something like test and then let's do the following a text and then hello world it should be valid json the file picker is now set as an image picker so now we can select images right here maybe we can just select this one right here and then the date is obviously a date picker let's pick any arbitrary date and color is a color picker you've guessed it and then let's save all these meta fields right here and one last check here if the list exceeds the number of meta fields that can be displayed here you can also click on view all maybe we forgot one no okay for now we have all but yeah that can happen sometimes okay now that we have different values for all these meta fields in place i actually want to jump back into the customizer and show you something different because for example if we try to reference these meta fields in the tab content i got rid of everything we previously had then we click on insert dynamic source again but here we would only find a very limited set of the meta fields we just created yeah so we only find date measurement number and text but there's no color picker there's no url no image picker and so forth and if on the other hand we try to reference a dynamic data source for this page selector here then we would only find the reference meta field as so here we can't link a text field we can't link a number or anything like that or for example if we have this select element here we can't link any meta field at all because it doesn't make too much sense but what i'm trying to get across here is that these input elements are only compatible with certain meta fields and to give you a better overview you can take a look at this comparison right here that outlines which setting and meta field types will be compatible so for example if we have a color picker in our customizer we can only reference a color meta field if we have an image pick on our customizer we can only reference a file reference if we have a text field on the other hand we can reference text meta fields we can reference all sorts of number meta fields date meta fields and measurement meta fields and you will find the link in the description okay now next i also want to show you how this implementation or referencing looks inside the theme files so if we take the tab content for example and then just add a meta field of type text we should find abc right here okay then let's save that and now i want to go into the theme files or more specifically bring up the product template because that's where the customer data gets saved if you're unsure about that you can go ahead and watch my last video but otherwise let's just do it together actions and then edit code and then in here we should find the template folder and the product.json template so this is where all the data from the product page gets stored and now we just got to find this collapsible tab right here let me zoom in a bit so we can read this better so this is the collapsible tab heading is detailed and here we can see that the content is currently set to product.metafields.myfields the test underscore text dot value yeah so they're just referencing the meta field in the settings okay now the last thing i want to mention in this video is that meta field use is not limited to the customizer so you can still use meta fields in the code files or in the theme files so for example if we had a section file this is the one we prototyped in our last video you could still access the meta fields like product dot meta fields then the name space in our case it was my fields then the key the meta feed key let's just do test underscore text so then we'll put out the meta field and we also have two new meta field filters let me show you them as well the first one is called meta field underscore tag and the second one is called meta field underscore text without a difference and the text filter always converts the meta field to a text value for example if we had an image picker it would put out the image url and the tech filter generates some html markup so for example if we have a text meta field then the html around it would be a span element and if we had an image meta field the html around that would be an image tag i could also show you that in documentation so for example yeah here we have basically the meta field filters and meta field tag as the first one so this is how it's used and yeah if we have a single line of text it would wrap the content into a span element and if we had a page reference then would wrap the content into an a tag or a link if we had a product reference would also be a link and if we had an image picker it would generate an image element and now the text filter on the other hand let's have a look at that too and we're down here this is how we use the text filter and then it states if we have a text meta field then it would only put out the text that makes sense if we have a page reference it puts out the page title if we have a file reference it puts out the file url and so on and so forth you can check back on that for all the different meta field types but it would be even better if you just tested yourself all right that's it for today's video and i really hope you learned something new if you liked the video do me a favor and leave a comment because that's basically the only way i can get to know you better views and likes is always cool and much appreciated but comments is like wow this is real people and it makes it so much more fun and so much more engaging so yeah let me know what's on your mind what do you struggle with do you want to see more development content more basic more advanced stuff do you want to get started as a freelancer do you want to build your own agency do you want to be hired in a tech company as a developer do you struggle with i don't know consistency productivity confidence just let me know what's up and then we can make videos on that and we get this together so then i'll see you in the next have a good day bye [Music] you

Channel: Coding with Jan - Shopify Developer

Views: 9,719

Keywords: shopify metafields, shopify custom fields, metafields editor shopify, metafields for shopify, metafields app, shopify product metafields, shopify developer, custom fields, custom fields shopify, code with chris the freelancer, codingphase shopify, shopify devs youtube, weeklyhow shopify, shopify theme development, shopify tutorial, metafields shopify, edit metafields shopify, shopify themes, shopify metafields settings

Id: cnMwbpJzlQM

Length: 16min 28sec (988 seconds)

Published: Mon Sep 13 2021