how to make a hover button on shopify

bonjour shop firewall my name is andrew,from ecom experts dot io and welcome to,the hover,drop down menu d y i kids,do diy kit so in this video i have the,green hoodie that means we're gonna do,some shopify code and i'm going to show,you how to add a hover option,on your drop down menu and it's kind of,going to look,like this by the end of the video i'm,going to show you everything step by,step,below in the description there's a link,if you follow that link,you're gonna put in your email and,you're gonna receive the full,code um in your email address that way,you can just,copy paste the code and you don't have,to kind of figure it out and pause the,video or you know,follow yourself you just copy paste it,like i'm going to do it and it's going,to eliminate,so many errors if you have any questions,there is a comment section down below,right there there's also a subscribe,button and that would really really,really help me out if you would if you,would hit it hit it,hit it okay so to show you that it,currently doesn't work and that we're,actually going to make a difference here,in this video,let's see on how our online store,currently looks,and if i hover over it it doesn't pop,out so i really have to click on it,for it to come up there you go um,we're gonna change that the first step,you would need to do is to go to your,online store right here,and to click on it that was,anticlimactic,um and then you have to go to your theme,you have to click,action and you have to click duplicate i,say this in every video because in every,video there's someone that doesn't,do this step and that's then in deep,trouble if you do not do this tip,shut down the video go to see somewhere,else this is the most important step,you don't want to be working on your,live version because,if you mess up your live version you,gotta call me,just make a backup work on the backup,and if you mess up the backup just,destroy it,what just do this also fun side notes if,you're wondering about,the site speed two tanks go to,testmystorespeed.com it's 100 free and,it says exactly what the problem is with,your side speed,and numero dos there is an article that,i'll link down below,where we did quite some research to,figure out what was the fastest,shopify team so you might want to check,that out as well i'll shut up i promise,well i won't shut up because the next,step is actions,and click on edit code so we want,the copy is ready right now we clicked,on actions and edit code,by i'll shut up i mean i'll stop,promoting cool stuff,anyway welcome to the code editor it,should look something like this,not like this something like this and,the first thing you're going to do is,you're going to go see this,left section right here you're going to,scroll all the way down to the assets,section and then you're going to go to,something that's called,team.scss.liquids like that,now it's a different naming with pretty,much every theme,so don't shoot me if it's if you don't,have it it should,be you know something related to the,theme this is a,huge file like 80 000 lines you know,something like that,that that's a gift card it's not the,gift card it's not the gift card it's,not the lazy slide it's not the password,it's not the team.js because js stands,for javascript,no no no no it's something with scss,or css and it's usually theme.css,anyway you click on it and this,ginormous file opens,what you are going to do is you're going,to go to the very,bottom of it,right here the absolute last line make,sure that you're not like here,make sure that you're in the absolute,last line you're going to hit enter a,couple of times so you can create some,white spacing white spacing doesn't,really,matter in this situation then you're,going to do,a little bit of code that's not included,there it's not really code,you're going to do a forward slash and a,little star and you're going to,say um this is the code,for hover menu,right you see it's great that means it's,not really,code it's a comment for every see that,that's also comments,that's that's also a comment,for every developer that comes in after,you it's going to save them like 20,minutes trying to figure out what that,block of code is if you comment it,so it's pretty important anyway then,you're going to go in step number two,you're going to,copy the code from the file in step,number two and you're going to be,pasting that right here,oh you see now everything is commented,out,because we didn't close our comments and,you close our comments by again doing a,little star,forward slash there you go now only this,line is grey meaning,that's only the comments if this entire,gray section,comment section is a little bit too,complicated and confuses you,you can't leave it out it's not going to,change anything to the function of what,we're trying to do,so you can just copy and paste the code,from step number two right here,but you know i prefer to comment my,stuff in so,there's that make sure that you copy,exactly what is provided so it should,end with this bracket and it should,start with this little dot,um don't half copy okay you can now,save this right here,and then we're going to go right here to,the left again we're going back to the,assets,but this time we're going to go into the,theme.js meaning we're going to go into,the javascript,file again a pretty big file,now for this entire project to work,we're going to have to disable the,double,clicking which we can do in the,javascript file we're not going to,delete the code we're just going to,comment it out so the first step is,going to be to find that piece of code,that is in step number three,so you don't need to paste anything and,you just need to find that code,the easiest way to find it is to select,that first line of the code,you copy it and then,in here in your theme.js you do command,f for mac or control f4a windows,and a little search bar will pop up then,you paste like that first,couple of lines or those first couple of,words of the code that i shared with,and you're going to see it highlighted,in the file,for me it's around line 2 374.,now it could be completely different for,you it could be on line 5 or it could be,in like 20 million,i don't know if you have the out of the,box debut,team it's probably going to be around,the same number of lines,this is really purely for reference if,it's another number,don't break your head over it what is,important is that it's exactly the same,code,so it does cache parents on click dot,sight enough,it launches a function okay once you,have found that line,you know that entire piece then that's,identical to the piece of code that i,shared,you're going to select that entire piece,so it goes up until,here and again we're going to comment it,out so you're going to do a forward,slash and a star,at the very beginning of that block and,at the very,end of that block you're going to do,star forward slash,and the result of it is that only that,block that's identical to the block in,the description is going to become,gray again when it's grey it's not,active code it's,commented out so it's a comment now it's,not code anymore,so because it's a comment it's not gonna,you know count as code anymore,so it shouldn't work anymore anyway we,click on,save once we have done that all right so,let's see if it has worked now we're,going to online store,again we worked on our duplicate version,so it's not live yet so,let's click on action preview,and it should work drumroll hover,and yes indeed unhover it shows,up my sub menu well that's exactly what,i wanted,so i'm going to put that theme live i'm,going to click on action,i'm going to click on publish it's going,to ask me if i'm sure i want to publish,this,that there's no error so i'm going to,say yep i'm sure all right,and there you go now it is my live,version,and there is a beautiful hover well,there you go folks i hope that was,useful it's a small little change that,you can do yourself now and you don't,have to call me again for it,make sure to check out our strategy,videos people pay me like 250,an hour for consultation while most of,the info could just be,seen in a free strategy video on how to,grow,your shopify stock also make sure to,check out our app review,videos we review a ton of shopify apps,so make sure to check that one out,as well and hey my name is andrew,ecom experts dot io if you see me with a,green hoodie that means i'm coding and i,hope you share this with a friend or,subscribe and that it was kind of useful,to you,thanks a lot see you in another video,adios

Congratulation! You bave finally finished reading how to make a hover button on shopify and believe you bave enougb understending how to make a hover button on shopify

Come on and read the rest of the article!