how to change shopify site width district theme

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 stock 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 stock 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 stick,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 codes.info 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 with the header and,i'm going to click save and we can see,that now we've already,got a decent amount of progress going,so the next thing that i'm going to do,is we're going to start looking into,this section next which is right here so,we can see that,each one of these sections is correlated,to a section,on the debut theme preview right here if,i click on one,it takes us to that specific one so i'm,going to click on the top one,and we're right here so now we need to,go ahead and take one of our,wallpaper images so one of our bigger,images and,put it as the background here so we're,gonna go ahead,and upload this,and once it loads we're going to go,ahead and click select,and then right here we can change the,alignment whether we want it to show the,top half,the bottom half or the middle i'm going,to keep it centered and we can choose,between full width and fixed width,but in this case i think full width,looks better and then we can change our,section height so we can make it,tiny or we can make it really large in,this case,i'm just going to keep it as the default,of large but you can go ahead and look,at all these different ones to see,what you think looks the best for you,and then you can change the text size,as well in this case i'm going to stick,with large,and then right here we have the heading,text so this is where you just want to,put,something relevant to your business you,can just put something like welcome,or like the name of your store this is,essentially where you're just going to,put a greeting,and then right below in the smaller text,down here you can put something like a,tagline,so as you can see i've went ahead and,put in a few examples of that,right there and then we can also add a,button,so if we wanted like a shop now or an,order now called action button we could,put that in here,so in this case i would go ahead under,button label,and it shows uh what we put here is what,the button would say,so if i put order now,and then we have to select where it's,going to link so if i click on this,and i go to products and i select all,products,then this button we can see now it says,order now and this will take us to,our entire catalog of products right,here and you can see just like that in a,couple more minutes,uh the top half of our debut,theme is already looking pretty good so,i'm gonna go ahead and save,our changes again and we're gonna go,back,and now what we're going to do is go to,theme settings because we can see,that this button does not match the,color that we're going for,and there wasn't an option to change,that in there and that's because we have,to change it within the theme settings,so we're going to go ahead and open this,up and then click colors,and then right here if we open up text,we have the headings and links,so this is going to be like this color,text right here,and what i'm going to do is make this,all black,or full black rather and you can make it,uh whatever color you want to go with,however i think in this case all black,uh solid black looks the best and then,we have this,body text right here which is this and,i'm going to go ahead and make that,solid black as well,and then the sale price this is if we,put a product on sale,typically red is associated with sales,so i'm going to keep that,as read so the primary buttons that's,going to be right here so this is where,i want to open this up,and i'm going to go ahead and put in the,same color code,that we used for the announcement bar,and you can see it's actually in our,recently selected colors i'm going to go,ahead and just,select that right there and we can see,that now,that is already set up,and now our button matches and it looks,a lot better,so the primary labels is just going to,be the text,right here and we can see that we're,just going to go ahead and keep,that text as white because we already,determined that white,text looks good right here so the next,thing that we want to edit,on this page is the image overlays so,right here the image overlays is going,to affect anything,that we um have,an image in the background for so we can,see that it's going to affect this,and it would affect like this down here,it would affect this if we put text on,it it's going to affect anything that we,have an image with text,and buttons on top of so we can see that,if i,change the opacity,and it's going to take a second to,update but we can see that,it makes it very hard to see through the,opacity is just essentially,how thick the overlaid,coloring is going to be over the,image so what the point of the image,overlay is to make it easier for you to,read the text so,the lower the opacity,the more the text kind of just blends in,with the background image so normally,you want,some opacity just that way you can see,the text,easier so i'm going to go back to,where we were before at 40 but in this,case,what i'm going to do here is i'm going,to change this background because i,don't like this gray color here i don't,think it looks as good,and i'm going to change it to just black,and i think that looks a lot better with,the white text that makes the white text,stand out a lot more,so you can mess around and determine,which colors you think looks the best,but a black background,looks good a lot of the time but it does,depend on what text,you're using as well so that's all we're,going to edit,within colors and if we come back here,i'm going to go ahead,and open up typography next and this is,where we can change,our fonts now in regards to fonts i,would recommend,using more basic,easy to read fonts a lot of times people,want to use,fancy fonts that look cool which is fine,but,sometimes it's just a lot more of a pain,to read,so i will say keep your body text,with a very basic easy to read font,and if you're going to use a fancier,like handwritten,looking font then stick to using that,with the headings and buttons,so we can see up here this font is going,to change like our headings,and our buttons so like our headings and,then,body text is going to be all of the,smaller text all of our product,descriptions and things like that,so to show you what it looks like i'll,go ahead and change our heading,to one of the fancier looking fonts,and we can see that it's going to change,right here so it made our heading text,look like this,and we can see it shows up here and,shows up here,and it shows up as the product names but,we can see that the rest of our text,is still clear and easy to read and i,would recommend,sticking with a clear and easy to read,font,for the majority of your text if you,want to make your headings look a little,bit different,that's fine because it's bigger and it's,not like a big block of text,that's hard to read so i'm gonna go,ahead and go back now,and the next thing we can do here is go,to our social media so this is where we,can put in our different social media,links so any of,your social medias you want to just go,ahead and link in here so if you have a,twitter facebook pinterest,put in as many as you have for your,business you can just paste them,right in here and then the favicon,is next so the favicon is what's going,to show up here and the top left corner,for the site so you can see where the,shopify bag logo is,um you want to go ahead and put a one of,you want your logo rather to be up here,instead of the shopify bag,so what you want is a variation of your,logo that's a perfect square that has no,letters,or words or anything it's just like the,icon from your logo,so in this case i would upload it and it,would just be,like the cookie itself this would be the,favicon,and then we'd go ahead and put that in,there and save our,changes so at this point,that's all we would need to edit within,theme settings so we've already made a,lot of progress here,editing the debut theme so the next,thing we're going to do is we're going,to head down to this,second section right here,so this is where we if we click on it,again we can open it up and this is,where we want,one of our five to ten smaller photos,and some of our business details so we,would go ahead and select an image,upload and we go ahead and upload one of,our,um square shaped photos right here,and we can go go ahead and click select,and then we can go ahead,and put in more details about,our business here so we could go ahead,and describe different things we could,describe,a specific one of our products well if,we have one product we could describe,features of that product there's a lot,of different,things we can put in here and there's,gonna be,a lot of uh differences depending on,uh what you're selling so i can't tell,you exactly what to put here i can only,just give you a,general idea which is why like i said,half of the battle,is doing this up front getting all your,photos,your logo your color scheme selected up,front and having a bunch of business,details,ahead of time so slogans tag lines,selling points,uh you want to do all of this up front,because,if you have this done up front it makes,the design process,extremely easy because you have all the,information you're just,putting it in so as we can see here now,we could go ahead and put another button,here,if we wanted to and you do that in the,same fashion that we did up here,you type in the button name and you,would go ahead and choose where you,wanted to link,in this case i'm not going to put a,button here so i'm just going to go,ahead and back out,so at this point i'm gonna go ahead and,show you how we can actually,um edit these columns and delete certain,ones,so in this case i could go ahead and if,you want to,change what this stuff looks like go,ahead and let's say i want to take these,three,and drag it to the bottom i can click,these six red dots right here,and i can drag it all the way down to,the bottom and we can see that now,these are all the way down at the bottom,but let's say i didn't want,this section at all i could go ahead and,click it,and then just click remove and it's gone,and let's say i wanted to add a,different section in i could go ahead,and come back in here and we can see,there's a lot of different options and,if you click on them,you can see that it will show a preview,so we can preview all,of the different options right here,and you can go ahead and choose what you,want,to go ahead and add in,now in this case i'm going to just go,ahead,and stick with the basic,layout here of debut because a lot of,times,uh themes come out of the box already,looking pretty good,so i'm going to go ahead and just stick,with that so the next section here is,going to be the,featured collection so this is where we,can feature some of our,products so obviously at this point,you would already need to have your,products added to your store in this,case i've already went ahead,and added a few products to the store,but if you do not,have any products,in your store then you're not going to,be able to do this yet you're going to,have to go,and add products to your store and put,them in a collection and then,go ahead and come back actually really,quickly i can show you how to,um create a collection real quick so,um if i go up to the shopify bag here,i'm gonna right click open link in a new,tab and we're gonna just go ahead and,create a collection really quickly,so i'm going to go ahead and go to,products,collections and i'm going to click,create collection right here,and we're just going to name this,cookies,and i'm gonna go ahead and for the sake,of this tutorial being quick,i'm just gonna manually create this,collection click,save and then i'm gonna come in here,search products click browse and i'm,going to add all three of these products,to my collection,click add and now the products are,updated,so i'm going to come back over here to,this page and,make sure that we've already saved and,i'm going gonna click refresh,and then once this refreshes,i'm going to come back to the featured,collection,and what we need to do here is just,click select,collection and i'm going to select the,collection that we just created,and now that's going to show up right,here i'm going to click select,and we can see that we need to adjust,the products for rows we have three,products in this collection,yet it's formatted for four so if i drag,this,over to three we can see that now that,looks a lot better,we can choose to show different buttons,if we want to view all products in the,collection,we can choose to show product vendors in,this case i will go ahead,and keep both of these unchecked and,then we can change,this text up here from feature to,collection to,something like our favorites and i'll go,ahead and click save here,and we can see that the design is coming,along nicely already,debut theme is very user friendly it's,really easy to set up,and it looks really good so the next,thing,we're going to do is the next sections,so we're gonna just keep coming,down the list and at this point um,you're probably already getting more and,more comfortable,with the shopify editor and how to go,ahead and,use it so at this point i'm gonna go,ahead and just click select image,and at this point this is where we want,our second,wallpaper style photo so i'm gonna go,ahead,and upload another one right here,and we're gonna go ahead and select this,and then just like up top we can change,the alignment we can change the width,i'm going to go ahead and keep,everything as the fault because i think,the view theme out of the box,already looks pretty good with all of,the base settings so i normally don't,play with it too much,and then this is where we put in some of,our business details,tagline slogans different marketing copy,and things like that and we could create,another button,just like before but in this case i'm,not going to,so i'm going to go ahead and click save,like we do after we edit every single,section,and we can see that we are already,almost done customizing theme,so now we come down here to testimonials,and this,is where we can go ahead and fill in,different customer testimonials we have,so we could go ahead and name this,section testimonials,or in this case i'll name it what our,customers are saying,and then if we open up these,testimonials here this is where we can,go ahead,and just fill in different information,this is where we can go ahead and fill,in,um testimonials so you would go ahead,and if you already had some customer,customer testimonials which i actually,should have,included in here,as far as business details go,testimonials would also be valuable to,have on hand,and you can go ahead and just paste,different custard customer testimonials,that you have in here,so in this case i'm just going to,type in like really quick ones just so,this video,doesn't go too long but obviously you'd,want,real testimonials that you already have,that are genuine,because it's normally pretty easy to,tell when,testimonials,are fabricated,but that's how we can go ahead and fill,in this section and we can go back,click save again and we can see that now,we just have one section left,so if i go ahead and select gallery down,here we're editing this last section,and we can go ahead and change the,height of these different photos if we,want to,but like i said normally the default,setting,is going to look pretty good,because the themes out of the box,normally look pretty solid,so if i go ahead and click an image,right here select an image,now this is where we want to take more,of our smaller photos again,and put them in here so this is where i,will go ahead,and take some smaller photos,and upload them in here so you can,upload the photo,click select you can change the,alignment,again of the photos but in this case we,will keep it,minimal you can add a cache a caption,right here so if i like typed hello you,can see it will show up right here and,it will dim,the background photo in this case i'm,going to just go ahead and keep,the photos blank and not put any,captions or anything over it and we,could also paste the link,if we wanted this picture to be,clickable we could have it linked to a,specific product as well,but in this case i'm just gonna make it,look visually appealing and that's it,so then we come down here and we can go,ahead and just do the same thing,with this one we can go ahead and upload,a second image,click select it's good to go and then,this third one,we do the same thing upload the,last image come in here,click select and we are good to go so,now i'm going to click,save again come back and you can see,just like that we have went ahead and,completely filled out,debut theme in under 30 minutes,and if you want to go ahead and do more,you can like i said add in individual,sections over here,and when you click them you can preview,what they will look like and then you,literally just go ahead and fill in the,information,uh just like we've been doing with every,other,section so with that said if i go ahead,and come back here really quick,and i'm going to just open up the store,and we can see that in about 25-30,minutes,we've went from the blank skeleton of,debut theme,we just had earlier to a completely,filled out,great looking home page,so that's how you go ahead and customize,shopify,debut theme like i said half of the work,is having all of this,necessary content ready and set aside,and saved in a folder ahead of time,because if you do,then you can go ahead and just,place it inside of all these different,sections and you can always play around,with different header photos so maybe,you could put like,uh this bottom wallpaper on top and you,can mess around and figure out which,photos look,best where but that is how you go ahead,and customize debut theme,in shopify so if you found this video,helpful go ahead and leave it a thumbs,up,and subscribe to this channel for more,content and i'll see you guys,in the next

Congratulation! You bave finally finished reading how to change shopify site width district theme and believe you bave enougb understending how to change shopify site width district theme

Come on and read the rest of the article!