Shopify Debut Theme Customization | Debut Theme Design Tutorial

all right, guys. so in this video i'm going to be showing you how you can go ahead and customize your debut theme within shopify. so debut theme is the theme that all shopify stores start out with by default when you go ahead and start a shopify store and if you haven't already opened your shopify store yet, you can start your 14 day free trial by clicking the first link in the description. so i figured i'd make this video because debut theme is one of the most commonly used themes, because it's the one that all stores start out with, and the view theme actually looks really good. so right here we can see that this is what debut theme looks like when it's first installed, with absolutely nothing filled out. so we can see that we have where our logo should be. we have a big header right here with some text. we have an image here, we have three images with text. below here we have a uh empty collection and we have another um header type image. right here, another wallpaper image. we have some testimonials and we have three images down here. and then we have the footer. so right now we have a nice little template, but it's blank. so if you're looking to go ahead and fill out your um store using debut theme. the first thing you're going to want to make sure you have is a few key things. so i'm going to bring up a notepad and just make sure, because before you go ahead and start the design process, you're going to need a couple things. so the first one is going to be a logo. so i assume you already have a logo at this point if you're ready to start your store design. but if not, then make sure you get a logo first, because everything else is going to be based around the logo. and then we're going to have a color scheme selected and normally this color scheme is going to be derived from colors from your logo and typically you're going to use one to two colors to base your entire store around. and, like i said, these colors will be derived from the logo. and the next thing we're going to need is a couple wallpaper photos so we can see. we're going to need some photos to go ahead and put back here in this header. we need some photos to put back here and this header as well. so if you have any large photos related to your business, go ahead and upload them to your computer or put them all in one folder so we can go ahead and use them as backgrounds here, and, if you don't, you can use different sites such as pixabay to find free stok images that you can go ahead and use. so let's just type in something like fishing, so if you had a store related to fishing, you could go ahead and just look for different stok photos here. or maybe you have something related to yoga or fitness. you can type in a lot of different niches, depending on what your store is based around, and you can use some of these wallpapers to go ahead and put back here. now, obviously, i do think it's better if you have your own custom photos, but uh, you know, not everyone's gonna have that starting out. so if you don't, you can go ahead and use pixabay to get some related photos so we can see that, based on the template here, we're gonna need at least one and two bigger photos, and then we're going to need about five smaller photos to go ahead and put in here, in here and down here. now, one thing to keep in mind is we don't have to go ahead and utilize every one of these sections, and i'm going to show you how you can add and delete sections. but you just want to go into the design process with all of these different things in place already, because it's going to make things a lot easier. so make sure you have a logo, select your color scheme based on the logo, have a couple of wallpaper photos, have about five, you know. maybe, maybe in five to ten smaller photos, they can be in your product, they could be something related to your business. but just make sure you have five to ten smaller photos and then make sure you just have, like, business details, so like slogans, taglines, selling points, uh, just different type of details that we can use to go ahead and fill out this uh page with. so, that said, i'm gonna go ahead and get started with customizing this. so, in order to customize the theme, all we have to do is come over here to online store themes and then click customize. now i already have, um, all of the stuff that i'm going to put in to the design, all the details that i'm going to put into design, prepared ahead of time, which is, like i said, what i would recommend you do as well, because getting all of this is pretty much the first half of the work done. it's just getting what you're going to fill in the store with, and then, once you have this, it's literally just about filling in and then customizing different sections and getting rid of certain sections. so where we pretty much start things off is with the header. so if we open up header right here, the first thing we need to do is upload our logo, which we can do right here by selecting an image. so all we have to do is click upload and i'm going to go ahead and upload a logo right here and i'm going to go ahead and click select and then we can go ahead and customize our logo width right here. so i'm going to go ahead and make it big and we can choose whether we want this centered or to the left, and i'm going to keep it to the left right here. and the next thing we can do is change the menu we have here. we're going to just keep this as the main menu and then we can come down here to announcement bar, and a lot of the time you'll just go ahead and show an announcement mark so we can kind of put an announcement up here. so this is where you can put something that's relevant to your business, whether that's, you know, like a discount, you're running a promotion, you're running free shipping or just any type of details really that have to do with your business. so in this case- uh, the example design i'm going to be going for is a local cookie business, so i'll go ahead and put something like this and then down here we can go ahead and paste a link if we want this to link to anything. so if you are promoting, like a specific sale, then you could have this link to a specific sale. in this case, i'm going to go ahead and not link to anything. and this is where the second part- right here, the color scheme- is going to come into play. so we want to make sure that our store looks fluid and looks like it kind of blends together. we want to make sure that it actually looks good. so in order to do that, we need to have a set color scheme. we can't just have random colors wherever we want so we can see how if our logo is brown, then we probably want to stik to this type of color scheme. we wouldn't want to come down here and make this any color like this, because that just doesn't fit in at all. so what we want to do is find the exact color from our logo. take one of the colors from our logo and there's one of two ways you can do that. one is with a photo editor like photoshop, which i'm going to do right here. i'm going to just use the color picker and in this case, the most prominent color in the logo is this darker brown. so i'm going to use that and then i'm going to take this six digit code right here and use this to match the exact color. now, if you don't have photoshop or photo editor, you can just go on google and search up hex color finder and actually, if i go really quick, if we go to hex color, if we go, actually i believe it's hex color finder. uh, yeah, it's this site right here. so, html- color codesinfo. you can come here, you can upload, uh, your logo like this, and then you can just click and you get the same exact color code right there and we're going to be using this code for the rest of our designs. we're going to go ahead and put in that color and now the brown goes ahead and matches our logo right here. and as far as the text for what's going to go up here, normally you're just going to decide what looks better on the background color between white or black. so if we go to black, i personally think that white looks better, so i'm going to go back to white. and now we're done.

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.

