how to make hero banner load faster shopify

in this video i'll show you how to use,hirabana application on your shopify,store and give some tips and tricks on,how to create an excellent first,impression for your users,let's get started once you install the,app you learn on this page,so to start using hirabana just click on,the customize theme button it will take,you to the familiar page where you edit,your store,before you make any changes i would,recommend creating a copy of your,current theme,once you'll be satisfied with the,changes then you could publish it,another way of doing that would be to,create a copy of this theme before,installing an app,and checking the performance before and,after once it is done let's get to it,and create our new hirabana on the left,just click add section and you'll find a,new section called pixboost hirobana,under the image category,let's select it and click add button,i think the first thing to pick is an,image,i like cars so i'll go with this bad boy,click select and the next thing to do is,to click,edit button and set the text in this box,usually you would set something that,describes,what's happening on the image in my case,it's red caster that's what i put there,this text is an alt text and it's a,image description that visually impaired,people can read with screen readers,also web search engines like google user,text to index images,the next option is overlay and overlay,the semi-transparent dark layer on top,of the image it improves contrast,between,text and image you could turn it off if,your image is dark,you could see that in my case the text,is much more readable with overlay,turned on,section height gives you four options,small,medium and large,the adapt to image option,is to show a visitor the whole picture,without cropping it,in my case i'll go with the latch option,in the next option you could pick,between two layouts,full widths and fixed tweets,when the full width selected the image,takes 100,of the screen if you pick fixed tweets,then you can control the width of the,banner using section reads,here that is useful in case you have a,monotone background,on the image let me show it to you let's,pick the other,image here let's use this night sky,so you could see that the image,background is almost black so there's a,background color here,as you could see visually it still looks,good but it also makes you hear about a,much more lightweight,now regardless of the screen size your,users will always download image,1000 pixels wide on the big monitors,let me show you another example with the,with the white background,so if we select this image and then we,change the background,color to white,then you can also see that it looks good,so now if we change the image back to,the red car,you see that with the red with a,the red car this doesn't really work so,let's go back to,full width,the next one is image alignment,most likely the image has been cropped,to fit into the space,of the banner using image alignment we,could set,how to align an image vertically in the,given space,in my case i think,the bottom option would work the best,because we could see the whole car,next on the list is animation animation,makes your banner more,catchy and improves engagement with your,customers all animations and fixbus,hirabana are javascript free and we made,sure they are not affecting load time,at the moment there are two animations,you could pick from,popping will make your image and text,appear sequentially one after another,zoom in will smoothly zoom,the on the image if you have some,animation in your mind that you think is,really cool please let us know and we'll,add it in the next releases,the next block of settings is for text,let's quickly go through it,the first option is the size of the text,you could pick from small medium and,large,he was mentioning that piglet heroin,doesn't use absolute values but special,relative values which makes a component,accessible for all people,if you're not sure what size to peak,then you could align it with,section height option so in my case i,picked large section,height and i'll probably go with a large,font size,the next two options are heading in text,and allow us to change the content in,the bundle,the heading is using h1 html tag and,will impact your organic search,so make sure that it clearly shows what,your cell and why people should buy from,you,you might also consider doing an seo,analysis before setting it,imagine i'm selling old cars then i,could pick something like,the best old cars but if i'm selling,old cars in melbourne for example then i,would put,the best old cars in melbourne because,that's a geolocation,that google will use,text color is the next one this one is,easy you could pick any color for your,text,make sure that it has good contrast with,your background,and you're good to go custom fonts,by default pics with hirabana will use,fonts from your theme,which is good because there will be no,additional data transfer,however if you'd like to,make urbana more distinguishable or,align it with your,branding or logo for example then you,could do it using these options,next up is button settings you could,place one button on your button,simply put text,and select the destination,and you're good to go,and finally if you have something,completely different,in your mind from what i showed,you could always implement it using,custom htmls needed,just tick this checkbox and put your,html,into the text area below,and that's pretty much it once you,choose all the settings don't forget to,quickly test your new one,in the mobile view using this button on,top,now you can give xboos hirabana and try,and get,more happy customers on your stock happy,selling and we will really appreciate if,you can leave your feedback,in in the app store

Congratulation! You bave finally finished reading how to make hero banner load faster shopify and believe you bave enougb understending how to make hero banner load faster shopify

Come on and read the rest of the article!