Shopify Homepage Banner Size. How to Edit and Size Your Shopify Banner.

what's going on everyone. it's jamie here from shopify masterclass and today would be covering homepage banner sizing: what's the exact size you need for your shopify store? we'll also go over an example on how to edit it and make sure you can fit your homepage image into the desired image size so you can get a really nice looking banner on your homepage. as if a customer loads the home page, this is going to be the first thing they see typically, so you want to make sure it's looking really good, and so we're going to go over how you can do that exactly using a few free tools today. so make sure you stay to the end of the video here. before i dive into it, i just want to thank our sponsor, profitcalc, the one-click profit calculator app available on the shopify app store. it's going to allow you to skip those spreadsheets and get back to growing your business, and it's going to come with a 15 day free trial. there's a link in the description below to check that out. i'm just going to show a quick video detailing their full feature set. discover profit calc, the affordable and easy to set up shopify app that crunches your numbers in just one click. it automatikally syncs with all your accounts and expenses to calculate your profit, displaying everything in an easy to read dashboard so you understand your business in real time. start for free on the shopify app store today. so now let's start with our home page banner creation. i'll pull up a handy guide here from tiny image showing the exact dimensions you need for each of your banner sizes. so here we're going to focus on image with text over like banner images, and that's going to be 1800 by 1000.. so let's use that here when creating our banner image. let's go through an example step by step, from finding an image to actually adding that to our banner here, and sometimes it can take a little customization depending on how you want it to look on both mobile and desktop. let's first head to unsplash here, the internet source of freely usable images, and so this test shopify store i'm going to use is summer theme that's going to sell surfing stuff, so i'm going to search surfing here so i get some nice images. now i'm looking for something a little more horizontal to fit across that banner. i'm first going to download that and then we can use that and customize it to the exact size and dimensions we need. so just downloaded this image here. now i'm going to head to canva, which is a really great way to customize image sizing and it is free to use, which is very awesome there. so once you head here, you want to hit create a design in the top right and hit a custom size here, and so we go back to the cheat sheet here again looking for an 1800 by 1 000.. let's enter that in 1800 by 1000 and hit create a design. this is going to be measured in pixel. next we want to upload our image, go into the upload section in canva. once that's uploaded, i just want to click on it and i'm going to get it to fit within this banner size. so it's going to look nice in my shopify store. so i'm just going to drag it here and try to get a good position, making sure it fits the width. then i'm going to stretch it a little bit there and just like that looks to fill up most of the image. once i'm done, i just go to share. in the top right, hit download. if you do have canva premium, you can compress it to a low file quality. i'm just going to leave it like this right now and download that, let me to note, if you don't have canva premium. you kind of want to compress your homepage image so it's not going to take as much space when loading it, as images can be quite memory heavy. so you want to go to a site like tiny png, upload your banner image here and then download that. it's going to compress it by quite a bit. so you can see: the original image size is 2.7. with tiny png here, you can compress it down to 680 kilobytes, which is significantly smaller by around 75 percent. all right, so now we have our banner image. let's head into the online store section so we can get to our theme customization options. hit the customize button here on the theme page. it's going to bring us to our homepage. you already have a sample image in the background, but you want to head to the slideshow section or the banner section of your website. you want to click on that. head over to the image. want to hit upload here for the images as well? i'm going to upload the image i just created. i'm just going to wait for that to upload here. now that's uploaded, i'm just going to select it and, as you can see, it fits extremely nicely as a banner image. we have the full width here, along with almost all the details that were in the regular image. so i think that looks really great. if we check the mobile here, we can see it compresses nicely as well. i've also just changed the text description there so it looks a little nicer with our surf shop. so overall, that's how you add a home page banner. that's how you edit the size so it fits correctly. overall, it's quite an easy process. it's a little know-how in terms of how to get the right sizing. you can experiment with different sizes as well, depending on your image and how you want that to show up, so it can take a little testing there. but overall, this concludes the video. if you enjoyed the video, i would love it if you hit that like button and that subscribe button below. if you have any questions, leave a comment. if you haven't yet check out profit calc- the one click profit calculator app available on the shopify app store, it's gonna come with a 15-day free trial. there's a link in the description below. thank you so much for watching and i'll see you in our next video.

