all variants showing 0 in stock on shopify

bonjour shopify world my name is andrew,from ecom experts dot io,got the green hoodie so we're gonna do,some coding and in this video we are,going to,show you how you can display a little,message to say how many,elements there are left in stock we're,gonna jump in the code for this and this,is useful if you want to create some,scarcity and,push up your sales by showing how many,are there still left in stock,all right let's jump straight to our,online store,right here um so welcome in our little,online store let me first show you how,it currently looks i can go to,products,i will go to the color product because,i'm tracking the,stock on the color product so it makes,the most sense there,i do view,and as you can see i have no idea how,many black yellow and red are currently,in stock alright so i'm gonna close all,of that and we're going to,get to work in the description below,right next to the subscribe button you,will have a link,and on the link we explain to you,exactly what pieces of code you need to,paste,and where you need to paste them so i'm,just going to copy,that code from that document and paste,it inside before you start and this is,super important especially on this video,is that you make a duplicate of your,theme,if you're not gonna make a duplicate of,your theme stop right here stop watching,this video,it's not worth it don't even try we're,going to be playing,in the javascript and the chances of you,messing up in the javascript,are real by having a backup version you,can just always rely on your backup in,case you mess up and you don't have to,hire a developer and so you're gonna,save a lot of money so please,make a duplicate before you do anything,else we're going to do that,by going to online store or right here,and then on the online store we're going,to create on actions,and we're going to say duplicate,it's going to take a second and the,theme is duplicating as you can see,right here,and here is the duplicate version being,created,okay the copy is done and we are going,to be working on,this version right here so not on our,live version but on our duplicate,version,again in case we mess up it doesn't,affect the live version,great you got that okay great,so you can just click on actions right,here and you can click on edit,code welcome in the code editor and,right here on the left side we're going,to go down,to sections if you don't have sections,on your shopify store it is time to,update your theme,i don't have a video for that you're,going to have to contact your theme,producer the person that built your,theme and ask them how to update it,we do it for a fixed fee as well so you,can always reach out to us,anyway in these sections right here,we're going to go into,product template um,which is right here product dash,template,dot liquid we're going to click on it,and basically this is our product page,sort of,so the next element is we're going to,copy and paste the html code,saying how many items left in inventory,now it's kind of,up to us where we want to put that piece,of code,on the product page i like to put it,right above the,add to cart button and to do that we can,do command,if on a mac or ctrl f on windows there's,this little search box,that will pop up and we can type in btn,so we're looking for buttons and here it,says here isn't a button,but this button has a class link medium,up,height thumbnail slider that does not,look like our add to cart but,so we type in enter again it's going to,show us another btn,and another btn you can see now we're,selecting this one,if we type enter yet again oh here we go,button type button class link medium up,thumbnail slider that still doesn't look,like add to cart,so let's type enter a couple of more,times we're selecting through them,here's another button button type submit,ah this looks like an add to cart button,um name ads or yeah so,this is oh here you product form submit,you see,these are are terms related to an add to,cart button so,it's pretty safe to say that this button,is our add to cart button,that's the little code for add to cart,but so if we want to put it above it,well you just click right before the,start of the code you hit,enter a couple of times so you create,some space,and then in the empty space make sure,it's 100 empty so,not here because then you're in this,block of code which,is something else right for example here,or,here you're going to paste,the codes that i've provided in step one,there you go and there is a nice little,commenting right here that says,inventory tracking on product page,basically this code says it looks at the,variant id,inventory um if there's only one we have,current variant inventory quantity so,there's like,one or five it checks the quantity uh in,stock okay,now that that is pasted we can save it,now in case you don't have variance on,your products you're pretty much,good to go for this part there's still,more code you need to add now in case,you have,variants on your product so just as our,color product there's multiple variants,or if you sell t-shirts the sizes and,the colors those are all variants,if you have variants on your product you,need to add a little bit,more of code right here um so let's do,that right now,we're going to be pasting that piece of,code right above,what we've just pasted here so that's in,step,1.2 i guess in the document we're gonna,hit,paste and this is basically making sure,that,our little this product is available or,showing how many they are still in stock,um works for all of the variants on your,uh,product if you don't have variants don't,worry about this little piece of code if,you do have variance you need to paste,that in,okay cool now let's click on save,the next step is where it gets a little,bit tricky we're going to,scroll all the way down here on the left,and we're going to go to,assets in assets we're going to look for,the javascript file so,team.js not vendor not vnc something,like,not password something like fee,something,global if you don't have team then try,to look for a global name,theme is pretty global uh password is,just one little fraction of your of your,site,anyway you get the point theme.js now,i'm having the debut,team just um for your reference,and again here we're gonna do command f,on a mac or control,f on windows and the search box box will,pop,up now in the document i provided a,little term,called variant change we're looking for,variant change in this folder,now i have two of them but i'm in the,debut team so for you this might be a,little bit different but on the debut,team there should be two of them,out of the box i'm gonna tell you the,lines but the lines is really just,rough because if someone entered and,added a little uh spacing somewhere then,the line numbers will be off so,use the line numbers just as a reference,i have a variant change around,line number 6431,and i have another one and i have an,another variant change around line,number 742,we need the one that's around a line,number 742,and basically this,little comment says exactly what this,piece of code does,it's an event handler for when a variant,input changes so when someone clicks on,a different variant that's an event,handler,it's going to trigger a new picture and,a new price and this and that,and this is the little piece of code,that does that,now we need to add our little piece of,code to check the inventory of this new,variant that the person has just clicked,on,in order to do that we need to insert,our code in,this block you see this entire block,talks about,event handler for variant input changes,like i said,so our code needs to be in here this,little curly bracket,signifies the end of that code but we're,going to put it,here right after if variant then return,we're going to do a couple of spaces to,create some space,and then we're going to be pasting our,first line of code,that should look something like this,paste,let inventory hash equal to,document.queryselectorall,inventory management and then a little,debugger line,perfect we're going to hit enter a,couple of times,and then we're going to paste the other,piece of code that's right below it,paste there you go this is what we just,have,added and now what's going to happen is,when we click on a different variant,the system the code should understand,that we're clicking on a different,variant that we're not on the black,t-shirt but we're on the red t-shirt now,and should understand to go check the,inventory for the red,t-shirt so we click on save okay now,this,is done we should be all good to go,so we're going to go in our online store,remember that we have made our changes,on the copy of the debut team,if something is broken now or if,something doesn't work,that's no big deal because it doesn't,affect our live team so you don't need,to panic so we're just going to click,right here on,actions and we're going to click on,preview to see if it works correctly,uh now i have to find my product where i,track the,inventory which was the color products,um right here colors,we have one black in stock,we have one yellow in stock and we have,two,red in stock does that make sense,let's go see with the actual,product right here colors,we have one,black one yellow and two red,okay let's change this to,eight like this,we save it and then we can make sure it,works right here,so yellow there's eight in stock now and,if we refresh,black we have indeed one yellow we have,eight in stock,and red we have two in stock so it works,perfectly,i hope you enjoyed this video i hope,this video made sense,please don't forget to duplicate your,theme the code you will find below in,the description,make sure to subscribe because it means,the world to us and,make sure to check out for more green,hoodie videos from me where we talk,about code or some strategy videos where,you can make more money by just,doing upsells and things like that we're,literally,we're printing money that's what we're,doing thanks a lot i love you all and i,see you in a video other video adios

Congratulation! You bave finally finished reading all variants showing 0 in stock on shopify and believe you bave enougb understending all variants showing 0 in stock on shopify

Come on and read the rest of the article!