zoom in when hover shopify

and in today's video I'm gonna teach you guys how  you can add a hover effect on your product images  ,for Zoom so you'll be having Zoom On Hover  effect on your product images just like this,and cool thing about this tutorial is that  you won't need to install any additional  ,app for that I'll be showing you guys how  you can do that via custom code and it will  ,be implemented on all of the product images for  your Shopify team and this tutorial is for Dawn  ,theme 7.0.1 if you want to learn stick to the  video don't forget to comment on the video and  ,if you want to learn this for how to implement  on any other theme don't forget to comment so  ,I can create similar tutorial for you guys so  without further Ado let's jump into the chord,okay guys so that's how the original  product page of Shopify daun theme  ,looks like so there's no over effect on  product images and after implementing  ,this tutorial you will have your product  page looks like this with the zoom effect,looks cool right okay so in order to implement  this we will first go to backend of our Shopify so  ,I'm just gonna close this one and refresh to  show you guys as I have removed all of the  ,chords and that's how it's a completely fresh  thyme theme which I have stalled to teach you  ,guys how you can Implement that okay so I'm  gonna go to the back end of my Shopify store  ,by navigating to slash admin,and from there click on online store,and from here as you can see our current team  is done so I just uh recently downloaded it like  ,about two three hours ago and it's done 7.0.1  so we'll be going to added our code by clicking  ,on this three dots and then click on edit code  before editing the code make sure to duplicate  ,it and save the backup in case you're working  on a live theme so if you mess up anything with  ,the code you can easily revert it back Okay  now click on edit code and first what we're  ,gonna do we will find CDN for jQuery we'll be  adding jQuery in our theme dot liquid file so  ,that's our first step so just Google up CDN jQuery  and from there you will find the link on the top,and we will be needing latest version for  that so click on minified and from here  ,click on this copy link copy to clipboard just  copy it now go to your theme dot liquid file,and in our theme.liquid file I just  I'll just paste the jQuery CVN code  ,which I copied from jqd Okay now click on Save,now the second step is to include jQuery plugin  for our zoom on Uber functionality and for that  ,I'll upload a jQuery plugin file so click on  settings from Shopify dashboard then go to files  ,and in files I'll upload the jQuery plugin,so I have that file saved on my in my desktop  so that's the file light zoom.js I'll provide  ,a blog post Link in YouTube video description  where you will find all of the instructions  ,including the file which you need to  download in order to implement this  ,so after uploading that file you will see  that here and I'm just gonna copy this link  ,and I'll paste the code in SRC of this  snippet so just paste it here and then  ,copy this complete code and add it to your  theme.liquid file so this basically tells the  ,Shopify that if you find product page please  add this jQuery plugin okay now copy this  ,and paste it on your theme dot liquid file  so I'm gonna go to my code editor again,and from there I will navigate to team.liquid  file and I'll copy the code I'll paste the code  ,which I just copied just below the jQuery code  which we added okay here it is now click save,okay now we are on our third step third step we  will include uh we will add a class in order to  ,initialize our jQuery plugin okay  now go to product Dash thumbnail,product Dash thumbnail.liquid file and in  here we will find a code media dot preview  ,underscore image dot Alt so just find this  code and above this code I'll include a class,and the class is image selector that we will add  you can add your Custom Image selector I'm just  ,gonna add image selector image Dash selector  for now and I'm gonna copy this and I'll  ,search media dot preview underscore image dot alt  everywhere on this file and add a class above it,okay media dot preview underscore image copy this,here we have and I'm just gonna add my class  again class image selector make sure you don't  ,do any spelling mistakes because that's  really important part of our tutorial,class inverted commas image Dash  selector and then comma at the end  ,same thing here so we have this code here as well,okay,already added image selector okay  we are done so there are three to  ,four times where you will need to add this  code and after adding this code hit save,after saving this file search for global.js,and in this global.js file scroll down to  the bottom and add this GS Court and again  ,I'm going to add a blog post Link in YouTube video  description where you will find all of the quotes  ,including the instructions which you need to  follow so that's the class which we added in  ,our product.s company.dequate file now our fourth  step is adding this code in our global.js file  ,now just copy this code and add this code in  in on the bottom of our global.js file and  ,I copy this code and in our global.js file paste  it at the bottom of the file click save after  ,pasting the code and now final step of our  tutorial is to add some CSS code Now search  ,for base.css file after opening that file scroll  down to the bottom and add the CSS code which I'll  ,provide you guys and that's our CSS score just  copy it and paste it on the bottom of the file,and after pasting the code hit save,and now finally it's our time to test if our  magnifying class zoom over effect is working fine  ,so that's our product page and now I'm gonna hit  refresh and here we go our magnifying glass zoom  ,on Hover effect is showing up completely fine you  can also change the size of the magnifying glass  ,radius so in order to do that go to global.js  file and in here the code which we added you  ,can simply change the glass size and reduce it  to be smaller so from 200 let's make it 100 and  ,I can also decrease the zoom power so Zoom power  is from one to four you can decrease it like uh  ,by tapping on one so one means there will be very  uh small Zoom small Zoom power and now hit save,now let's go back and let's wait for its saving  okay it's saved now now go back to the product  ,and hit hard refresh make sure to hard refresh  because if you have uh the GS file cached on  ,your browser it's not going to change quickly  you will have to refresh multiple times I have  ,hard refresh in order to prevent that and  here you go as you can see our Zoom effect  ,is reduced and our radius of magnifying glass  is also reduce now let's get it back to three  ,which is the normal effect and hit save and  after saving the file make sure to hard refresh,and here we go as you can see the zoom power  of a magnifying glass has been increased and  ,let's test it on other products as  well so let's test it on that one,and there's our product and as you can see  it's working completely fine looks cool right,okay guys that's it for the tutorial if you  guys want to learn how to implement that on  ,your own theme let me know in the comments below  which team you would like to implement this code  ,to and I'll definitely create a video tutorial  for you guys until next video have a great day

Congratulation! You bave finally finished reading zoom in when hover shopify and believe you bave enougb understending zoom in when hover shopify

Come on and read the rest of the article!