shopify show variants with quantity

hey everyone my name is shawn today i'm,going to be showing you how to display,your inventory live on your website so,let's take a look here i've selected,small and blue and we can see that i,have 65 available and i have a hard,faced emoji if i change my selection,here i'm out of stock with a sad face,here i have only five left for the,shocked face i can do this however many,times i like and so let's jump in and,see how we can create this ourselves,i also want to point out that we're,almost at 250 subscribers on the channel,i really appreciate everyone's support,and if these videos are helpful to you,and you're new to the channel please,consider subscribing the inventory,quantities that we're going to be,displaying on our website come straight,from the back end on our shopify product,pages if we scroll down we can see all,of these variants have inventory,quantities and this is the data that's,displayed on our website so let's see,how we can pull this data and display it,on our front end as always let's create,a duplicate of our live theme in this,case i'm using dawn let's go to actions,duplicate from there i've renamed my,duplicate live inventory quantity and,then let's go to actions and edit the,code for that theme,once we're in the code editor i want to,point out that there's typically a very,large javascript file in dawn's case the,file is called global.js and typically,when you're adding a functionality like,we're going to be adding today you would,do so in this file but because this file,varies from theme to theme,and not everyone is going to be using,dawn we're instead going to be adding,the inventory quantity functionality uh,completely from scratch and straight to,the product page file,so let's go up to our search bar and,type in product we're going to be,looking for a template file called,product and if you're on a newer theme,it'll end in json if you're on an older,shopify theme it will end in dot liquid,but then from here it'll tell us to go,to a main dash product file so in our,sections folder we can find that main,dash product and within this file we're,going to be able to find our add to cart,button which is the location right above,that button that i'm going to add my,inventory counter so if we go and right,click and open a new tab our preview i'm,going to go to my catalog and my,products so right here on the product,page if we either right click and,inspect on this button or if you're on,chrome you can press ctrl shift c,and from there you'll be able to select,different elements i'm going to select,my add to cart element and i'm going to,go up a little bit in the hierarchy on,the side here,and right here i see a data type of add,card form and i'm guessing this is,pretty unique this text so i'm going to,copy this text and from there i'm going,to search for it in my main dash product,file so i found it here and this is the,only occurrence of that,text so i know i'm in the right spot and,to be sure i'm going to go right,after this when statement here and add,the text test i'm going to save that,file,and then when i refresh my preview,we have our test text right here so we,know we're in the right spot and this is,the exact location i want to add my live,inventory counter so i'm going to delete,this test text and in its place we're,going to put our logic remember in,shopify's liquid language we do opening,curly bracket percent sign percent sign,closing curly bracket and that denotes,logic,so if we look for the,product object in the official shopify,documentation we're going to be using an,attribute called,product.selected or first available,variant so i'm going to copy this,and here i'm going to say if,the product that's selected or the,variant that's selected and i want to,also get the inventory quantity,so this just leads us to a variant,object so i'm going to click there and,within the variant object we can,actually get the inventory quantity,right here,so i'm going to copy this,so if,the inventory quantity of the selected,variant is less than or equal to zero,then let's do something so i'm going to,say in this case i'm going to print out,a paragraph and i'm going to say,simply say out of stock,and i'm going to also do,a sad face,emoji,and i'm going to give this paragraph a,class as well of live,inventory count,and let's not forget to close our if,statement with and if,i want to add a bit more logic to my if,statement so below my paragraph i'm,going to add an else if,and also,be careful in this liquid language there,is no e in else if so just be careful of,that and i'm also going to add one more,else statement as well,this else if statement is going to check,whether the inventory is 10 or less so,i'm going to copy this logic up here and,change it up a bit so let's paste that,here so if the inventory quantity is,greater than zero,and if the inventory quantity is less,than or equal to 10. so this way i want,to show a message here that gives the,customer some urgency so i'm going to,copy this paragraph up here paste it,here and i'm just going to change up the,wording to say,only,seven left,just to give them a sense of urgency and,i'm also going to change out this emoji,to be a shocked face surprise,and we don't want this always say sound,for example though because we want to,actually display how many are left in,real time so we're going to copy our,variable here,and in this place of this 7 we're going,to paste that and in order to call that,we actually have to wrap that variable,inside curly brackets,and we'll save that,and then finally for else statement the,last option this will just display if,the inventory is greater than 10. so i,want to do a paragraph here,and,we're going to do,blank r,available,and i want to do,my part face emoji,there we go and let's save that,and now when we go back to the product,page and refresh we can see that we have,65 available,and now if we change our variant we'll,notice though that nothing happens the,only way,this updates is if we actually refresh,the page so 88 available,out of stock,and let's see this one only five left so,it's working but it's not working when,we change our variant only when we,select uh when we refresh our page so,let's get that functionality working,i've zoomed in a little bit here so we,can see a bit clearer what i'm doing if,we scroll all the way down to the bottom,of our file and go right above our,schema tag and give ourselves a little,bit of room we're going to enter an,opening and closing script tag,and within that we're going to create,our own custom object that holds our,variance so shopify already has if we,look back at the documentation and,within their product object they already,have an attribute that allows us to get,our product variance and you can see,that it returns an array of the,product's variance so we're going to be,using that to create our own object to,hold our variant data so we can pull,from it in real time,so let's create a variable here so,variable,uh custom,variant object,and let's for now set that equal to an,empty object,i've written some code here that's,commented out just to explain what we're,going to populate our empty object with,so our custom variant object is going to,be populated with the content from this,opening curly bracket to this closing,curly bracket and within that object,we're going to have a key value pair of,our variant id so we have a bunch of,variant ids and the values those keys,pertain to are actually other objects so,we're nesting other objects within our,object and within that we're going to,have our inventory quantity that we can,store but we can also store other things,such as sku title and a bunch of other,things but in this case we're only,really wanting to get our inventory,quantity so let's populate this custom,variant object so we're going to loop,through all of our variants and push,that data into this variant object so to,do that let's do a for loop so for,variance in product,dot variance,let's close our for loop,and within that we're going to create,our keys which are our variant ids so,custom,variant object,and we're going to do the,notation for this is,brackets and then we have our liquid,logic again so two curly brackets two,curly brackets and we're also going to,even add some dashes in between here uh,so that we get rid of any white space,and all we're going to call is our,variance id so var id and we're going to,set that,equal to,inventory quantity,we're going to do another liquid,variable here,there,inventory quantity,i'm also going to give this just to be,save a default value,of zero,save that,so if we copy this variable name and go,back to our preview and refresh and we,paste that variable name into our,console and press enter we can see that,we have all of our variant ids and,within that we have an object of our,inventory quantities so we can pull the,data we need now to make this update in,real time i'm going to clean up this a,little bit here by adding a semicolon,and fixing the spacing i want to show,you something on our live theme here if,we open our console and type in,window.location.search,and press enter you'll see here we our,output question mark variant equals and,then followed by the variant id and this,exact string here is exactly what's in,our url bar up above and if we,change our variant id native to all,shopify themes pretty much is when you,change your variant the url also updates,so we're going to be using this feature,to check whether a variant has been,changed and if it's been changed we then,know to update this text down here so,i'm going to select a different variant,here the url has changed to this ending,in a seven six now if i type this code,over here you'll see,this is the one that ends in seven six,and it's different than the previous one,and we did all of this without having to,refresh the page,so what i want to do is create variables,that hold our old variant and our new,variant id and compare the two and check,to see whether or not they have changed,so we're going to create a variable that,holds our old variant id so let's first,create a variable that holds the entire,url after the question mark including,the question mark so const old query,string,equals window.location.search,then we're going to create an interface,to actually interact with that,and manipulate those query strings,and then from there we're only going to,get the query that is called variant,save that and now if we copy this old,variant id variable,and paste that into our console we're,only left with the variant id and we,don't have any of that other,preceding text,i also want to make sure that no matter,what type of selector i'm using for my,variants that this code will work so in,my case i'm using the pill button,selector but in your theme you might be,using the drop down selector so in order,for that to work we need to make sure,our variant selector no matter what type,it is is wrapped in a container that we,can detect changes on so let's select,our variant selector area and in this,case the closest one i can find is,variant dash radios so i'm going to copy,that text and search for it within our,code,and within our code i found this element,here,and had my theme been using the drop,down selector instead of rendering this,element here i would have rendered this,variant select scheme so your theme may,be rendering this instead so to make,sure no matter which one we're using uh,the code will work we need to wrap this,entire container in another div in my,case i'm going to start the div up here,right after the win statement,and the closing div will be,right before the next when statement,here,and i'm also going to call that div that,we just created here ready to go,i'm going to give that a class name of,variant,selector element,back at the bottom of our file with our,javascript let's create another variable,called const,variant selector element,and let's set that equal to the element,we just created that we just wrapped our,variant selectors in so,document.queryselector,and the class we called it was,variant selector element,and then let's take that variable,and add an event listener,and check for change events,and when we detect a change event we'll,run a certain function,save that,in this case in between that function,let's just write console.log,and,i've changed oh i haven't changed,save that,go back to our code and now if we,refresh our page and we change our,variant,in the console we will see,i have changed and it continues,outputting the counter keeps going up,meaning it keeps,displaying that text so we have that,working remember before i mentioned that,i wanted to create a variable that will,hold our old variant id and a variable,that will hold our new variant id so all,we're going to do is copy this code we,have up here for our old variant id and,in between our opening and closing curly,brackets for this function i'm going to,paste that in and instead i'm just going,to rename all these variables to new so,new query string,new url params,new variant id and also make sure you,change their calls within here as well,new and new,save that and i'm actually going to copy,this console.log text as well paste it,down below and instead the variable,we're going to put in here is new,variant id,paste that and save,and back in our theme,if we change,the variant we can see here that text is,being output and the variant id of the,new variant we've selected so 5 6 and,that's the one we see in the url five,six let's select a new one,two four,and two four and so that's working quite,well,next let's compare our old variance id,and our new variant id and if they're,different that means that someone on our,website has selected a new variant so,below our console log here and still,within our function let's create an if,statement so if,our new variant id,is not equal to our old variant id,we're going to set our old variant id,equal to our new variant id,and then right above this console.log,let's also add another and just to show,that this is working we're going to put,our old variant id,and to make it even clearer i'm going to,add some text here,plus there,and this here,and make this new,and now when we save this,and go back to our website we can see,our current variant id ends in seven six,when i select my next one we can see,that the old one ends in seven six my,new one ends in four four which is,correct with our url we can keep doing,this so functionally this is working,pretty well,all that's left to do now is to update,this text based on a new variant,selection so let's go back to our code,and if you remember back in the,beginning of the video we created those,paragraphs and we gave them all the,class of live inventory count so let's,copy that class name live inventory,count go back down to our javascript,and within our if statement here let's,create a new variable,let live,inventory count,equal,document.queryselector all,and make sure it's query selector all,and not just query selector,save that,then we'll create a for loop,and all this will do is check for more,than one instance of this live inventory,account class in our case we only have,it rendering once so only one of the,possibilities will render on our website,but if you want to copy this entire,section and place it somewhere else,within this file this will make sure it,captures all those classes and updates,the text for every single one,all that's left to do now is within this,for loop is to,replicate the logic we put up here for,our paragraphs and put it down below in,javascript format so let's start that,our first if statement we checked for,the inventory quantity being less than,or equal to zero so let's do that here,in javascript so if,and we're going to check for our custom,variant object that we created here,so if that,we're going to use a new variant id,and remember our last variable we saved,was the inventory quantity we're going,to copy that up here,the inventory quantity,is less than or equal to zero,then i'm going to set the content of the,live inventory count,paragraph so live inventory count,and we're going to make sure we select,the right one because we're looping,through everything,and inner html,is equal to in this case i'm not going,to do quotations i'm going to do back,ticks and back ticks are right above,your tab key on your keyboard,and we'll say in between that out of,stock,and i'll do my sad face emoji,and make sure i close off with a,semicolon,next we had an else if statement where,we checked if the inventory quantity was,less than or equal to 10 uh but greater,than zero so i'm going to copy this if,statement and paste it below,and say else,if,and else if it's greater than zero,and two ampersand signs and,i'm going to copy that again,it's greater than or less than or equal,to 10.,and then in this case i'm going to set,the text to,what was it,only 7 left,and i had my,shocked face,but in place of the 7 we're going to put,our variable so i'm going to copy this,variable above,and in javascript,in this notation i'm using here we wrap,our variables with a dollar sign and,then one curly bracket and another curly,bracket and within that we put our,variable so we can save that,and the final one was an else statement,so let's copy this else if statement,paste it down below and we can get rid,of everything after the word else,and we just wanted to display,i think it was just,however many inventory is available,and i had my heart eyes emoji,and save that,and that's everything if we go back to,our website and we change our variant,selections we'll see that our text here,is now updating uh immediately which is,awesome so this will really help uh,answer questions your customers might,have about stock level and like i said,before uh give a sense of urgency when,the stock levels are running low so all,that's left to do now is we can get rid,of these console.logs by either deleting,them or commenting them out i'll just,delete mine here,save that,and now when i change them my console is,clear and it's not,making it all messy,so that's everything hopefully this live,inventory counter helps increase your,stores conversion rate if you have any,questions leave them down in the,comments below otherwise i'll see you,guys in the next video bye

Congratulation! You bave finally finished reading shopify show variants with quantity and believe you bave enougb understending shopify show variants with quantity

Come on and read the rest of the article!