show sku on product page shopify

all right what's up guys if you found,this video then you probably have the,type of store where you need to show,your customers the sku number maybe,underneath the product title like this,and this is common if you have a,wholesale store,or maybe if your store has products with,a lot of different colors a lot of,different patterns and maybe it's a,little bit confusing for customers and,so it would benefit them to,be able to check the exact skew number,to make sure that they're getting the,right color or whatever unfortunately,many shopify themes don't have this,built in already and i'm not sure why,because it's really easy to just output,this value using liquid code,so i don't know why they wouldn't,include this option so luckily it's easy,enough to do that you're gonna do it,yourself,okay and just to clarify i am talking,about this field here so under inventory,we have the sku field that's what we're,going to be outputting directly to the,product page in a variety of different,ways i'll show you how to,i'll give you some options,and this is how it looks like if your,product does not have variance and this,is how it looks like if your product,does have variance then it will be,attached to every variant here you will,have a different skew for every variant,normally,and by the way if you are using the,barcode instead of the sku you can still,follow this tutorial simply everywhere,in the code where i say,dot sku,you would write dot barcode instead so,really easy so i'm going to show a few,ways to do this from easy to slightly,more difficult and you can decide what,is the best way for your situation and,your requirements the first way would be,for a product that does not have,variance things like size or color if,your product does not have that then,it's going to be super easy for you to,do this we're just going to be using the,custom liquid block type okay so this is,available on all shopify 2.0 themes and,you're going to be able to simply copy,and paste a lot of my code or code along,with me and just fill up this custom,liquid field here to output the skew,also if you're using an older theme that,is not on shopify 2.0 i will briefly,explain what you can do but you will,need to dig around in your theme files a,bit,to find maybe the product title so that,you can add the code that i'm talking,about in this tutorial underneath that,product title right you just need to,find the right spot to put that code all,right so the next part of the tutorial,is going to be if you have variants okay,and i'm going to show you a couple of,options here,the clean and really nice looking way,is to create a custom block type right,here these blocks that you have,available to you uh we're going to be,creating our own custom one and you see,this one with the lightning bolt is one,that i've created myself and i use that,lightning bolt to kind of visually,separate it and make it easy to see that,this is not part of the theme this is,one that i added myself,so you're just going to be able to add,that block there reposition it right,anywhere you want and it's going to be,outputting the skew number and yeah,using this method with the block type is,the best if you have multiple variants,because,now it's going to be updating every time,when we,change the variant,along with the price right okay so the,downside of using this option with the,block type,is that you'll only be able to follow,this tutorial if you are using dawn or,one of the free themes by,uh shopify so that's this theme list,right here if you filter by free if,you're using any of these themes dawn,craft crave sense taste,studio ride or color block then you'll,be completely fine these are almost,exactly the same theme in terms of the,code,and you'll be able to follow this,tutorial exactly if you are not using,one of those themes then it's going to,be difficult for you to do this method,um because you need to edit javascript,and the javascript is going to be,completely different on those different,themes i do have a fallback method for,you it's not as clean but it does the,job and this method is going to be to,simply output a list of all the variants,and their sku numbers right and the,customer themselves can see okay i want,this one which means this variant number,right actually depending on your,business requirements maybe this is even,better for you anyway obviously it's,quite long um takes up a lot of space,and it just isn't as pretty so you can,make it look nicer maybe by hiding it,inside an accordion like this right and,if your theme does have this accordion,feature already like dawn then i'll show,you how you can actually output these,uh this this list of variant skus inside,of that accordion but once again,depending on your theme,the difficulty may vary all right so,that's all the things that i'm going to,be covering in today's tutorial you can,use the chapters if you're interested in,a particular method oh yeah and i almost,forgot to tell you but all of the code,for all of the different options will be,on my website so you just go to ed codes,click on tutorials and then find the,tutorial for this video and you can copy,and paste all of the code that i talk,about if you don't want to type it out,while watching a video so with all that,said let's get started with the actual,tutorial okay we're going to start with,option one which is showing the skew for,a product that does not have variants,like size or color i'm going to be,starting on my themes page and the first,thing that i want to do is open up the,code and also open up the theme,customizer so i'm going to click edit,code and i'm going to hold command or,control to open that up in a new tab,i prefer having this tab on the left and,then on the right i'm going to have the,tab with the customizer and the other,thing you want to do is in the,customizer navigate to the product that,you're working on okay this can be any,product really but since we're currently,working on,a product without variance i am going to,be demonstrating on a product without,variance and actually this first option,does not require this tab to be open so,i kind of jumped the gun telling you to,do that,we're just going to be working with the,custom liquid block so you can go ahead,and add a custom liquid block to the,page you can move it up to maybe under,the title okay because i'm guessing,that's where you might want,your sku to show up and here we're just,going to write in capital letters test,or something just just anything so that,we can actually see that custom liquid,block is being output to the page and,right under here we're going to open up,some,double curly braces like this this is,how you write liquid code,and we're going to write product,dot,selected,or,first,available,variant,okay,dos,q that's all we're going to do,and we already see our sku number so,what this code is saying is get us the,product okay and then on that product we,have,the variant and then dot skew right the,skew is a property of that variant you,probably don't want to leave it like,this you want to at least wrap it in,paragraph tags right,so that it goes on to the next line and,it's a bit neater it's not like just raw,text being output,if you want inside of those paragraph,tags you can write something like skew,like this,make sure you put a space,so that looks nicer now let's just get,rid of this test word and there is,something else that we want to do,actually and that is have a fallback in,case this sku is not filled out so like,if you leave,this field blank right or maybe some of,your products have skews and other,products do not have skus,so,if this field is blank then we don't,want to output anything whereas right,now what would happen is,this would output nothing but would,still have this skew and then there,would be nothing following it right,so we want to wrap it in an if condition,and how we do that would be,open up these uh this logic liquid code,so instead of the double curly braces we,use curly braces and percentage science,and,you can have some kind of condition here,and we wrap the code that we want to be,conditionally output so,here we have the end if and what should,this condition be well the condition,is if,this skew number that we're outputting,you can paste this here,does not equal,blank,okay if it's blank nothing happens if,it's not blank we output this and that,is pretty much all there is to,the first option which is showing the,skew number for a product without,variance very quick very easy,one other thing that i think you might,want to do is i see on some websites,they put the skew number,very close to the product title so,currently it has this default spacing,around it which is 15 pixels above and,below,and if you want to tuck it right under,the title there which i think looks a,little bit better maybe,then we can just add a,quick bit of css,which would be margin,top,minus 15 pixels,like that,and,that's a negative margin so we just pull,it up a little bit right under the,product title,and i think that now,maybe this looks a little bit better,now i want to quickly talk about what,you might do if you're using an older,non-shopify 2.0 theme like debut okay,because you don't have this custom,liquid you can't enter a custom liquid,in your theme editor you're going to,have to go,into your theme files,and you want to find,this product title probably so,you want to find a file that might be,named product.liquid right or something,like that or it might be product,template.liquid actually,and then you want to search for,something like title,so there we go the h1 that gives us a,good clue and it's the and it's,outputting the product title with liquid,tags like that and so,right here we have the product price,and you know in between those tags this,script that's not output so you can,ignore that but yeah i would put it,right in between those tags you can use,exactly the same code that i used here,or you can copy and paste it from my,site,and you would put that into here,and for the later part of this tutorial,as well where i show how to output a,list,of skus for every variant you can also,put that right here,now we're going gonna go through option,two which is the main part of this,tutorial and the best way to do this and,that is dynamically updating the sku,whenever a variant is changed okay so it,works for any product with multiple,variants and it's also going to be a,block which is going to be much nicer,for you much easier to use so to do this,first you want to open up the code,editor,okay in one tab,and then in another tab you also want to,have the theme customizer open and you,want to navigate to a product that has,variants here is my product with,variants here is the bit of custom,liquid that i showed in the first part,of this tutorial and it's currently,outputting,the selected or first available variant,skew so it's outputting the skew for,this size 4 but as you can see when we,click size 6 8 10 it doesn't change,doesn't update and so that's what we're,going to do now we're going to be adding,javascript so that this updates and,actually we're not going to be using,this code at all so you can go ahead if,you followed the first part,you can hide this first thing i want to,do is to kind of register a new block,type in the schema okay what is the,schema,um the schema is what defines everything,that shows up in the theme settings here,so when we click add block i want a new,block type to appear here you will find,the schema in a file called main product,dot liquid this is on dawn right,main dash product,dot liquid,this is the file and what we're going to,edit is the schema which will be at the,very bottom i recommend copying and,pasting from my site because the schema,can be a bit finicky you know like if,you leave out a quotation mark or or a,comma then you can easily break your,product page layout so,i recommend just copying this and we're,going to paste it anywhere,within this blocks array so you can see,the different types of blocks that we,have here,we have title,price,quantity selector,variant picker and these are all the,blocks that we have,um,available here or,you know these kinds of blocks this is,the price block obviously we can see the,price block here so i'm just going to,add,what i copied from my site,i'm just going to add this right here,and we're going to use,command or control and curly braces to,indent things so that this looks neat,and so that it's readable okay we want,to keep everything,in line,and if you want you can get rid of this,little lightning bolt if that annoys you,but for me personally it keeps things,organized because later if i'm going to,update this theme,i'll know that this is actually,something that i added in and it's not,part of dawn so now that we've added it,to the schema when we click add block we,will see our new block type which is the,variant sku,we can add that,but nothing will get added to the page,yet because we haven't written any html,to be output when this block is added in,the settings we've just added this,option to the settings so that's the,next part we're going to create the html,that is output when we add the block to,the page,and it has this syntax which is like,when,and then the name,of that,block right so when that block is added,to the page output this html,and we're going to copy all of this and,we're also going to add this in the same,file but it's going to be,higher up you'll see this for loop,called for block in section.blocks and,then you'll see a bunch of wins so when,text when price when title i'm gonna go,and just put it under when title again,although it doesn't matter really in,which order you put it you can put it,under when price or when description,anyway and once again i'm just going to,highlight and i'm going to just tuck it,in so that it's,nice and,aligned to everything else so that we,keep things readable right we have this,when when when when,um,and i'll just walk you through this code,so there's a div which is just a,container and it's got the id of our,section,um and then inside of that it's just got,the code from the first part so if the,sku is blank right if you haven't filled,out the sku field for a particular,product then it won't output anything,otherwise it will output the product,skew like so a paragraph this is just,the id that i was actually experimenting,with so we can delete that you don't,need that part,and then there's a skew and then we,output the actual skew with,product variant dot sku we also have,this style margin top minus 15 pixels,and if you watch the previous part that,just shifts it a little bit,higher up so that it's right under the,product title,just save and you can preview what this,looks like so now this should work okay,if you've added this block hit save here,as well and then refresh the page you,should see that showing up and like i,said you can remove this margin top,minus 15 pixels,if you want this to be a little bit,lower down,so that there's regular spacing around,it just like this price so now let's,test this out and see that it's still,not changing it's still not doing,anything when we change the variants and,that's because we need to add javascript,that reacts when you click on something,here and that's the next part okay so,we're going to use a file called,global.js,and we're going to look for a function,there called render product info let's,just search here,open up global.js,and then we're going to search in here,as well and i'm just using command f,or ctrl f if you're on windows,render product info right and it's not,this one this one just runs all of these,functions we want to actually find,render product info,so you can use these arrows you know to,find the next instance of that,and here it is render product info and,what this does is it updates the product,info whenever the variant is changed,it updates everything that's going on in,here so for example the price is the,main thing that gets updated so we're,going to be using almost the same code,as the price here we have const price,and this just defines like where the,price is on the page,and so under that,um after the lion's const price,and uh,and if price,just make some spaces here,you can copy this our code is almost,exactly the same and uh,it does the same thing just gets the,price in this part of the code and then,it runs a function called,update sku so let's save for now just so,we don't lose anything then underneath,this render product info function,in line with it right in line with see,all these functions set unavailable,toggle add button,we're going to add our own function and,it's going to be called update sku,right with a small letter like this once,again i recommend not typing this out,and just,copy this,and so we're just going to paste it in,line with everything if it pastes a bit,weird just highlight,that part indented so that the um,the name of the function and then the,closing curly brace is in line and all,of this inside of it is indented hit,save and what this does is it fetches a,updated version of our,html,for this,section and then it sets the html to be,that updated html basically and we're,almost done there's just a,little additional thing to do and that's,if variants are unavailable price,automatically gets hidden this is same,price the code this is the same code as,the price right so they hide the price,so we're going to hide the sku as well,you're going to look for this if,add button return,so under constant price you're going to,write cons skew right,and then copy the next part which is if,skew and this is going to be below this,if add button so,you can write it you can do this here,and you're going to save and you can,actually test if this is working,by switching the variance and now you,should notice that on my sku only the,last two numbers are different,but here they are actually changing when,we change the variant so i hope this,makes sense and you can of course remove,the block and you won't lose anything,you can add it in later now i know that,some people will be asking me how do i,add this only for one product only for,some products and not for others and the,answer is that you should be using,templates,which you can do here you can create a,template based on this template right,and uh if you don't know much about how,to use templates i already have a video,that goes very in depth about templates,in shopify 2.0 i definitely recommend it,because i show you a lot of cool,examples a lot of ways to use templates,to make your store a lot better and yeah,that is all for this,second method now the last thing that i,quickly want to show you is if you're,not using dawn and you weren't able to,follow the method two of this tutorial,then here is the fallback you're going,to output a list of variant skus right,you're going to output the list of all,the variants and once again we're going,to use the custom liquid block type,or if your theme does not have the,custom liquid block type then as i,explained before like for a debut theme,you want to find a file called,producttemplate.liquid,find the product title,and then add your code underneath the,product title,but anyway,i'm going to show you with the custom,liquid once again i'm moving this under,the title i'm gonna hide my,previous sku and inside this custom,liquid block i recommend just,copying and pasting,my code for now,and then i'll walk you through it,but what i've done basically is,here is a,heading 4 and it just says skus right,you can style this however you want or,you can make it a,larger like h2 for example,and then we have a loop,actually i'll show you here because it's,more readable we have a loop that says,for variant in product variance so for,each variant in all of the product,variants,uh go into a loop and output this for,each one we're going to output the,variant title and then the variant skew,okay and that's in paragraph tags now,what's the variant title,that is usually,you know whatever you call the variant,so it might be,in my case it's kind of ugly it's just,four six eight right um,in your case it might be a bit better it,might be red yellow blue,whatever um,so in my case where it's just a number,this isn't very clear so i'm going to,write size,and then space and so now,that's more understandable size 4 this,skew size 6 this skew now currently,we're outputting these as paragraphs,right so each one is its own line as a,paragraph so that's okay but also this,is a list so you might want to,make it an actual html list so you would,do it like this outside of the for loop,you should use these ul tags which,stands for unordered list close the ul,tag right inside of the for loop instead,of paragraph we want each one to be an,li which is a list,item,stands for list item and i've just made,a mistake i've put this ul,actually,inside of the four so,you want that outside of the earned for,completely wrapping the four and so now,we have this list of skews with bullet,points change this back to h4 actually,and i'm going to save now,i think that like this is a bit long and,it's a bit ugly and it should be like an,optional thing right so i would prefer,to be under an accordion like this,unfortunately,on dawn and maybe on your theme we can't,use custom liquid inside here we can use,a meta field but it's actually kind of,tricky to output html code,uh using metafields so i realized that,the easiest way is actually if you have,an accordion if you're like this on,daunting and you have an accordion,already but you don't have a liquid,field then you can simply add a liquid,field here and to do this we're just,going to go into main product.liquid,again,and we're going to search for the,collapsible tab code,and it might be named differently in,your theme and the code might look a,little bit different in your theme right,but you want to find,the accordion content,okay uh this might be named differently,as well but you want to see where it's,actually outputting and where it's,where it's just a title so,here obviously is the block settings,heading,which is this thing materials shipping,and returns,and here obviously is the actual content,um and it's outputting the,block.settings not something again in in,dawn theme i'm going to show you how it,is in dawn,we're going to find the schema for the,collapsible content for the collapsible,tab and for example here we have,the content setting which is this row,content and the type of this is rich,text right and the type of this next one,is page for example which allows you to,select content from a page well we can,use the type liquid,to give us a liquid field so you can,copy and paste from here but basically,it says type liquid the id is also going,to be liquid and i'll make the label,also liquid,so paste this here,indent it so that it looks nice remove,this extra space,and hit save and refresh and this would,have added,a custom liquid field,to,all of your collapsible tabs right so,now you can use exactly the same thing,you can copy this and,paste it into the liquid here,it's still not going to output anything,because we have to tell it,that we want to output something when,this,block.settings.liquid is filled out so,again go back to the,the line where it says when collapsible,tab so the actual html that is output,and so here you can see,block.settings.content,is being output and that is this row,content then you see the page content is,being output and that is this page and,so we named ours liquid and so we need,to do here is,add another,line like this and say block.settings,and that would output and that would,output all of the liquid that we added,in here so let's save let's change this,heading to skus,and let's see what's inside it and we're,outputting all of our skews,neatly like that we can change the arc,icon as well uh the clipboard icon shows,like a list of something,um or you can have none right,and i would move that up under the title,or maybe not under title actually under,the description,or,you know wherever you want really so i'm,going to hide this again and now,it looks nicer obviously you don't need,that second heading in there either,so let's,delete this,and now you just have a list of skus,under this accordion skus it's going to,be different in your theme of course,it's going to be a slightly different,process from what i showed you but i,hope,that it's similar enough to dawn that,you'll be able to figure out how to get,this done,so that is all for today's tutorial guys,i hope it made sense,i hope you found it helpful and that one,of these options was suitable for you,if you have any questions leave a,comment of course in my recent videos,i've been going a bit more into the,details than i usually do because i,realized a lot of my,subscribers actually are interested in,coding and if that's you then i highly,recommend also subscribing to my mailing,list which you will find on the home,page of my website,because i do have upcoming extra pieces,of content like courses perhaps an ebook,that won't be you know through youtube,so it would be good if you're also,subscribed to my mailing list so you,don't lose that that's if you're,interested in shopify coding of course,but otherwise make sure you subscribe,like the video so that youtube,recommends it to other shopify store,owners and that's all i'll see you in,the next video

Congratulation! You bave finally finished reading show sku on product page shopify and believe you bave enougb understending show sku on product page shopify

Come on and read the rest of the article!