Change Logo Size | Shopify Tutorial

this tutorial is powered by askquesticom. get help with your website on demand and don't forget subscribe for more tutorials. hi everyone. so the question is: how do you make the logo on your shopify site bigger? so i'm going to show you how to do that. i'm using the brooklyn theme here, just kind of the default theme, and what you're going to want to do is you're going to want to go to customize and we're going to go to our header section right here. all right, so we have our home page logo right here. from this homepage logo, you can add your custom size to whatever you want it to be. so say, i wanted to make it 450 pixels, so that's that size. or say i want to make it 250 pixels, that's that size, so that's going to change the width in pixels. now sometimes, um- and i know in some themes, after doing it, this might not work exactly how you need it to work. so what you can do: if you go to, uh, your site, i'm going to refresh this, so i'll show you what's going on here. all right, so if we go to our site and if we right click here and we go to inspect, or you go to inspect tools, whatever you're using from a firefox. we're going to hover over our logo image here, which is this, and we're going to see this code right here. so it says max with 250. so that's what we left it as. so what you can do, you can actually change this. so i can do a max width of 500 pixels and you see that the the image didn't change any size. so pretty much what this is saying is that this logo can only go as big as 500 pixels, no matter what screen size. so what you could do for it to be changed is add just width and then 400 pixels. so that's what's going to look like. so, as you can see from here, it got a little blurry, so you need to be careful with this. got to make sure that your image is big enough in order to be scaled in that way to make it look good. so if we wanted to add this to the site, if i go back to maybe 260 pixels. so what i'm going to do is i'm going to pull this code right here and we're going to go back to our site and from here we are going to go to let's get that out here and instead of going to customize, we're going to go to our actions and go to edit code, and from edit code, you're going to go and scroll down and we're going to find: believe it is fine, i'm just going to type this: awesome. so themescssliquid- this is the uh asset that you need to add your code to. so if i scroll all the way down to the bottom, this is where all your uh css is stored, all your styling options for your feed. so if we add here our custom fold site header, logo image for the bracket that i add, max with 500 pixels and width of 260 pixels- and you can adjust this to size whatever you need, i'm making 160 pixels- and then close your bracket and click save and also add a comment here if you want to kind of remember where you added this stuff, um, if you want. so that's been saved. so i'm now going to refresh this page. awesome, so i refresh this page. you can already see that the changes are there. if i hover over this and click into it, you can see that the width of 160 has changed right here. and again, this kind of depends on the theme that you're using. more often than not, what's going to be used is what i showed you originally, whereas if you go back to your themes, go to customize again, and if you go into the header section, you can customize in pixels what size you want your logo to be, and shopify is pretty good at you know, adjusting kind of the position and what it looks like, um in this place. so that's what. if you can use that and it works for you, that's definitely what you're going to want to use, um, instead of just adding the code again. some uh themes don't allow you to do that, so you're definitely going to want to have to adjust that as respects. hope this helps and have a great day. thanks for watching. if this was helpful, please subscribe, and if you need extra help, visit askquestcom and send us your questions.

More:Google NLP in SEO (এসইও-তে NLP এর আদ্যোপান্ত) | On Page SEO & Content Optimization Guide

How to make your logo bigger on Shopify. Coding in Shopify with Russian subtitles.