More:Pourquoi je pense que les hommes doivent rester célibataires

How to Reduce Slideshow Photo Size ✅ Shopify Tutorial for Beginners

here. you are welcome back to my channel. in this tutorials. i am going to show you how to redo slideshow photo size in your shopify and restore. so this is very easy and quick tips, tutorials for you if you are using shopify for your own instrument. so let's get started. [Music]. first of all, i'm going to log in my shopify online store. so this is my shopify online store dashboard and i'm going to open my website homepage. this is my website homepage and i wanted to redo the slideshow image size. so to do this, i'm going to click on the inspect, then select an element. i wanted to select this one here, winner. so i have selected this slideshow and now i'm going to change the height into max height- max height. then i can make any size of this image. for example, i want to make this size 250 pixel. and now i'm going to copy this rule and go to my dashboard again and click on the online store. now going to click on the action button- edit- good, open the css file, go to the bottom place- this scoot hero loves- max side- 250 pixel- then click on the save. okay, we are done. now i'm going to reload my page. wow, looks good. it's working fine. so thank you for your time to watch this video. if you think this video and tips helpful for you, then click on the like button and subscribe to my channel to get more video notification in your mobile. have a nice day. bye.

More:8 AliExpress Products To Dropship on Shopify

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.

Shopify Tips: How To Setup Sticky Headers For Debut Theme 2020

