shopify how to add badges to product debut theme

hi everyone my name is sean today we're,going to be learning how to code our own,badges for our products,in this example here we have a product,and when we hover over it we can see our,little badge called six pack does a,little little animation so i'll be,showing you guys how to do that and how,we can uniquely assign badges to our,products based on the tags we assign on,the back end so let's get started,i also want to mention that we're almost,at 50 subscribers on the channel i,really appreciate everyone's support and,i really hope these videos have helped,you guys with your shopify coding,so to start i really quickly want to,show you how i even make my product,badges to begin with i use canva i,really like them for making a nice,professional looking graphics but you,can use any software that you'd like,in this case i searched for elements,called badges and quite a few options,came up in this case i selected this one,right here i adjusted the color and i,just threw some text on it,when you save your badges you want to,make sure you're saving them as pngs,with a transparent background as well as,making sure that the badge itself,doesn't have a lot of white space around,it so make the badge as close as,possible to the edge,in terms of the image size and,dimensions itself i typically create a,square badge and the dimensions are 300,pixels by 300 pixels after that i plug,the png i have into a website like tiny,png that way we're getting the same,quality of image compressed down even,further,that way we can be certain that our,website isn't going to be slowed down by,these nice badges we're going to be,adding,once we've finished creating our,optimized badge we can go into our back,end of shopify and go to our settings,area and then to our files area,we'll upload the file and then it'll be,ready for us when we need it,next we'll go into our themes area on,the back end of our shopify store by,going to online stores and then themes,and it's always good practice to make a,duplicate of your current live theme in,my case here's my duplicate here and,i've named it product badges that way,any changes we're making in our,development theme will not affect our,live store,next we're going to press actions edit,code,and now we have to actually find a spot,in our code where our badge is going to,go so to do that i'm going to actually,preview our store here,i'm going to go to our collections page,and i'm using chrome right now and on,chrome the keyboard shortcut is ctrl,shift c or you can right click and press,inspect,and so i know my badge i wanted to go,in the container above,the image,in the collection so i'm going to click,this here i can see here that the image,is right here and it is contained within,a div that has the class media media,transparent media square media hover,effect so i need to find these classes,somewhere within my code because that's,where i'm going to put my product badge,i'd also like to point out that i'm,using the dawn theme but this tutorial,pertains to any theme that you're using,for your shopify store we simply need to,find the code that renders our,collection page so i'm going to search,for the word collection,and in the dawn theme it is a file,called main collection product grid so,let's go into that for your theme this,file will probably be called something,different if you're not using the dawn,theme,and i'm going to scroll down and find,where our products are looped through,and that is right here,inside this loop we are rendering a,snippet i'm going to click into that,and within this file we will find our,image that we were searching for uh a,moment ago and we'll see the classes we,were looking for as well media media,transparent and media hover effect so,this is the spot where we're going to,put our badge,to make sure that we're in the right,spot we can go above our div that we're,looking for and add some text like test,let's save that go back to our preview,and we see the text test has been,rendered where we want our badge to be,so we know we're in the right spot,so i'm going to delete this test text,and,go to where i want my badge to be so i'm,going to add a custom class that's going,to hold my badge in this case i'm going,to call mine six pack badge but,depending on the badge you're creating,uh this class can be called whatever you,like i'm going to save that,next we're going to add the badge we,created to this class that we've also,created and to do that we're going to,find our css file,and in dawn there's actually quite a few,css files in your theme there may only,be one main css file and that's,completely fine we'll just add the,styling to that but in this case dawn,has a badge css file which i thought was,a perfect spot to add our own styling,for the badge that we're creating,we're not actually going to be styling,our class that we've created we're,actually going to be styling a pseudo,element of the class we created so we'll,type six pack badge,and we're actually going to decide two,colons and then after and then we'll do,our opening and closing uh curly,brackets and what this is going to do is,create an element,after the class,we call here and doing this allows us to,position the badge wherever we like,any time you use an after selector we,also have to include a property called,content,and in this case it's going to be left,blank but i want to show an example,where we actually fill it with some,content you'll often see it filled with,text so this is a test that's what i'll,put in my content and in order to see,this i'm going to position our element,that we've created,absolutely,position absolute and let's save that,and back in our store we can see this is,a test has been rendered here,i'm also going to adjust the positioning,so i'm going to put this element 20,pixels away from the top,and i'm also going to do 20 pixels away,from the left,let's save that,and now you can see that the text has,been bumped down 20 pixels from the,border and 20 pixels from the left of,the border,so we're going to delete our test text,but again we're going to leave the,content property there just blank and,now we're going to add our background in,which is going to contain the image of,our badge so we're using the shorthand,property background we're going to set,the background color to transparent,and we're going to get the url of our,actual image and that is going to be in,our file area we're just going to click,the copy link button here we're going to,paste that in between the parentheses,we're also going to make this image uh,not repeat so no repeat,we're going to center it,and we're going to also contain the,image,save that and in order for this to also,show up we're going to need to specify a,width and a height so i'm going to set,the width to 25 percent,and the height to 25 as well,save that,and now we have our badge showing up,so functionally our badge is done,for fun i'm going to show you guys a,little animation you can add to your,badge as well i'm not going to go into,too much detail on css animations i'll,leave a link in the description below,so i'm just going to copy and paste the,key frames i already have created,so here they are and just quickly i've,created an animation here and it's,called shake,and over time,it is rotated,at various degrees,so i want this animation to run on my,badge when i hover over my product,container,so if we go back and inspect our product,here we have our image,and i want it to run not only when we,hover over the image itself but also,this text and the price so i'm going to,go up in my hierarchy and as i continue,hovering you can see the colors,selecting uh,our elements as i continue going up,we can see that this class here card,wrapper is pretty good and it covers all,the things i want my animation to,trigger for so i'm going to use this,class card wrapper copy that,i'll just paste that here,card wrapper and when you hover over the,card wrapper,i'm going to take this class,when you hover over the card wrapper i,want our pseudo element to animate,so,animation,shake,and it's going to occur,over 1.5 seconds so i'm going to save,that,and now when i hover we have our nice,shake animation,the last thing we need to do is to allow,for selecting which products we want our,badges to show up on because right now,the badge is showing up on all products,so to do this we're going to be using,product tags,if we take a look at the documentation,on shopify's website for the product,object and search for the word tag,we can find an attribute that we can,actually use to help us sort through our,tags for our products and i'll link this,page in the description,let's go back to where we've added the,class six pack badge and we're going to,wrap this class within some logic that,checks for the occurrence of a tag on a,product,so remember in liquids templating,language whenever we're doing something,related to logic we use the notation,curly bracket percent sign,and we're going to close it with curly,bracket percent sign so within that,we're going to say if,product,dot tags,contains and i'm going to look for the,tag called six,pack,badge,and i'm also going to close that if,statement then on the other side of this,class with,end if,and make sure that there is a space,after the end if and start of the next,class,for some themes that'll be it and,everything will be working for the dawn,theme though and other themes that use,snippet files we're going to have to,access our product object a little bit,differently because snippets don't have,direct access to variables created,outside their files unless we explicitly,give them access,so if we go back to our collection file,we can see that we're rendering our,product card snippet,and we're passing the product object,under a new name called product card,product so we're going to take that name,let's copy that,and in place of the text product here,we're going to place product card,product,save that,and now we go back to our store,we'll see our badge appearing only on,the product that i've assigned the tag,six pack badge to and in this case i,assign it to my stress balls product,and that's it i hope this tutorial has,been helpful for you guys i can't wait,to hear what types of product badges you,come up with if you have any questions,let me know in the comments below,otherwise i'll see you guys in the next,video bye

Congratulation! You bave finally finished reading shopify how to add badges to product debut theme and believe you bave enougb understending shopify how to add badges to product debut theme

Come on and read the rest of the article!