how to add the rollover image in shopify

hello and welcome to software experts,today we will see that how to create,image hover like hovering on the image,effect like if you are hovering on an,image,in a collection page then it will be,over like it will be converted,showing the second image,so here we'll go to a collection from,our shopify store,you see here,that while hovering image images are not,changing right,in the collection page so how to achieve,this i will be also sharing the,custom coding in,description to a link so you can copy it,from there but these are very straight,according to you don't worry about that,so for this you have to apply like four,effect here on the products images,to show this last image on hover,of any product in the collection page,for this you have to simply,if you are in,shopify you have to go in the admin site,and from there you have to click on here,in the themes and on the right side of,your publish active theme on which you,are working first of all make a,duplicate so you don't have any problem,after re-backing up,so just click on edit code,after clicking on edit code,you have to simply copy these three to,four lines in the,product create dash,items dot liquid you have to look for,this file inside your theme,in the snippet,in the edit code,okay,so here if we go to the snippets on the,left side here you will have to find the,product,dashboard item dot liquid so inside this,fee on,file you have to search for,arrow img html tag first tag,is starting from here on line 79,so you have to do this you have to just,copy few,things,here,i'll be sharing with you that what you,have to do,sorry for this,okay inside here,you have to copy all these things i will,be sharing with you this will be,shared in the description a,link so you can copy it from there,first of all you have to copy this,line of code,copy it,and then,paste it above just above this imd first,img tag,in the product dash grid,dash liquid this file right,inside snippets,so just above the i am you have to paste,that,line of code we have just copied like,this the reveal class,and then secondly you have to close this,revealed class div,by copying this closing tab,ctrl c,and then you have to go there and just,look at,here,if you,close this one and,see you,you will be,if you will clicking on this arrow it,will be showing that this is closing,here right in the 84 line at the very,end,after this closing you have to place,that div,you just copy paste it,below this,closing arrow,and then you have to copy the file in,the third one the third line this one,this time copy it,and then paste it just above this,closing tab,just above this paste it here,and now you are good to go for product,create dash items dot liquid this is all,done in this snippet now we'll have to,move forward towards,this,styling of this reveal class we have,applied here dot r e b e l,so you have to look for assets in some,themes it will be named with,theme.css.liquid like this and something,it will be called theme.scss.liquid,and somewhere it calls style.css total,liquid somewhere in the down to s,os 2.0 it is called base.css so you have,to go in that file,of css in the assets,at the very end you have to copy this,remaining,above code from,here the comments are ignored you can,also copy it no problem,you have to copy it till here,okay about this is just uh,heading so copy it ctrl c,and at the very bottom you have to paste,this code the real class code like this,right,so you have to don't forget to save it,while editing the code after saying it,will say as it's saved,now you will,you see first it was not hovering now we,will refresh it,after refreshing once we will take the,mouse over on the image,you will see that,it is hovering,right it is showing the last image,inside the product image,on all the images in the collection,pages so this was a simple tutorial of,how to apply,image hover effect on all the product,images in the full specific collections,in all collections,on shopify in anything,if you find this tutorial helpful do,like the video subscribe the channel and,promote it to your,loved ones,thank you so much for watching this,video,have a great day take care bye bye

Congratulation! You bave finally finished reading how to add the rollover image in shopify and believe you bave enougb understending how to add the rollover image in shopify

Come on and read the rest of the article!