hey, hey guys, welcome back to another video. are you tired of your uh header up here just disappearing every time you scroll? you want it to be more like this, just visible the whole time. tell us to look better in some people's opinion, but i'm gonna show you guys how to do that right now. so what we're gonna do is we're gonna go to our home page on shopify, scroll down to online store. under online store, you're going to, um, you are going to click actions. oh no, before we go up here, we're going to do a customize. there's one uh thing you want to be sure to have for your stiky headers. so what you do is you go to header. so let me go back. you go right here to header and then you make sure it's left aligned because it's going to be locked in like this every time somebody scrolls. so i guess you don't want to take up too much of the real estate on your website. you don't want it to take up too much space, in other terms, um, so let's go back after you do that and save it. just go back to the home page and from here we're going to click on edit code. so under edit code, we are going to. we can close these folders. we're just do the assets folder. so we're gonna click on themesscssliquid. and this isn't like um. this coding is not supported by shopify. so when you do this, be sure to make a backup. if you don't know how to make a backup, i'll show you how to do it. now. all you do is come here and just duplicate this, and when you duplicate it, it'll create a copy and you can try this method under the copy. so we'll, we'll do that. let's refresh the screen real quick. well, you can just go into edit code under the copy. so if it doesn't work for you there, it's not going to break your website because you're using the backup and for this we are going back down to this. also, let's close these folders up here. we're back into assets. so themescssliquid right here, and it shows it up here. we're in this, and let me zoom in a little bit for you guys. so, to start, the best thing to do is to: um, go all the way to the bottom, scroll all the way down. you can just grab this gray box over here and drag it all the way down. oh, it doesn't show anything, but all right. so all you're basically doing is going down to the last line- you're not doing anything special- and that first code block of code that is in the description, you're going to copy that whole thing. you're going to copy that and then you're gonna come here, you're gonna paste it right at the end and that's the first part. so it should pretty much be this: on down, and from here you are going to open up the theme dot js, which is right here. click on that, you know, open up. and you're going to do the same thing. you're going to scroll all the way to the bottom. and let me double check real quick, guys. yeah, okay, so we're good. um, this just looked a little different, but this is fine, all right. so, yeah, we're all at the bottom and all we are doing is copying the second block of code in the description and you can just paste it in here. i'm pasting it by doing ctrl v or you can do command v or you can just right click. so if anything was to go wrong and you didn't follow my steps of making a backup, all you have to do is just, uh, come in here and see what code like: come, come into these files, go back into the video and come into these files and go all the way to the bottom, find them, delete them. that's deleted. and then you come to this one under and then delete it and your website should be working again. but be sure to make a backup because if it saves you the hassle having to deal with any issues, if it doesn't work, you just delete the file or you just delete that on backup. that's it. so right now we're just going to save both- that one saved and this one is saved, and we are going to go back to themes and under the copy of debut we're going to click actions and then preview. now let's see if it worked. and it worked. we got a stiky header. is not going to move as we scroll down. this was the old one and you see how it just disappears right away. this one stays around. so i hope i was able to help you with this video. it's pretty short and um. thanks for watching. guys. if this helps you, leave a like, subscribe, and if you have any other issues on shopify, please be sure to leave comments below. i'm not going to be able to do everything, but whatever i can find out with some research, i'll make videos for you guys. so if i don't, you, if i don't make a video based off your comment, don't feel any type of way. i just couldn't find the answer to that either. but that's pretty much it guys. take care, peace.

How to Change Background Header Color in Shopify Debut Theme ✅ Easy Solution

hey, dear welcome to you in my youtube channel. in this tutorials i am going to show you how to change background color of header in your shopify online store. so if you are looking easy and fast video guideline, then you can continue this tutorial. so let's get started. first of all, i am going to log in my shopify admin panel, so go to my partner accounts. then login with my username and password. here is my shopify admin panel. then going to click on the i icon: here is my website and i wanted to change the background of this header. okay, i'm going to click on the right button of my mouse then select inspect from here. okay, then click on the inspect selector icon right here- looks very carefully. then select this section. okay, i have selected this section and this is header section. okay, now i am going to click on the plus icon, header, class, site header. then type background color: looks here: the background color changing. but i need to do a little bit more advanced type work. for example, i have to add this class also right here. okay, then i have to add border bottom 0- the bottom remove. now. now we can change the color from here as our need. looks here. it looks good, okay. so it's super easy. just click on the right button of your mouse, then select copy rules. then go to the admin panel, click on the online store, then click on the action button, edit code type c: access here and open theme css file from the asset folder. go to the bottom of this file then paste this code that we have copy from here: header class, site adder class site header, underscore, mobile nav, background color and bottom zero. then click on the save button- asset save. and now going to refresh my browser, so click here to reload. wow, the background color has been changed and you have to change your logo matching with your header background color. so i hope you understand the process and if you want more quick way, then just copy and paste the css code that i have added right here and you get this code in the video description and in the comment section. so thank you for your time to watch this video. if you think this video is helpful, then click on the like button and subscribe to my channel, and if you need any support or service- relevant shopify- then you can contact with me. have a nice day, bye.