how to edit images html in shopify

hey this is ryan from web eminence.com,with some shopify tips to help you add,pictures to your pages and posts on your,shopify site,shopify is an e-commerce platform so,they obviously put,most of their development dollars into,developing the shopping aspects of the,site like,the shopping cart and the product pages,but if you've used the,page editor for the pages and the post,you've probably found that it's just a,basic html editor,and you do need to know a little bit of,html to make things work,and i'm going to show you how to add,pictures and make sure they're formatted,and aligned correctly because it's not,super intuitive with the shopify page,builder,so i'm here on a sample page with five,paragraphs of text,and the first thing to realize is that,it's important that the text is clean,meaning it doesn't have a lot of extra,code to it so if you click on the show,html button,on this page you can see it just text,with paragraph tags and those are the p,tags if you copy and paste text from,microsoft word or somewhere online you,might get a lot of extra text formatting,so if you see a lot of extra tags,besides the p tags,you may want to delete those or another,thing you can do is copy the text again,and then paste it as plain text so the,way to do that is,to copy the text from wherever you're,getting it,and then go on to the page editor,and then right click right by the cursor,where you want to paste it and select,paste as plain text and that'll paste,the text,and remove most of the extra formatting,and the reason for doing this is because,i realized that,inserting a picture with text that has a,lot of extra formatting can lead to,problems with,the formatting of the picture so if i,wanted to add a picture right at the top,of this page,i would click my cursor right before the,first character,and then i click this button here it's,an insert image button,the insert image box pops up and it,gives me the option of selecting from,uploaded images,product images i can use an image from a,url,or i can actually upload a new file,i'm going to go ahead and use an image,that is already uploaded so if i click,on it,it then gives me an option to select the,size,and then i can click insert image,so if i were just to leave the image,like that and click preview page,you'll see how the preview looks it kind,of creates some strange,alignment it's aligned to the left but,the text is not wrapping correctly,so it's important to go back to the page,editor,and click on the image and because we,clicked on it this button now says,edit image and it brings up some other,options so a lot of people miss this i,missed this when i first started using,shopify,because it's not entirely intuitive it,would make more sense to put an edit,image button right on the image that's,the way wordpress does it rather than,making,people find the edit image button,but for now you have to click on edit,image to bring up these,other options and you'll see we're,aligned to the left,and the important thing that's missing,is we need to click the wrap text around,image,so if i click that and then click the,edit image button,and let's go to the preview to see what,the editor came up with,and you'll see when you preview the text,one of the problems with,aligning images in the shopify editor it,adds this extra space,because of the paragraph tags this,paragraph,isn't moving up and wrapping in this,space like it should,and while i'm not entirely sure why that,happens,i do know how to fix it so you have to,go to the text editor,and in this paragraph tag where they add,style,float left you just remove that all the,way up to the quotation mark,and leave the paragraph tag there there,already is a float left style which is,going to make the,image uh align to the left,so after doing that you have to save the,page the preview doesn't always show the,change which is another problem,see the preview doesn't show the change,but if i go back to the visual editor,and then preview it it does show the,change,so now the text is wrapping around the,image the way it should,but you can see it's not as easy as it,probably should be in this text editor,you do have to manipulate the code a,little bit and mess with the html in,order to get it to work the way you want,the other thing that might be bugging,you is that the image is so close to the,text so shopify does give you an easy,way to fix that you can click on the,image again,click edit image and then,add 20 pixel margin to the right and the,bottom,then click edit image and then we'll,preview the page again,and you'll see it added some space,around the image,so let's try to align it to the right,and see if that works i'm going to click,on it again,click edit image and align to the right,i'll go ahead and add 20 to the left and,the bottom,click edit image it looks like it's,going to give me the same,problem so i'm going to preview,it and it is adding that extra space,so i'm going to go back in and remove,that,float right style from the paragraph tag,go back to the visual editor press,preview,and there it fixed that problem as well,let's try to align it to the center so,i'm going to click the image and go back,align it to the center and leave the,bottom,spacing click edit image,preview page and now we have another,problem it's,moving the tags around and it is center,aligning,the text but not the image so if i go,back to the code,you'll see that there's a text align,center,paragraph tag which is supposed to align,the image in the center,but actually this opening paragraph tag,is not closed until all the way down,here,so it's actually centering all of this,text as well,so what you need to do is add a closing,paragraph,tag here which looks like that and then,an opening,paragraph tag which goes with this,paragraph,i'm gonna go back to the visual editor,looks like it's gonna,work the way we want so now i have a,centered image with some spacing and,then the text,so again it's not working the way we,want the first time and you do have to,manipulate the code a little bit,which is frustrating because these,visual editors are meant,so that people don't have to manipulate,code but unfortunately with this version,of the shopify editor you do need to,mess around with the code a little bit,to get,the images to look the way you want and,some people might wonder,why have the paragraph tags at all if,they're causing so much,trouble if you do try to paste in,paragraphs like this,with no paragraph tags and then you go,to the visual editor it's going to lump,it all together as one paragraph,so you do need the paragraph tags to,keep the paragraph spacings,so hopefully that helps you if you're,having trouble adding images to your,pages and posts on your shopify site,i know most people are using a website,builder like this because they don't,want to,ever mess with html code so if you need,help with this you can contact shopify,experts online,and they'll be able to help you with,this if you want to get in touch with me,and see if i have time to help you on an,hourly basis,you can get in touch with me through my,website if you have any questions about,this process or having other issues feel,free to comment on the video,and i'll answer them as quickly as i can,please give the video a thumbs up on,youtube if it helped you,and make sure to subscribe so you don't,miss any of my future videos,you

Congratulation! You bave finally finished reading how to edit images html in shopify and believe you bave enougb understending how to edit images html in shopify

Come on and read the rest of the article!