hey guys christian here and today we're,going to go over a fairly new update,where you can add custom fields to your,products and of course i'm going to show,you some examples at the end let's get,started,custom fields or meta fields enable you,to customize the functionality and,appearance of your shopify store by,letting you save specialized information,that isn't usually captured by the,shopify admin you can use metafields for,internal tracking or to display,specialized information on your online,store in a variety of ways for example a,candle seller might want to display a,burn time for candles on their product,pages,while a grocery store may want to,display a product expiration date for,canned goods in our example we're,actually going to add,model information recitan information in,a collapsible menu to the product page,so you can actually see that dynamic,data on a per product basis which you,can do before all right and then for,those of you who don't know exactly what,i'm talking about i'm going to show you,here in our totally 90s kit website so,i'm going to click on the little eyeball,here i'm going to open up,and find one of our products i'm gonna,go to the fresh prince of bel air,and click on the yellow shirt,and when we talk about custom fields if,you think about all these right here so,the fresh prince design d this is,technically a field this is the title of,that product right uh this is another,field this will be the pricing,and so forth so each of these things,right here are technically fields now,what you couldn't do before was add,custom ones and that's what we're going,to show you how to do today there's two,ways to access the actual meta fields i,keep saying custom fields but custom,fields and meta fields are the same,thing,but if we go here to settings,and you'll see that now we have a meta,fields option,it's going to be pretty fairly new so,as you can see some of the,options here are still coming soon so,there will be some videos in the future,that we'll be talking about meta fields,and how to use them for collections,customers and orders but for now we have,products and variants as the only,options that we can add extra midi,fields so we're gonna go to products,and then in here we can add a new,definition,and then in here we can do,let's see product,um,sizing,in the description you can add a,description if you like uh this would be,for again people who are inputting this,information,you they might need an extra description,for it so let's put,and then you have the option to select,the content type um,you have a lot of different things in,here as color date and time file json,files,measurements number rating reference,text true or false and urls depending on,what you pick based on these content,type it's going to be the exact content,so if you pick url for example you will,have to type in a full url for that,custom,field to actually work so in this in,this instance we're just going to do,product sizing so it's going to be,gene
Let's move on to the first section of Made by Field theme shopify
Add a Note Field To Products in Shopify 2.0 - Gifts, Engravings, Customizable Products...
Add a Note Field To Products in Shopify 2.0 - Gifts, Engravings, Customizable Products...
all right what's up guys today i'm going,to show you how to accomplish a very,common task in shopify this is for,stores that sell gifts like maybe it's,something with an engraving maybe it's a,bouquet of flowers maybe it's a gift box,like this either way customers need to,input some kind of,message some kind of note attached to,the gift or the text that's used for the,engraving whatever and this is another,one of those things that you can use an,app for but you can also just do it,easily enough,by writing just a little bit of code you,can copy and paste my code and you can,totally avoid having to install and pay,for an app and it's gotten even easier,with shopify 2.0 okay so we're just,going to be using the custom liquid,block type and we won't even have to,edit the theme or template code in that,case now one more thing that i want to,clarify is that the advantage of having,this message field this note field on,the product page is that the note gets,attached to each individual product so,you know you might already have a note,field on the cart page right but this,attaches the note to the entire order,and what happens if a person orders like,companies often do this they order a,gift for like 10 of their employees,and each gift needs to have a different,message right so in that case that's why,we need to put the message field on the,product and not on the entire order and,it will come through in your shopify,admin like this as you can see under,each product we have,a note and there it will be different,for each product so this works well for,large,uh company orders this tutorial is going,to be using dawn theme,and any variants of dawn so all of the,shopify,free themes that are,for os 2.0,uh they're all actually just dawn theme,as well with different presets okay so,this tutorial is going to work for them,if you're not using dawn it's going to,be a little bit more difficult for you,but i'm still going to explain what you,need to do and i think that you should,be able to figure it out it'll be almost,the same except there will be a few,differences in,the classes that you use for,the,look of the field and also the id of the,form almost everything else is going to,be the same and i'm going to walk you,through that as well on one last thing,if you want to copy and paste any of the,code that i use in this tutorial,you will find it all on my website,ed.codes under the tutorials link and,here i share the entire finished code,and just a quick summary of the steps,that we take and yeah that's all let's,get started i'm just going to hide the,field that i've already built okay so,we're going to start from scratch you,can code along with me we're going to,add a block,custom liquid block,and here it is,let's just type test so that we can see,where it appears on the page,and we can drag it to where we want it,to be so i want mine to be under the,quantity selector but above the buy,buttons and the first thing we're going,to do is to add a text area okay this is,a
After seeing the first section, I believe you have a general understanding of Made by Field theme shopify
Continue the next second section about Made by Field theme shopify
How to Add Custom Fields in Product Pages on Shopify | Dynamic Fields | Shopify Theme Tutorial DIY
How to Add Custom Fields in Product Pages on Shopify | Dynamic Fields | Shopify Theme Tutorial DIY
shopify 2.0 is released with various,advanced features,custom fields are also one such feature,that is only supported on shopify store,2.0,so use any powerful themes like boom,that support all the shopify 2.0,functionalities,let's start adding the custom fields to,the shopify store by using the meta,fields,log into the shopify dashboard,click the products menu from the left,sidebar,all your added products are available,click an i symbol near the product that,opens the product page on the next tab,right side you can find the details,about the product,that is the place you,are going to add custom fields that,display extra detail about the product,fine close that tab and navigate to the,dashboard home,click settings from the bottom of the,dashboard,select meta fields that show you five,fields by default select the products,and click add definition,then provide the name for your meta,field,in my store it has bluetooth earphone,related products so i have been adding a,running time that defines the running,time of the earphones,provide information if you need or else,leave it blank,select content type and i'm selecting a,number,then click save from the top right,corner select the product you want to,add a custom field,on the product area scroll down to the,last where you will find the meta fields,now the thing that you want to display,for example i'm entering 5 denotes the,running time of bluetooth earphones,save it,then again click the online store from,the left sidebar,on the theme section click customize on,the current theme,by default it will be on the home page,change it from the top center of the,customizer,navigate to the products and select the,default template it shows the product,page,on the left side all your sections will,be present,you can hide slash unhide the sections,now select add block to select the block,then pick the text block and it is added,to the product pages section,you can add the text on the right side,that needs to be included in the text,box,i'm providing the text as a running time,you can also drag the section to a place,where you want the text to appear,now back to the text box i type a colon,and now you need to insert a dynamic,source by clicking this icon,select the meta field you have selected,and i select the running time the,dynamic source is added and i'm,providing hours because it defines the,time,click save from the top right corner,now the custom fields will appear on the,right side of the image,you can also add block to insert another,custom field,you can also easily navigate to the meta,fields area by clicking the dynamic,source icon,once you click the add meta field it,takes you to the meta field area on the,new tab,like you did before you can easily add,as many meta fields,this is the easy way to add custom,fields to product pages on shopify,the number one single product shopify,theme featured in envato tuts plus,with more than 3,300 downloads the boom shopify theme is,trusted by customers worldwide for its,
After seeing the second section, I believe you have a general understanding of Made by Field theme shopify
Continue the next third section about Made by Field theme shopify
Learn How to Add Custom Field in Shopify Product Page (Debut Theme)
Learn How to Add Custom Field in Shopify Product Page (Debut Theme)
hello everyone welcome back with another
video and today we are learning about ,shopify product page customization and in this
tutorial we will be adding a custom field in our ,shopify product page so for example if you want to
take input from your customer on the product page ,if you're selling a t-shirt or if you are
selling a label type product where you want ,name printed so you can ask your customer
uh in your product page about that input ,okay before we proceed to tutorial don't forget
to subscribe the channel so i can create more ,videos for you guys okay now i'm already locked
in the back end of the shopify and when you go to ,the back end you will need to find product file
in your liquid files in this case we are using ,we are doing that in debuting you can do it on
all of the themes so i'm gonna go to edit code,and then i will find product
file product good liquid file ,that's the main file which all of the theme
shopify should have and when i click on that,i can see the product liquid file is pulling
two sections one is the product template and ,one is the product recommendations
uh as i already have uh applied ,the code before creating this video i'm just
gonna go to the product template that's the ,file where we will need to add the code in order
to create the custom field for our product page,now once launched once the
file is open we will find,and form so ideally we are looking
for the form in our product file ,let me see where it's starting from ,okay so here's the form and form and that form is
ending here so these so this all liquid code is ,responsible to display all of the information
which is displayed here price size and all of ,the information which is showing up here what
we will do we will add a chord before and form ,and uh i have already created the port
before so i'm just gonna copy the cord,required plus visible on checkout ,i'm just going to copy the code and
hit paste and let's save the field,now when i refresh the product page,as you can see the field is showing up here,i can add name for so for example if you want
your t-shirt to have a custom name printed on it ,you can add this and it seems like i have
to add the quantity in the product page ,let's do that as well because that's
displaying that product has been sold,out,there we go we are seeing add to cart button and ,when i add custom name on this
field and click on add to cart ,here you can see the custom field on your
cart page and when you go to the checkout ,page continue shopping here's the card
page and when i go to the checkout page,custom field is also visible on the checkout
page so if you are the shop owner and ,you are looking for that custom field you can
easily find that on your product details page ,on your order section on the backend so if
someone orders a custom printed t-shirt you ,will see the custom printed name whatever
input you have received from your customer,so there are multip
After seeing the third section, I believe you have a general understanding of Made by Field theme shopify
Continue the next fourth section about Made by Field theme shopify
Shopify 2.0 Metafields Tutorial (Real Store Examples)
Shopify 2.0 Metafields Tutorial (Real Store Examples)
shopify metafields are finally here,uh they're part of the overall shopify,online store 2.0 update,um which is a huge update that shopify,rolled out about mid 2021 okay so it's,been six months now,uh we've got a lot of new themes that,are on shopify online store 2.0,uh architecture and one of the most,important features that i want to talk,about today is meta fields metafields,have been available for a while but only,developers could use them because they,weren't part of the actual shopify admin,like the interface now that we have new,themes on online store 2.0 regular,people store owners marketers you can,use them as well firstly let's talk,about what are meta fields okay they're,basically custom fields,for products and for collections,okay what i mean by custom fields i mean,that,when you're,creating a new product right in your,shopify admin,you have the title field you have the,description box right you have the price,and you can upload images,so these are all fields right but you,don't have you're not able to create,your own custom fields,are you,um you're not able to say,split the description into two parts say,you want like a title and then you want,like a subtitle like like maybe one,sentence that goes under the title and,then you want the main description below,that right you can't create your own,like subtitle field or you couldn't,before but now you can,with matter fields okay so that's what,matter fields are they're custom fields,uh for your products mainly,and for your collections as well,so in this video,i'm going to be showing you how,you can use them how you can set up meta,fields so how you can define them first,you define meta fields,through settings in your shopify admin,and then you can use them on products,and i'm also going to show you how i'm,using metafields now,on a real website so that you can have,like a real life example,okay actually let's jump right into a,real life example okay i'm gonna show,you this first how how this brand fresh,ego kid,they're a client of mine okay and i've,been working on their site over the past,year or so just adding little upgrades,just little features that they wanted,and,one of these features is this other,options thing right this other options,section as you can see it's just it's,the same pants in a different color,and they call it other options and they,have lots of products across their store,that have this other options,section so how do they actually add this,right because this isn't an app,um they didn't want to pay for an app,they'd rather pay me one time so that i,could um set this up for them,and then they have this ability and they,don't need to rely on an app or pay for,an app monthly or anything like that and,this is using meta fields okay,um,so let me show you how that,what that looks like,so let's jump into the product admin,um this is that same product,and if we scroll all the way down to the,bottom,look at this we have meta fields right,we didn't have this before we didn't,
After seeing the fourth section, I believe you have a general understanding of Made by Field theme shopify
Continue the next fifth section about Made by Field theme shopify
After seeing the fifth section, I believe you have a general understanding of Made by Field theme shopify
Continue the next sixth section about Made by Field theme shopify
Shopify Metafields - How to use Custom Fields
Shopify Metafields - How to use Custom Fields
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
After seeing the sixth section, I believe you have a general understanding of Made by Field theme shopify
Continue the next seventh section about Made by Field theme shopify
Shopify Metafields: How to Add Custom Fields in Shopify (Online Store 2.0)
Shopify Metafields: How to Add Custom Fields in Shopify (Online Store 2.0)
for years and years adding custom fields,in shopify was a tricky process,you had to use hidden urls or worse,install unreliable browser extensions,in order to add and edit them then for,displaying that field in your theme the,only option was to hard code that field,directly into your theme code that is,until shopify announced the new meta,field system,at unite 2021 and my god has the system,improved this new update allows you to,edit metafields,directly from the admin alongside the,standard fields,within a resources edit page and,combined with the new data linking,feature,inside the store editor you can link the,newly created meta fields,to section settings removing the need to,write any code at all,to bring metafields onto your front end,in this video let's take a look at how,we manage metafields in shopify,under the new online store 2.0 system,always i'm going to start off this video,inside my development store,chris testing shop as we spoke about in,the last video despite the wording from,shopify regarding,all online stores created after june 29,2021 being online store 2.0 stores,it seems like all the features talked,about in online store 2.0,are applying to all stores no matter,whether they were created before,or after june 29 2021.,if i scroll down you can see i can,connect with github,i can go into settings and add meta,fields like we're going to do in today's,video,and i can run the dawn theme,as you'll see in this tutorial so it,seems that at the time of this recording,it doesn't matter whether your store was,created before june 29 or after,you're going to have access to all these,features so of course in this video,we're going to be talking about,shopify meta fields one of the most,exciting features to come out with these,suite of changes that shopify are,calling online store 2.0,and it's pretty simple to get started,what i'm going to do is i'm going to,head into my customizer or theme editor,as they now call it,and i'm going to head to the default,product template,here you can see i've got one of my,example products loaded up,and here you can see the main product,information section with all of these,blocks,all right so one of the cool things that,is new in this online store 2.0,experience,is data linking so if i click on this,one here,you'll see that we've got the vendor,field,linked up in this text field right here,so here you can see,the vendor on this particular product is,shopify,and that's a dynamic field that comes,through the specific product,onto the front end via here so if we,wanted to hard code this and make this,something else like product title below,now you can see it changes to product,title below but it's not dynamic,so now every product that uses this,template,is going to have that text so this is,something that's super cool within,online store 2.0 we can add a dynamic,source and,we could add for instance the vendor,here,if i go to the next one down you can see,this one,is just title it doesn't have any,settings but yo
After seeing the seventh section, I believe you have a general understanding of Made by Field theme shopify
Continue the next eighth section about Made by Field theme shopify
Using the Multi-line Text Metafield in a #Shopify Theme
Using the Multi-line Text Metafield in a #Shopify Theme
hi i'm jonah with sweet honeycode and,today we're going to dive into,coding meta fields into a theme,so let's get started,so made of fields is a special feature,of shopify,that allows you to create hidden fields,that display information,either front end or something that is,information for yourself,in terms of admin the latest feature,that shopify rolled out made it easier,to work with this beforehand,you would have needed uh third-party,apps and so this new feature,definitely makes it far easier now,before we get started i have to throw up,a little bit,of a warning the skill set for this is,pretty much intermediate so you got to,be really comfortable at looking at,coding,and and if you haven't ever looked at,coding before it can be very scary very,daunting and there's always a,possibility,of making a mistake so i will show you,some ways to help prevent,breakage on your shopify theme as much,as possible but that is my disclaimer,however you apply this to your theme you,are responsible for on your end,i'm just providing you information in,the meantime,so with that let's get rolling so from,the shopify admin we're going to click,settings,and click on mated fields so once we're,made of fields,we see a few options that are currently,available products and variants,so we can create definition for these,what's exciting is the rollout for the,built-in feature for collection,customers and orders down the road again,made a field,is more of an admin information so,you're providing other information,publicly so customers can see it through,products and variants for example or,even on,collections but a lot of times in,business,you're having like business notes that,you need,depending on what the customer order and,things like that,before this was released as a built-in,third-party apps was,pretty much the only way you can create,this information flow so this is very,exciting,today we're going to start easy we're,going to click on products,and we're going to create a definition,so i can technically create,a takeover or add a definition of beta,fields that don't have a definition,we're not going to worry about that,right now we're going to create,something new because most of the time,you're creating something new,that you'd rather see for your store so,we're going to click,add definition now the first thing,you'll want to do is come up with the,name,of that definition now the name can be a,wide variety of things,and it'll even suggest a few options,right off the bat they give you some,templates so once we click on these,templates they are pretty much set in,stone you,really can't change them a whole lot but,again these are the most common,templates that i'm sure,shopify has seen or has been requested,from a wide variety of merchants as a,suggestion so i could have a product,subtitle for example,care guide isbn upc or eam,so again very business specific so for,today,i'm going to create my own style of care,guide so i'm going to type in care,guide and move on d
After seeing the eighth section, I believe you have a general understanding of Made by Field theme shopify
Continue the next ninth section about Made by Field theme shopify
Shopify Navigation Tutorial ( Mega Menus/Multi Level Menus/Dropdown Menus/Header Menu and more...)
Shopify Navigation Tutorial ( Mega Menus/Multi Level Menus/Dropdown Menus/Header Menu and more...)
76 percent of online consumers said that,what they care about the most in a,website design is how easy it is for,them to find what they are searching for,yes 76 and this tells you how much it is,important to make sure that when people,land on your store they can easily and,smoothly move around and they can easily,explore what you offer and get to know,your brand more and this honestly can,never be done without a very clear and,organized navigation menu,hi there I am jihab and on this YouTube,channel I share with you videos related,to e-commerce entrepreneurship and more,and in today's video I'm going to show,you how to set up your Shopify,navigation menus in the best way,possible but quickly and before jumping,to my PC I want to tell you some things,that you need to keep in mind while,organizing your navigation manuals my,first tip for you is to always put your,customers in mind put yourself in your,customers shoes and ask yourself what,would make sense for your customers what,would they be searching for let's say,for example you sell it jewelries so,most of probably your customers will,want to find your products based on the,product type so you need to have a Rings,collection a bracelets collection maybe,a watch collection in this case you need,to link to all of these collections,within your navigation menu but not only,that let's say I'm shopping online for,Rings there might be a specific kind of,rings that I'm interested in so maybe I,want to buy a wedding ring maybe I want,to buy an engage engagement ring or,maybe I want to buy an everyday ring in,this case you need to have the,subcollections within your navigation,menu as well and in order to do that you,need to create a multi-level navigation,menu and I'm going to show you exactly,how to do that when you move to my,screen my second tip for you is the,following when you are naming your menu,navigation tabs always use names that,make sense to your customers so let's,say for example you want to link to your,wedding rings collection simply use,these same exact words to name your tab,this will not only help your customers,to find what they are searching for and,understand what you are selling but it,will also help your store for SEO,purposes my third tip for you is the,following when you are creating or maybe,redesigning your navigation menu always,keep your tabs condensed don't exceed,seven tabs for your navigation menu and,I'm talking about the first level tabs,and I'm going to tell you why our brains,usually can't hold more than seven,things or seven ideas at the same time,on the short term so if you don't want,your customers to get frustrated and,leave just keep it simple and keep your,tabs to seven or maybe even less to five,my final tip for you and it is actually,a sacred tip always make sure that your,manual looks good on mobile so now we,are going to move to my screen to start,setting up your Shopify navigation menus,are you ready let's start so here I am,inside of the Shopify dashboard
Congratulation! You bave finally finished reading Made by Field theme shopify and believe you bave enougb understending Made by Field theme shopify
No difficulty
