shopify how to view your popups

by the end of this video you're going to,have a quick view on your collection,pages you're going to do it all yourself,it's going to cost you nothing except a,bit of time,and frankly it's probably going to save,you 2,300 to have a developer do it for you,the first and,most important thing you do is you go to,online store once you're in the back end,of your shopify store and you create a,duplicate,of your live theme you're going to do,this by clicking on,action and clicking on duplicate,there you go it's super important you,never work on live themes and always,have a backup on which you work,in case you mess stuff up just delete,the backup,and start over alright while this is,loading i just want to show you real,quick,and i'm not going to bamboozle you if,i'm going to go on catalog,on the preview version right here there,is no quick buy so we're about to change,that okay,it's done so the first thing you're,going to do once you have the duplicate,is you're going to click on,actions and you're going to be clicking,on,edit code now if you're used to our,channel you know this is the code editor,we do a lot of coding videos in here so,the first thing you're going to do even,though it might be a little bit,intimidating walking in this code editor,don't worry about it the first thing,you're going to do,is you're going to scroll all the way,down in assets,then you're going to click on add a new,asset it's going to ask you what type of,asset you want to add and you say i want,to create a blank file,that i'm going to call quick view,it's not how you write quick view andrew,quick view and,it's going to be a javascript file so,dot,js add the asset once that is done,you're going to,go to that actual new thing right here,new file,thing new file andrew it's called,quickview.js right here you created it,and it's going to be empty,we're going to paste some code into this,throughout this video i'm going to be,pasting some code,now don't worry just watch the entire,video to the end and by the end of the,video i'm going to say,exactly where to find the code why do i,want you to watch the entire video first,is because,often people just go straight to the,code kind of do themselves and then they,mess up and then they leave comments,saying doesn't work,watch the entire video get the code at,the end of the video,then redo it with the video and the code,and you're going to have the biggest,chances of success,okay so once we're in the quickview js,folder we're gonna paste a bunch of js,code,there you go it starts it ends,like this it should be 176 lines and it,starts with quick view,awesome we can click on save for that,one,all right once the js is done we're,going to create a new asset,we're going to make sure it's a css dot,a liquid file,and we're gonna call it quick view,there we go we're gonna add that asset,and then we're going to,select it right here in the assets,folder and we're gonna paste a whole,bunch of stuff in there,paste and then we click,save,so the two assets folders have been,created and,have been saved the next step is going,to go to,snippets right here on the left and,we're going to be adding a new snippet,so we're going to create a new snippet,and you can guess how we're going to,name it,that's right we're going to name a quick,view,once you create it contrary to the asset,once this actually opens immediately,and you are again going to be pasting,some code in here,so that's gonna look like this you're,gonna click on,save all right next step is to going,into the theme,folder right here on the top there is a,layout don't forget to save,but there is a layout right here and,it's theme.liquid,everyone i used to call it team.liquid,and people were like which team bro,i don't see it and i'm like no no,apparently,theme i gotta do this anyway,we're gonna find a closing head tag this,is the opening head tag and if i,highlight it meaning turns orange,and i'm gonna go scrolling all the way,down i'm going to find the closing head,tag right here i know it's closing,because there is a forward slash before,the word head,we're going to hit enter a couple of,times because spacing doesn't really,matter all that much,in code kinda and then we're going to be,pasting,a little piece of code right here should,look something like that,we're going to save that now the only,step left right here is to actually add,the quick view,button on our collection page that's it,and we're going to do that right now,but before we do that it would mean the,world to me if you subscribe and check,out our other videos actually if you're,going to hit subscribe right now i'm,going to show you a little kitten as a,reward,how about that so just subscribe,and here's your kitten right there isn't,that cute that's cute right,all right anyway enough of all of that,baloney let's go to,our final step here the sections,sections are right here we haven't,clicked on them yet right here and we're,going to look for,collection and dash template this one,boom you click on it and then this is,kind of the tricky part we're going to,look for,um it's a list that we're looking for,so maybe the easiest thing to do is,command f,on a mac ctrl f on windows a little,search box appears,and we do grid here grid item there we,go this is the one that we want there's,a,bunch of them but we want the lists this,is a list l i stands for list here's,another,list um and it's this one that we need a,list with a class grid item,and then this is the opening of the list,this is the closing of the list,right at the end of the opening of the,list so right here,we're going to hit enter once and we're,going to paste some code there,so it's going to be two quick lines of,code and this is basically telling hey,everything that we built so far you're,going to insert that right above,so we click save there we go,now normally it should work normally if,you have an existing store normally that,should be enough,it's not going to be enough for me,though because there is no jquery yet,however let's test it just to make sure,we saved everything,so we're going to check we're going down,to the copy so,online store themes the copy we know,this is the one we worked on because,last saved just now,we go on actions and we go on preview,then you go to your collection page,oh look at that the quick view is there,it doesn't work,and if it doesn't work it ain't no good,in my books so,the reason of that is because i don't,have jquery installed yet now if you,have a theme and if you have a store,that has any bit of history where you,did any type of modification,it's possible that it's already working,because someone else already installed,jquery on it,this is brand new so i've never,installed jquery so we're going to do,that together so,all this to say normally it should be,working for you if it doesn't work,don't worry we're just going to go back,here online store themes this is the one,we worked on we're going to click on,actions edit code we're just going back,to the code editor where we were before,we give it a second to load we're going,to theme.liquid right here,and then actually you,should write the opening head tag,remember that one there's a closing,attack remember that one,this is a code that we added earlier,well right before that,we're gonna add our jquery library,paste and then we save,once it's saved we're gonna refresh this,right here,and boom look at that we got a quick,view,now it's not live yet for that we gotta,go to online store right here,this is the version we just saved,remember so we're gonna click on actions,and we're going to click on publish,are you sure you want to publish this,version they ask oh,damn i'm sure publish,there you go that's a beauty now if we,look at our,live store i'm going to close all of,this we look at our live store so any,customer that walks in right now,they go to our collection page guess,what they're going to see they're going,to see a quick view,boom all right so now the quick view,works as we can see if you want to,modify the color or the view of it,you're,going to have to have to talk to a,professional they're just going to be,able to help you out here otherwise you,can learn,css it takes you about a couple of hours,to learn it once you learn it and master,it you can modify,all of these colors and the shapes,yourself,it's kind of hard to do with just a,youtube video,and all of the codes that i've been,copying and pasting you can find them,right below on the link,that's it i hope you enjoyed it make,sure to watch another video ciao

Congratulation! You bave finally finished reading shopify how to view your popups and believe you bave enougb understending shopify how to view your popups

Come on and read the rest of the article!