hi, my name is veronika. I do web development and Shopify stores. I'm russian-american. in this tutorial I will do in English and in Russian. I hope you all having fun doing Shopify stores. and today I will give you the most comprehensive tutorial: how to customize your logo. so at the end of this video you will be able to make your logo absolutely any size you want and you will see that it's not difficult to do. so let's get started. I've already logged in in my store and we click customize header in sections. here I downloaded my logo and you can see that you can custom your logo width and maximum. it gives you to 60 pixels. to make the logo bigger. we can change the code for that. we go back to the main menu and with click actions is it code, and here you can see on the left side sections layout, template and we scroll down till sections header liquid. here I click either liquid and then for the search. here we gonna press ctrl F and if we type logo we can see that highlighted logo everywhere. but because we know that we are looking for the number 260 pixels, we can just type 260 and find our script here faster. so here is 216. we found very fast and we can change here the maximum width of the logo. let's make it 300, for example, and click Save and go back to the store customized. Heather, and you can see here we have 300 pixels and I will locate getting bigger. then if you would like to make it any number you like- 500, 600 pixels and your picture is in high resolution- you can go ahead and change the code in different section of actions. so we go back and edit code here we search in for asset section and we're looking for theme as CSS liquid placed at. then we go into type control: F logo. here we can see the width of the logo and it's very important that if you want to change this section, you scroll down and you write this code. make sure to write it very accurate, because then you want to break any program. this code- comma site header- no mistakes- is very important for you to work and let's make it, for example, 600 pixels or whatever you like, 800 pixels. you can play with numbers and click Save. go back to your store- customized. I hope this video was useful for you and maybe solved your problem or you learn something. you then subscribe to my channel. if you have any questions. please comment below until next time.

More:E-COMMERCE : La stratégie à adopter pour définir les MEILLEURS PRIX de vente pour tes produits

How To Add Logo for Sticky and Transparent Header - [Shopify Dawn Theme]

Hello everyone, welcome to WebSensePro. I'm your host, Bilal Naseer, with another Shopify tutorial video. this video is a follow-up video of the previous video which I created. so that's the old video which I created in which I taught you guys how to make stiky and transparent Adder using code without any app. and this video is a follow-up video because when I created- uh, the stiky and rash parent had a video- I got lots of comments from you guys that we need to have a separate logo for transparent header and separate logo for the normal website. So currently, after implementing this tutorial, you will be able to have the transparent header, like this transparent and stiky header. so it's stiky throughout the website. plus, when you scroll to the top, it's transparent. but after implementing what I'm teaching you guys today, you'll be able to have a separate logo. so take a look at this one. so I have white color logo when I am on transparent header mode, but I want. but when I scroll down, it will change to the different color logo and that's what you will learn in this video. so if you want to learn stik to the video, don't forget to subscribe. okay, and comment on the video below. so, without further Ado, let's jump into the chord foreign logo for our transparent header. and in order to implement this, you'll have to first follow the old tutorial- the previous video tutorial which I created for you guys, and once you have successfully implemented that tutorial and once you're seeing the transparent header on your Shopify store, only then you will be able to implement this, because I'll be adding CSS code which is on top of the old code which I already have added in order to achieve the transparent and stiky header. so let's get into the back end of our Shopify and I'm gonna go to slash admin and from there, once it's completely loaded, I'm gonna click on sales Channel online store and from there I'll added the code. so that's my Dawn theme and I'm working on 0.7.0.1, so that's the uh Dawn theme version which I am implementing this tutorial to. I'm gonna click on these three small dots and then click on edit code. before editing the code, I keep reminding you guys: please duplicate your theme. so if you can, if you mess up anything with your code, you can easily revert it back, because I get lots of emails sometime that after implementing your code or site got messed up, and I keep repeating that again and again: that please to have the duplicate of your theme so in case you mess up, you can easily revert it back. okay, now let's edit our code and from our code editor I'm going to search for header, dot- liquid file. and that's the file where where I will add additional CSS code. okay, and in this file I'll search for Style. so let's search for bracket percent and then style. that's the code which I'm going to search for and that's the code which we added when we were implementing transparent and stiky header, and I'm going to add the CSS code just above the end, Style. and that's the CSS code. so when you copy the CSS code, you will have to change this URL. so that's the URL which you will need to change it from your own log, own logo, which you want to display when your transparent header is enabled. so this will only work wherever your transparent header is showing. so I'm just going to copy this code and paste it here and hit save and let's wait for the file to save. okay, once it's saved, I'm gonna go to my website and hit refresh. and here we go. my white logo is showing up but, as you can see, it's a little cutting off. so what I'm gonna do? I'll adjust the width and height as per the old logo. so there is, this is width and height. so you will have to adjust width and height as per the whole logo which you have. so in order to do that- because it might be different for every uh other logo and it might be different as per your header settings- so I'm gonna go to this black logo and click on inspect element and from there you can see. so when you hover over it, you can see rendered size, which is 150 as width and 63 pixel as height. we will use the same width and height in our transparent header logo. so I'm gonna change my width to 150 pixel and height to 63 pixel. make sure you add the width and height as per the original logo which you have. only then you will be able to see the full logo. otherwise, your logo will cut off. Okay, now click on Save again. and now let's hit refresh. and there we go. as you can see, we have a different logo on our transparent header now, and it's pretty easy to implement. you just need to upload uh the different color logo, copy the URL and add it here. so in order to upload the file, you'll go to the back end of your store, click on settings and from there click on files and here you will be able to see all of the files. so I just copied the URL from here and added in my CSS code. so that's, when you click this button, you'll you will copy the URL on your clipboard and all you need to do is just copy it and paste it here on your CSS code. and once you paste the code and hit save and adjust the width and height of the logo, you will have a different logo for your transparent header, which will work completely smooth and it will look good on desktop. and now let's test it on mobile as well, and if we test it on mobile version, looks fine in Mobile as well. take a look, looks good, right, perfect, okay, guys. so, uh, that's it for the tutorial. I hope you guys liked it. if you do, please comment on the video below, share it or with your friends if they are using Shopify store and if they have implemented the tutorial. until next video, have a great day.

