how to sale shopify product collection page

in this video i'm going to show you how,do you,add a little for sale,badge right here in the upper left hand,corner,of your product images so when you're,looking at a collection so right now i'm,looking at the,men's shirts collection i want to see,that there's a for sale,or even a sold out banner right here,now this is using the debut theme,and you can see that we're already doing,that it's already doing that down at the,bottom right here you have these little,badges down below,but let's change this up let's go ahead,and get rid of these,and then have it be shown again in the,upper left-hand corner,so the first thing that we're wanting to,do is we're going to do that,via css now when you do a quick search,on google for css batch,this is one of the very first links up,toppers so,the nod here put up some some code that,anybody can use,and it's showing us how do you add a,number of things how do you do a number,of things,have you had this banner or these badges,in the upper left hand corner you can,have it in the lower,lower corners the left side and the,right side,you can have it come up at the top you,can have it be in the middle,down below here so,let's take his styling and add it to,our theme what you'll want to do is in,the middle here the css,scroll down,we see this badge overlay css i'm going,to grab,it from that comment and go all the way,down,going to copy all of this all the way,down to the bottom,control c let's go into our admin panel,let's go ahead,and edit the debut theme,so let's edit this and if we go down,below to our assets,theme css scroll,all the way to the very bottom down to,where theme css is and you'll see,it's actually conveniently at the 7000,line so if i just start from 7000,control paste control s,to save it or clicking on the save,button in the,upper right hand corner here we have now,added,this styling now it's not doing anything,yet,if we take a look at this and we refresh,it's not doing anything yet,but let's go into,our product price listing liquid file,so if we go to our sections,there should be a product price listing,might be in our snippets actually,there it is it's in our snippets product,price listing liquid,so this file right here,and i'm going to add some code up top,here,so you see that we have some liquid code,right here that's great we're going to,do something very similar,but if we scroll down you can see what,controls that banner,controls the adding of,some particular what's called classes,css classes,or really html classes but this is what,you use for styling,that there are some some piece of code,that's checking to see,is it available is it on sale,so we're going to do something very,similar capturing that information,let me show you so we're going to add,some liquid code so when you do this,right here you can add some liquid code,in between,and what we're going to do is i'm going,to,have a show badge,variable i'm going to set that to false,initially,all right now this is where we can do,the compare at price,over price so we can say if,that compare at price is greater than,price,what do you want us to do assign show,badge,make sure that that's true assign,that's called badge color because if,it's on sale we want it to be let's just,say red,or maybe if it's on sale it's a uh,it's orange and then if it's sold out,it's red,that might be a better idea so let's do,that same thing so batch,color is going to be so this is for cell,let's say this is orange assign,batch text equals,for sale,end if now if,available equals false this is where,we'll do that same thing,let's just grab all of this,it's going to be red sold,out save it off all right,so it'll be orange if it's for sale red,if it's sold out,now that we have these variables set,they're being determined for us or,calculated for us,we can if you scroll down to,where the images let's go find the image,real quick,oh that's not in here show batch oh it,really doesn't shouldn't matter where we,put this,let's just put at the top let's put it,at the very top,put this in here and say if,show badge if this is set to true,remember we're setting that up,up above here if it is true,oh,end if we're going to have some code in,here we're going to write some code,so here's our code div class equals,badge overlay,div let's reinvent that,and in here this is going to be span,class equals,top left batch and this is where we're,going to find the badge,color so this is going to be red or,orange,based on our code here,all right and we're going to add in this,batch text as well remember that's being,determined up above now if we save this,let's just refresh and see if it works,there you go for sale sold out,it works for us,now we'll probably want to get rid of,the tags down below here the sale and,the sold out down below here,so if we scroll all the way down,that's happening right here,that's where it's happening so let's,just go ahead and delete that and,actually you know what,let's go ahead and move that code that,we've written down below there that,might be a better place for a sense,that's where it is that code is let's,just go ahead and move it down below,here,to keep it consistent to where it was,when it is it had these,badges down at the bottom so let's just,refresh and make sure that didn't,destroy anything,perfect and it still works so now we,have for sale and it's sold out,right here that's fantastic now where is,this coming from,this is coming from that code that i,just wrote is,coming from this example that we have,right here on codepen,so it's really just doing this,that we see right here,now you have this top left you have this,badge you have this orange,if you look at the css code,you'll see that we have a top full,we have a bottom right,bottom left etc so if you wanted to,you could say top right,and save it and if you refresh,now it's on your right hand side if you,want to do a top full,let's just go looking and grab it from,here,top right bottom left bottom right,there's a top full,product price listing let's do a top,full,save it refresh,there you go that works as well,so all because of this styling right,here,all this code right here what it does is,it it lets you control,where that badge is going to be you have,a middle full,bottom full and you have red orange pink,blue so you can,if you want you can add more colors here,you can use pink blue or green right,here so let's just,let's just show you what that looks like,so if we do a batch color and let's just,let's just make the change up top here,and do,green,there you go it changes the color,so it's pretty neat thank you to,venat here for providing this this code,that we can just implement into our,theme,let's just do a top let's do a middle,so see what that looks like,perfect so you have a number of options,if you don't care to have these,different,positions you can get rid of them so,that you're not bloating up,your css file right here you're not you,don't have code in here that you're not,going to use so,if you don't care about having a bottom,full a middle full a top full,feel free to go ahead and delete them,right if you're not going to use that,positioning remove it if you're not,going to be,to have any sort of colors besides red,or and orange,remove it right we don't want code that,we don't,we're not using in our files,or you can keep it there it doesn't take,up a whole lot,keep it there that way you have some,flexibility later on,if you do want to move that,alright so that is how you add badges,and have them hovering over your product,images,hello everyone if you've enjoyed this,video and are interested in learning,more,head on over to universateem.com,it's a full-blown course that teaches,you how to customize your shopify themes,whether you're a store owner or a,developer,we'll show you how to build navigation,menus,how to filter your collection pages how,to customize your cart page,and so much more you'll see you have a,full-blown curriculum,shown right here of what lessons are,already there so sign up today,to become a shopify theme pro

Congratulation! You bave finally finished reading how to sale shopify product collection page and believe you bave enougb understending how to sale shopify product collection page

Come on and read the rest of the article!