how to customize dawn theme shopify

all right what's up guys this is jake in,this video i'm going to be showing you,how you can go ahead and customize and,build a store using the dawn theme with,shopify so dawn is the new default theme,whenever you set up a shopify store so,we're gonna go ahead and take a look at,how you can,set it up to make your store look good,so first thing you need to do if you,don't already have a store you can go,ahead and click the first link in the,description,and you'll be taken to this page right,here and you can just enter your email,address and go ahead and start your free,trial and we can go ahead and get,started setting up your store,so once you've went ahead and started,your trial,you're going to be taken to the back end,of the store right here and we can see,that by default the current theme is,going to be dawn so what we're going to,go ahead and do first is take a look at,the base template of this theme and then,we're actually going to start building,it out so i'm going to come over here to,actions and click on preview and now we,can go ahead and take a look at the base,skeleton that dawn provides us so we can,see here that we have a little,announcement bar up top we have our logo,we have our menu and we have the cart,and search icon we have a nice header,wallpaper right here along with a call,to action right here,we have another little,call to action with some information,right here we have,four featured products right here in,this section,and then we have a media collage that,includes a video,a collection and a product and then we,have a video section down here and then,we have a multi-column section which,includes three different text sections,right here and then we have the footer,so this is how dawn looks out of the box,and we're going to do a couple small,changes to it but mostly we're going to,be,building out this store using the base,skeleton of the theme to keep things as,simple as possible so with that said,we're going to go ahead and come back,over here and really quickly we're going,to take a look at the things you're,going to need to go ahead and build out,your store using this theme,so the first thing you're going to need,is a logo if you don't already have a,logo for your business or your brand you,can make one over here at logomaker.com,or you can come over here to fiverr.com,and search for a logo designer and get,one made for relatively cheap the next,thing you're going to need is some,wallpaper photos because we've seen,especially on the header you're going to,need some photos to use for that so,these are going to be pictures that are,related to your brand or your product,and if you don't have any of those,yourself you can go ahead over here to,pixabay.com or,unsplash.com to look for free stock,photos that are related to your product,or niche and then obviously we're going,to need product photos as well as,product details so this is something,that i assume you would already have,and then in this case we saw that there,was a video section so you can also,optionally have a video of your product,or maybe like a testimonial or something,that we can use to throw in there so,once you have these things ready we're,going to go ahead and actually get,started with the customization so we're,going to go ahead and just click on,customize on the theme and go ahead and,get started and we're going to go ahead,and start from the top to the bottom,so the first thing we're actually going,to do is edit the header so i'm going to,click on header right here and the first,thing we're going to do is we need to go,ahead and put our logo in here so i'm,going to go ahead and click select image,and i'm going to go ahead and upload an,image so in this video we're going to,just be making an example clothing store,so we're going to go ahead and use this,example logo here of abc clogan and,we're going to go ahead and put that,logo in right here and we can go ahead,and select a custom logo width so right,now i think this looks a bit small so,i'm going to make it a bit bigger and if,you thought that was too big then we,could go ahead and shrink it down a bit,more,so in this case i'm going to keep it at,210 and then we can change the logo,position on large screens to be the,middle left the top left or the top,center in this case i'm going to go,ahead and keep this as middle left,and then right here we can see we have,our main menu right here and we can go,ahead and change which menu this,actually is or if we click on this right,here we can actually edit the menu links,but we're not going to go ahead and do,that right now and then down here we can,choose to enable sticky header so what,this does is this means that the header,will show up on the screen as customers,scroll up so as we see if we scroll down,the hair goes away but once we scroll up,the header comes back and if we were to,get rid of this and we scroll down and,we scroll up the header is not showing,up,so in this case i'm going to go ahead,and just keep the sticky header on,and now i'm going to go ahead and just,click save,and whenever you're making edits inside,of the theme editor you're going to want,to save pretty often just in case your,internet cuts out or there's something,wrong with your computer so that way you,don't lose your changes,so the next thing we're going to do now,is head over to the announcement bar so,this is going to be what's up here,and we can go ahead and click on this,right here to go ahead and edit it and,this is where you can go ahead and put,in any text you want here so if you were,having a sale you could go ahead and say,like 50 off the entire store with the,coupon code or anything like that in,this case i'll just keep the,text default as of right now just for,the sake of this tutorial and then you,can go ahead and link to a specific,product or collection if you want as,well,so if you wanted to go ahead and have,people be able to click on this,announcement bar this is where you put,the link right here so let's say you,wanted to link to a product you could go,ahead and search for one right here,and in this case we can just make it,link to all of our products and now you,can see it has a clip clickable link,and we could see,type in something like browse,our products and then the color scheme,right here we can see that we can it's,by default set to background one and if,we change the background too we can see,that the color is actually changing we,have accent,and accent too,now the thing is is we actually are,going to have to go in and edit these,different backgrounds now to go ahead,and make sure that all of our colors,align with our branding right here so,i'm going to go ahead and click save and,now we're going to go ahead and get into,some of the theme settings we can,actually make sure our colors,align with our branding so i'm gonna,come down here to theme settings,and i'm gonna click on colors right here,and the first thing i am going to do,is i'm going to make accent one so this,is going to be a lot of the backgrounds,right here i'm going to make accent one,this blue color from our logo right here,so what you want to do normally is you,want all the colors in your store design,to match up exactly with your branding,and normally your branding is going to,be based off the logo,so you want to make sure you get the hex,codes from your actual colors right here,so if you don't have photoshop or any,way of getting this you can go over to,imagecolorpicker.com,and upload your logo right here click on,the color you want to use and then you,can grab the hex code right here and,we'll be using this,throughout the store design so i'm gonna,go ahead and change accent one,to,that code,and you can see that that changed our,button color right here and i'm gonna go,ahead and make accent two,black which is the second color in our,logo so depending on,what colors your branding is using,that's going to determine what you're,going to be using here,with accents then we have backgrounds,here by default we have the white,background and we have the gray,background so in this particular case,i'm going to keep those backgrounds,default so i'm going to go ahead and,click save on that and we've went ahead,and set up our colors and in just a,second we're going to go ahead and,actually utilize our colors up here on,the,announcement bar but first we're going,to go down here to typography and this,is where we can actually change the font,throughout our store here so you can go,ahead and pick a font that suits your,branding you can go ahead and click,change and you can browse through,a bunch of different fonts now one thing,to keep in mind is the more different,fonts that you actually use on your,store,the slower your store is actually going,to load so i would recommend sticking to,one or two fonts max i wouldn't use like,five or six different fonts plus that,kind of messes with the branding so if,you want to keep it simple you can just,use one font and you can see we can edit,our font for all of our headings right,here and then we can edit our font for,our body text right here as well,so in this particular case i'm going to,go ahead and keep the font's default but,i would recommend just going ahead and,going through and looking at the,different fonts and picking one that you,think aligns with the branding that,you're trying to go for and choosing,that,the next thing we're gonna go ahead and,do within theme settings here is open up,social media and this is where you can,go ahead and paste in your different,social media links if you have social,media for your business here so you can,put in twitter facebook pinterest,instagram a bunch of different social,media links right here and they will,show up in your store if you choose to,go ahead and show them so in this case,i'm not gonna actually put any in and,the next thing we're to look at on here,is the favicon so i'm gonna go ahead and,open this up and the favicon is the,thing that shows up in the top left so,it's the very tiny logo that shows up,next to your url,so this is essentially going to be a,very small version of your logo so i'm,going to go ahead and you can see it's,going to be scaled down to 32 by 32 so,i'm going to go ahead and upload that,right now,and once we go ahead and do that we're,just go ahead and select that and i'm,going to click save so now that we've,done that that's all we're going to do,within the theme settings for now we're,going to get back to actually,customizing this entire home page so,we're going to come back to the,announcement bar really quickly by,clicking on this and i'm going to go,ahead and change this color scheme here,to accent one which we set up earlier,and we can see that now this,announcement bar does match with the,accent of our branding that we have set,up here in the logo and on the buttons,so i think that looks a bit better,and now that we've done that the header,is pretty much all set up and we're,going to go ahead and go down here to,start editing this first image banner,right here so the first thing we're,going to do,is upload a background image so i'm,going to go ahead and do that right now,by uploading,a wallpaper image right here related to,clothing and once this goes ahead and,loads in i'm going to go ahead and just,click select and then you can change the,banner height here so if i were to make,it small we can see it would shrink down,or if i were to make it large we can see,it would show up a lot bigger so in this,case i'm actually going to keep it as,large,and you can also make it adapt to the,first image size so in this case the,full image it would show the full image,right here but i'm going to just keep it,at large instead and then we can go,ahead and edit the desktop test text,position here so this is going to be,this little text box right here so we,can make it top,we can make it bottom or we can make it,centered in this case i'm going to keep,it centered right there,and we can go ahead and choose to get,rid of this text box if we actually,don't want it and we just want the text,or we can go ahead and have the text box,here and then we can also edit the image,overlay opacity right here which is,going to essentially make the image a,bit darker if we drag this up so we can,see this darkens the image a little bit,which makes the text a bit more visible,versus where it's like this it kind of,blends in but when it's like this it,makes a lot more visible so you can play,around with this to see what looks the,best for you so now that we've set up,these settings here the next thing i'm,going to do is actually click on the,text,to where we can actually start editing,this,so all we have to do is click on this,and then i'm going to go ahead and come,up here and we can change the heading,text right here so we could say,welcome to abc clothing and we can,change the font size from medium to,large in this case i'll just go ahead,and keep it at medium and then we can go,ahead and click on buttons right here,and then we can edit this button,so we can change it from shop all to,shop now whatever text you want and then,this button link right here is going to,link us currently to all products if we,were to click on this we could link to a,collection or anything like that but in,this case we'll keep it as all products,and if we clicked on use outline it,would change our button to this but,instead we're going to keep it as the,solid color so i'm going to click save,here and we've went ahead and filled out,the first section and we're going to go,ahead and come down to the next one so,you can see the next section here is,going to be more of a text section so we,have one heading again right here so we,can put it a,different heading really quick so we can,put in something like that and then we,come down here to our text then this is,where we can actually go ahead and put,in different text,uh is where we could put in something,about our store right here so in this,case i'm just going to put in some dummy,text for now and then down here we can,go ahead and choose to go ahead and use,this button if we want we can see the,button is kind of showing up as grayed,out and that's because we haven't,actually put in a link so if i were to,go ahead and just put in a link to all,products really quick we can see the,button would actually show up and then,this is how we can change the button,text,just like we were editing the other,button right here now since there's,already one button right here i'm not,going to have another one right here,because it seems,kind of redundant so in this case what,we could go ahead and is actually click,on button right here and then come down,here to remove block and we remove it,and we can see just like that the button,is gone,and if we wanted to add one block in we,can add the button right back in but in,this case i'm going to keep the button,removed all right so now we're at the,featured collection and at this point,this is where we actually have to start,adding products and collections to our,stores that way they'll show up here on,the home page,so since we don't have any products and,collections we're gonna go ahead and do,that now so we're gonna go ahead and,save our progress right here,and what i'm gonna go ahead and do is,i'm gonna go ahead and exit but i'm,gonna do it in a new tab just so we can,keep this open,and what we're going to do now is come,over here to products,and we're going to go ahead and add our,first product,so in this case i'm just going to,add in a,dress shirt and so in here you can put,in the description of the product in,this case i'm just going to be putting,in dummy text but this is where you'd,actually want to go ahead and make sure,you put in an actual product description,right here we can change our product,status to active and then right here,this is where we can upload our product,media so whether we have images or,videos so i'm gonna go ahead and click,add files so once we add in our product,image right here the next thing we can,go ahead and do is edit some of the,stuff under organization so we can go,ahead and select a vendor or type in the,vendor if the product does have a,particular vendor or if it's your own,product you can put in your own brand,here we can put in the product type here,so in this case we can go ahead and see,there's a lot of standard types so we,have apparel and accessories,we have clothing,and in this case we have,shirts so we've went ahead and selected,that and if we,don't want to use one of the,pre-selected types we can go ahead and,add a custom type if we want and then we,can go ahead and add a product to a,collection but in this case we haven't,created our collection yet,but we can go ahead and add it to this,home page collection which is already,created for us which is what we're going,to want to do in this particular case,and then we can add some tags to our,product as well so adding tags is going,to help people to be able to search for,specific products on your store so when,people use,the search function up here the tags of,the products are going to be able to,help them find stuff so you can just put,in like dress shirt,and anything else that's relevant to,your product so then we can go ahead and,set the price for the product so i'm,going to go ahead and just put in a,price right now,and the comparat price is how you can,create a sale so if i were to put the,compare at price higher than the regular,price this would create a 10 sale but in,this case we're just going to have them,exactly the same so we're not going to,actually use the compare at price,the cost per item right here is,something you don't have to use this is,something that shopify just allows you,to go ahead and put in,to help keep track of your profit,margins so if you know your calls per,item it can be beneficial to go ahead,and put this in there,and you can see right here it shows your,margin and your profit and then we have,skus right here so if you want to have a,barcode or an sku,associated with your product you can go,ahead and put that here and then we can,choose whether or not we want to track,quantity or continue selling once we're,out of stock so in this case let's say,we have 100 in the stock and we are,keeping track of the quantity,and if this is a physical product you,will keep this checked right here and,then you put in the weight of the,product and this is going to impact your,shipping settings and shipping prices,and i'm not going to be covering that in,this video because i've actually covered,setting up shipping in another video so,if you're curious about that i can leave,that in a link in the description,and down here we have product options,here so this is where we can actually,choose different options for the product,so in this case we'll go ahead and do,option one is size,and then we can put in option values we,could have small,we could add medium,large,and extra large,and go ahead and click done now if we,had other options so let's say we had,colors we could go ahead and add in,color,we could do like black,white,and navy,and click done right there and then,right here we have variance so we can,actually change,the price and the quantity that we have,in stock,for all of our different variants right,here so in this case,we'll just keep the price the same and,i'll just add stock to all of these,really quickly,but this part is pretty self-explanatory,and pretty easy to go ahead and set up,and you can also set up to compare that,price with this as well,so we have our product set up now and,the last thing you can do here is you,can see your search engine listing,preview and this is where you can,actually edit the website seo which i'm,not going to cover in this video because,i've also made a standalone video for,that which i'll leave in the description,so i'm going to go ahead and click save,and now we've went ahead and created the,first product so what i'm gonna go ahead,and do now is create two more products,really quickly,and,i'll be right back all right so i went,ahead and created two more products,right here we can see watch and boots,and what we're going to go ahead and do,now is go ahead and create these,collections,and once we've done that we can go ahead,and start adding this stuff to our home,page and we can actually see what it,looks like,so if we come over here to collections,now we can see by default we have this,home page collection so if i open this,up we can see that the home page,collection does contain the three,products that we have right here,so that's good so this is what we're,going to use as our featured collection,but we're going to need three more,collections as well to use in another,section on our home page so i'm going to,go ahead and create those now so i'm,going to go ahead and just click create,collection,so the first collection i'm going to,create is going to be shirts so we just,need to add a collection image,for,this collection so i'm going to go ahead,and add in this image right here,and there's two ways we can go ahead and,add products to the collection so the,first is manual the second is automated,so for this one i'm going to go ahead,and do it manually and for the next,collection i'll show you how to do it,automated so first off if we select,manual and just click save here in a,second we're going to be prompted to be,able to go ahead and add products to,this collection so if we search our,products right here we can click browse,i'm going to go ahead and,select the dress shirt and add it to the,shirts collection now if you have like,hundreds of products then,this might be a little bit harder and,more annoying to do it manually,so that's why we're gonna create the,next one,with the automated method so i'm gonna,go ahead and go back and i'm gonna go,ahead and create another collection here,and this and this one's gonna be watches,and i'm gonna go ahead and add an image,for that,right here and then we can go ahead and,set this as automated so what i'm going,to do is i'm going to make the,conditions down here so we can see we,can make the product must match all,conditions or any condition so in this,case we'll just make it all conditions,and we'll make it the product tag so,this is the tags that we set up earlier,is equal to,we're going to go with watch,and if i go ahead and click save right,here,we can see that it went ahead and auto,populated this collection with the watch,and that is because if we were to open,up this products product page we can see,that i would have set the,product tag to watch and you can add,other conditions if you want based on,product titles types the price,the weight there's a bunch of different,things you can go ahead and choose to,make your conditions as but the product,tag is probably the most common one,you're going to use,so now that we've created two,collections i'm gonna go ahead and,create one more and,i'll be right back so i went ahead and,created the last collection here for,shoes and now we have all of the,information that we need to go ahead,and,finish designing our home page so we're,going to go ahead and come back here to,the editor,and we can see here that the featured,products actually went ahead and auto,populated because i put them in the home,page collection right here so we can see,the featured collection right here we,can change the maximum amount of,products to show so in this case the,maximum products it shows is four but we,only have three products so only three,are showing up right now now obviously,in this case we can see that this image,right here,is a little bit too big,so what you want to do is go ahead and,use a smaller version of this image,because we can see it's kind of getting,cut out but for the sake of this example,store i'm not going to change that but,that is something you'd want to keep in,mind that this image is too big and,another thing that you could also take a,look at here is you can see that this,image and this image both have white,backgrounds but this one has a gray,background so in order to keep,everything completely congruent you,would want to find an image of this,product that has a white background as,well and that's actually why i used this,photo so that way i could show you an,example of what it actually looks like,when all of your backgrounds don't match,so you either want all your backgrounds,to be white like these or all of them to,be gray like this so that way it looks,congruent because if not you can see,here that it looks a little bit off so,that is one tip for you right here,and you can go ahead and change the,heading of this feature collection as,well,to something like maybe our best sellers,and right here this is where you can,actually change the collection right,here but we're already going to keep it,as the home page collection,and we can go ahead and change the,actual product card right here so we can,change it from square to adapt to image,so now we can see adapting it to this,image right here made this picture look,better but we can see that now it looks,uneven because this picture is actually,bigger than this one so this is another,tip for you guys when you are getting,all of your product photos you want to,make sure you keep all the images the,exact same size so let's say you make,them all 1600 by 1600 pixels,something like that for example because,it's going to make the design process a,lot easier if they're all the same exact,size with the same exact background so,that's definitely a good tip for you and,you can go ahead and change the portrait,here and you can see that one looks even,worse so the best thing to do would be,to use,uh product photos that all have the same,size and then use adapt image but since,this is an example i'm going to keep it,on square for now,and then you can see right here that we,could choose to show a second image on,hover if we wanted to so if you have,multiple product photos which we don't,in this case they would show up when you,hover over the product so now what i'm,going to go ahead and do is click save,and the next thing we'll go ahead and do,is edit this actual collage down here so,i'm gonna go ahead and click on collage,i'm gonna go ahead and change the,heading to shop by collection,and this is where we're going to,showcase the three collections that we,just made so we can see right here that,these are the three sections that are,actually by default in this collage so,we have a video a product and a,collection however i actually just want,three collections so i'm gonna click on,the video and i'm gonna remove that,block i'm gonna click on the product and,remove that block and i'm gonna go ahead,and add a block in a collection and i'm,gonna add in another block for a,collection and now we can see we have,three collections showing up right here,so what i'm gonna go ahead and do,is i'm gonna go ahead and select the,first collection here click select,collection and the first one is going to,be,shirts so i'm going to go ahead and put,that in,and then i'm going to click on select,and then i'm going to come down here to,the second collection i'm going to,select collection and i'm going to click,shoes,i'm going to click select,and i'm going to do the same thing down,here with the third one and i'm going to,select watches,and go ahead and add that in here so we,can see that just like that we have now,set up this section right here with,three different collections so if we,were to click on any of these it would,take us to all of our shirts all of our,watches or all of our shoes,so i'm gonna go ahead and click save on,that so the next section here is,actually a video so this is optional so,you could go ahead and put in a video if,you want if you have a video of your,product or your brand you can go ahead,and put in a youtube url right here so,in this case i'm gonna just grab a video,off of youtube just to put it in here,just to show you what it would go ahead,and look like so i'm gonna go ahead and,put a video in right now and then we can,go ahead and actually select a cover,image if we wanted to as well,so by default if i go ahead and select,an image let's say i just selected this,image again we can see that this will,show up right here and then when someone,actually clicks on the video,the image it will actually show the,video right here and then you can choose,whether or not to make this section full,width,or not right there,so in this case the video section is,optional if you don't have a video you,don't have to use it you can just come,down here to remove section and get rid,of it,and the last section we're going to be,finishing up with here is this last,multi column right here,so you can use this in a lot of,different ways,this is definitely going to be,very fit for something like testimonials,you could have three different,testimonials right here,in this case i'm going to use it as like,a featured in section so let's say that,our brand,has been featured in different magazines,or something like that so in order to,make this like a featured in section all,we need here is three different logos so,we're not actually gonna need any text,or anything so we can change the,secondary background to none,and we can come in here to column and,i'm gonna just get rid of the text i'm,gonna go ahead and just select the,vanity fair logo right here and then for,the other two columns i'm gonna just go,ahead,and do the exact same thing i'm gonna go,ahead and just use the same exact logo,for the sake of time but obviously you'd,be using different logos here in a,section like this then we click save and,we can see that this section would be,filled out and then lastly the last,thing we have to edit our home page here,would be the footer,so we can see right here the footer has,different blocks so it has quick links,and it has a heading,so quick links right here if we open,this up we can see that this is our,footer menu which right now just has,search but your footer memory menu would,normally have things in it such as terms,of service frequently asked questions,privacy policies stuff like that,and i actually have a video about,creating those pages which i'll link in,the description as well,so we can go ahead and so you go ahead,and just fill out your,your footer menu right there and then we,have a heading section right here we can,go ahead and put whatever we want you,can go ahead and add another block if,you want so you can add a menu block a,text block or an image block here so if,you want to do instead just like put an,image down here,for some reason you could but in this,case we'll just remove that block and,we'll just keep this,as default,in this case it could be,something like need help,and then the text could be email,us at,your support email right here,and just like that if we click save we,would go ahead and be done so i'm going,to go ahead and,view this,live so taking a look at the store we,can see that we filled in pretty much,everything that comes with the base,default theme now it definitely could,look a lot better if we had photos that,were actually cropped correctly and all,the branding was aligned but the main,purpose of this video was to show you,how to set up a store using the dawn,theme with all of the functionality so,with that said that's going to be it for,this video if you did enjoy it be sure,to leave it a thumbs up check the,description for the other videos that i,mentioned throughout this video with,that said thanks for watching i'll see,you guys in another one

Congratulation! You bave finally finished reading how to customize dawn theme shopify and believe you bave enougb understending how to customize dawn theme shopify

Come on and read the rest of the article!