how to add quick view in shopify

hello and welcome to this complete,Shopify tutorial for beginner Series,where we are covering everything you,need to know to build a successful,Shopify store in today's video we'll see,how to add quick view button in your,Shopify done theme so if you are using,the latest add-on theme then this video,will be helpful,but this video is not particularly only,for Don theme it could be used for any,other theme so if you know in Dawn theme,we have a quick view option like if you,click on choose option then it showed a,pop-up just like this but if for some,reason you are not happy with this quick,view design and if you want to change,and customize it then actually there is,no option to do that so we will see how,to make it customizable and do it our,own way so we can reduce this limitation,and have the desired quick view section,in our own Shopify team so for that we,will use an app I will put the link in,the description so this is an app which,is free to install and if you want to,go to the premium version then you need,to purchase the Premium plan so this is,not a very expensive app very cheap app,okay as far the feature is concerned so,let's click on the add a button like any,other app so this app actually works the,same way you can see this how the quick,view will show if you click on this you,can see how it looks and there is a lot,of customization we can do inside this,app which we cannot do inside Shopify,don't theme because the quick view,option of dawn theme is not actually,very much customizable so I'll click on,add app like any other Shopify app you,should click on adapt to install that,app in our store so it will just,redirect us to our dashboard I will,click on install app and then it will,redirect us to the,dashboard of the quick view app which is,by q key file so let's see how to,customize it and how to add it for our,Shopify done theme or maybe any other,theme that you are using it could be,refresh or any other creepy many other,free theme that you are using,so it will it is loading the panel for,us the quick view app panel for us so,let's wait and let's get back to this,okay you can see now see that we have,seen it how it is looking right now so,let's click on customize your quick view,and then you can see pop-up layout which,one you want if you want it to be just,like this the image should be in the,right or just like this you can do every,customization right you can see how it,is looking so I just like this one then,you can see the pop-up size should be,medium or it should be larger than this,or not I would like to have the medium,main image size medium then there is,other info like product info which,product info you should want to choose,like enable full description show,description on mobile or not if you want,to or if you disable it then you can do,that as well so see more CLS there is,the option here three more seal as you,can see this is the thing then there is,the SQ I do not want the SQ to be showed,product type I don't want it vendor,should not be showed only either one the,button actions should it be a to add,card and what is that going to be doing,when clicking on go to card immediately,you can do that show by now button and,font and color you can adjust the font,size and color size as well add to cut,color you can change it if you want to,based on your,based on your branding so every option,is customizable so let's get back to the,Fountain color we did it already so,let's click on,create,okay so app is enabled and let's preview,my store to see if it is working,so let's see if it is working or not you,can see there is the quick view option,and now it is working properly,and you can see this is how it looks and,this how it was looking with Dawn theme,okay it was not the high it was not good,the option was also not good but if you,want to customize it like it should be,showed quick view so if for some reason,we want to upgrade the design pop-up,layout,animation,paid in okay then there should be other,options like let's get back to the,button uh let's get with the customize,again,and customize again button icon what,should show it should be short card icon,or not style which style you want to,show so let's click on button on desktop,show button text so I like to have the,quick view button okay this looks,actually proper right this one we want,not the one that we have right now only,with icon it does not look good it does,not seem there is a quick view here,because there is a button but we want,when people will hover over it it will,shows the thing,and then if you want the style you can,do that okay then the icon you can,change it so I would like to have this,icon then click on Save if you want to,add swatches you can do that as well you,want if you want to drop down list right,now it is drop down list if you want,color swatches you can do that so I'll,just click the select plane I will go to,the premium plane you can see if you go,to the 99 plan you have other options so,I'll just click on this option select,to see because it is free for me to use,in the development store because I am,not in a live store so I will click on,close click on customize and then I'll,click on again Swatch and I'll choose,the color swatch,the color swatch I I think actually only,available in 99 dollar plan so I'll just,choose this one because I just want to,see how the colors watch actually looks,like so let's click on customize again,okay go to color swatch,go to color swatch now choose it okay,now you can see how it is looking so if,you want to Circle you can do that,around you can do that you can see this,is looking fantastic so custom color,what is the color code should be for red,what color code if you want more color,at there and put the color name and,color code here okay so this is actually,a very much possibility for you if you,want to customize these things and there,is other other many other things you can,add if you go to the pop-up and if you,go to the product information,and translate quantity button action you,can do the other things as well like,clicking when go to checkout you want to,you can enable it for the Premium plan,okay so for pop-up layout you can do the,animation as well like pop-up animation,which animation should show fade in so,let's click on Save again and let's,preview this again in our store so now,we will have the,quick view just like this now you can,see it is looking way more better than,this now I'll click if I click on this,now you can see there is animation and,this color is not loading because I have,not added those color in the swatches so,if I want to add the swatches I need to,go to swatches and add those color,manually here,like any other color like it could be,gray I should click on it put the color,name here put the color code here so,that when the gray is shown this will be,shown so I hope this makes sense and if,you want to disable the chose option,from,from don't theme then you just need to,go to the featured collection scroll,down and you just to disable this enable,quick button so the chose option will be,gone and we will be using the qq5,quick view night now okay so if you are,using any other theme this how to now,you can see we have the quick view from,qq5 Team if I click on quick view then,if I click on add to cart then I will,redirect to that to cut button or,checkout button if I want to key I click,on view cut and this will react to the,view card if I go to the queue,pop-up setting again and if I go to the,button action I can just click this one,click on Save okay and for the button,fonts I can click on this add to cart,background color what color it should be,it should be black or any other color,brand based on my branding okay it,should not be it should not be the same,you can do it whatever you want so now,if I refresh my theme if I refresh my,front page and see quick view again now,you can see the button color has been,changed so click on that to cut button,now you can see it is redirecting me to,the cart page so this how to customize,your quick view button if you see the,catalog page,if you see the catalog page it will be,added there as well not in the only in,the home page it should be added in the,all pages of your store so this how to,add quick view in Shopify done theme or,any other theme that you are using and,if you want more customizable option,then you need to purchase the Premium,plan of this Shopify app I hope this,video helps so thank you very much for,watching the video

Congratulation! You bave finally finished reading how to add quick view in shopify and believe you bave enougb understending how to add quick view in shopify

Come on and read the rest of the article!