Use svg images in Shopify | SVG Header Logo or Any Places

so this is a short video about SVG images. while working on Shopify you may face this problem like you need to upload is busy images as a hidden logo or any places in the code or visualize section, but you can't do that. let's look at this scenario light now. this is a default theme in development team. I just copy the main thing and go to customization and hit a section. first we try to uploaded images, default images like this images to let pre-boot de maiz got changes. now we're trying to change the images like there's busy images- Roberto is busy because this is a bit current- default images. the images is not recognized as a format, so it can't take in Shopify's. what we'll do? we'll get to go to the coding section and then the asset section. I already upload a logo: dot s DZ. try to replace that. ok, this is the logo rotates busy. now we'll go to the header section. this is the header section. I already open that. on the header section you have option call logo like this is a logo section. ok, this is now this work: this: take the settings logo and use it here. what we will do will statikally use the SVG logo here. so first we assign the is busy logo and the asset folder is the folder. try to remove that and in this section we'll don't use the lazy load. so try to know that, because it is a lightweight format so you don't need any kind of lazy loading here. so lipless the variable: no need data widths. let's try to save that. okay, so you have pivot from here again. okay, the low work changes so by this way you can use this base images in Shopify as they doesn't. support is busy. updated upload. sorry, uploaded. thanks for watching.

Change Banner Size | Shopify Tutorial

this answer is powered by a squatty comm. get help with your Shopify questions or tasks on demand. today we'll be looking at the surface. I site micro flats and we'll be making the lighter that shows on the homepage larger then it usually is, and I'll show you how to get that done using CSS. so we've actually already a play that change here. so this banner is actually much larger than it normally is. so here's what it looks like when we apply that change. so this section is really large and this is what it looks like normally larger and that's the normal size. great, so you can see the difference there. so to make this larger, what we're gonna do is to apply some CSS and to do that, what you're gonna do is to going to the backend of your shopping shopping site, go to customize theme and again click customize theme. you're gonna click the drop down button, está options, and go to edit code. you're going to scroll down to the asset section, the assets tab here, click on that and that's your going to click where it says theme dot s CSS liquid. so we're gonna scroll down to the bottom of this page and we're gonna add our CSS code right down here at the bottom. so to make that full width, what you're gonna type is hash tag: SP Slater got container and right now the default width is about 1200 pixels and you're just going to set that to a larger size. so I'm going to set it to the 1400 pixels and you can set it to whatever size you feel is best. I'm going to add exclamation mark recording at the end and I'm just going to hit C. so this is my Shopify site is not the same setup as or using the same thing as what Michael class uses, but we can see the difference here in our site. so I'm just going to this: open a new tab, paste that URL in and in here we can see the difference. so this is what a regular site looks like. and if you look like here on our t-shirt collection, it's much larger and that's exactly what we're going for. and when you apply those changes on your site by putting the add these two links in your style sheet, you'll get this same effect where your banner is much larger than the regular size. was this helpful? ask a Shopify question now. ask questi com.