how to float an image in shopify

hello shopify world my name is andrew,from ecom experts dot io but you already,knew that and in this video,i'm showing you how you can hover on a,picture on the collection image you know,and see another picture,yep that is correct that's actually a,request that we get quite often so it,would look something like this,in the end result basically when clients,hover on collection images they just see,another picture of the product instead,of just the same,picture so how do we go about that well,we're gonna jump into the online store,in just a second before we do that,below in the description there is a link,if you follow that link,you put in your information you're gonna,get an email with all of the code,that way you don't have to like pause,the video and kind of figure it out,now you can just copy paste it just like,i do it in this video,beside that link well a little bit,higher there is a subscribe button and,it would mean the world to me,so i got you all right all right all,right let's just jump straight,into the uh store right here so this is,a very very,ugly um store and,i'll show you how ugly it is right now,you can see it,this is what it looks like we go to the,catalog,page and if i hover amen and happen in,here,you know i want to see another angle of,these beautiful,jewelry by the way this is like the,stock pictures,shopify gives um all right anyway so,nothing happening here i'm not,bamboozling you so first,things first is we're going to go into,the online store right here,and if you've watched multiple of these,videos you know how important this,is you need to duplicate your theme,before you start,so you go actions duplicate if you do,not do this you are an idiot,excuse me the reason is,because if you make a mistake you're,making it on a duplicate version and,it's not crashing your life side,if you don't duplicate it and you make a,mistake,you are a scream,all right anyway as you can see it's,copying right now and we will be working,on,this version right here so,now that you've looked below on the link,and you have,the the code file open as well you,received it in your email,you can click on actions and we're going,to go edit,the code it should look something like,this not like this like this and,so what you'll be doing is you'll go,here to the left you'll go,all the way down down and you'll go to,assets in the asset section you'll go to,team.scss.liquid,it is a ginormous file that should look,something like this,uh basically this is the file that,defines,all the little colors and padding and,spacing throughout your entire website,for every single device,so what you're going to do is you're,going to go all the way down to the very,last line,right here and then you're gonna put,enter a couple of times it doesn't,matter how many times,doesn't matter and then you're going to,paste in,the code that i've provided you in step,number two in the document if you follow,the link,down below paste all right,it should look something like this when,you paste it it should start with,reveal module,make sure that this is a light gray this,entire section if it's not you mispaste,it,and it should end with two not one,two curly brackets again very important,two curly brackets right here okay once,you have that you can save,boom is it safe it is saved asset is,saved roger that um,and we're going to go into step number,address,for this we're gonna go into the snippet,directory here on the left,so click on snippet and we're looking,something in the lines of,product grid let's see here actually the,easiest way,is to take the title that i uh,provided in the document copy go all the,way above do search,files and we paste that,and there you go a snippet called,product dash card,that's grit dot liquid,click on it and then we're going to be,pasting everything,yet again so this is much smaller,we're going to do command all command a,on the mac,control a on a windows delete so,all the code is gone and then we can,right click,paste boom that's it,that easy we save it,and that's like literally it,it doesn't get much easier than this now,um,if we go to products i will show you it,will pull the second picture of a,project,as the um the picture on hover so,this one it's going to show this one,when i hover on it,um now remember we have,not worked on the live team we have,worked on the duplicate team in case we,made a mistake,so now we go to online store theme so we,are here,we click on action we click on a preview,and we see oh look at that now when i,hover on,images it shows me the second picture of,the,product and here you might be like,andrew's not working,it is working it's because there wasn't,a second picture on this product so it's,not showing anything,but as you can see it works perfectly,fine let's go to the catalog,to confirm it and there you go,now i do recommend uploading the first,and the second picture in the same,dimension so you don't have this,happening,it's a bit awkward but yeah so we,agree with the preview we did a good job,nothing has broken,so what we're going to do is we're going,to get out of here,we're going to go back to online store,we're going to go a copy of the debut,team which is what we worked on,we're going to click actions and we're,going to click publish,we're going to ask us if we're sure that,we want to publish this version that we,just worked on,and that everyone can now see it and,we're going to say yes we are sure,let's publish this so there you go,now our copy of the debut team is live,and,our changes if we click on the site are,live as well,so this is actually a much requested,feature that,you know people want to give different,images it helps conversion,it slows down the store a little bit so,it's a double-edged sword make sure to,use heat tracking and heat mapping,to see if people are actually using this,feature,and if you're like what is heat mapping,you should check out this app review,video that i did that's,going to explain in just like 10 minutes,how you have to do heat mapping,for free even is it free i don't,remember,i think it is free anyway i hope you,enjoyed this video if this,actually was useful make sure to tell a,friend about this,channel because it takes a whole lot of,effort and work to make all these coding,videos,my name is andrew from ecom experts dot,io i hope you subscribed i will see you,in a shopify app review video or maybe,some shopify strategy,or maybe another shopify coding video so,adios,you

Congratulation! You bave finally finished reading how to float an image in shopify and believe you bave enougb understending how to float an image in shopify

Come on and read the rest of the article!