hello everyone christian here and today,we're designing a clothing store from,scratch and we'll be using shopify's,newest theme,dawn you know the one with all the fancy,new juicy features from os 2.0,yeah let's get,started now if you didn't know dawn is,the first free os 2.0 theme released by,stopper5 now if you really don't know,online store 2.0,it's the future i made a video about,this so you can check it out right here,dawn is a flexible theme that includes,an adaptable layout site-wide,cross-selling sections and media,optimized product pages with this new,theme you can add sections to every,single,page which is pretty awesome,now in this video we're going to go over,the home page so we're going to design,the home page from scratch for a new,boutique called shibby's boutique,completely fictional but yeah,step number one install the theme,so now that we're here in our totally,nineties kid shop what we're gonna do,we're gonna use totally nine it's good,but we're gonna still make shippies,inside of toilet 90s kid just for the,purpose of um convenience,we're gonna go to online store,under themes,we already have it installed already but,we're gonna go through the process so,you know we're gonna click on explore,free themes,and then should be probably one of the,first ones so you'll see dawn it's free,and it's from os 2.0 so that means they,have some of the newest and greatest,features that shopify has released now,you'll see like some of these old other,ones don't have the os 2.0,um,badge so you want to make sure that you,get that one,that's the one that we're going to be,designing on,and moving forward and i would i highly,recommend to start using some of these,os 2.0 themes and if you have an older,one that you paid for you might want to,check with,the back end of your website because you,might have the opportunity to upgrade to,the new os 2.0 so everyone's going to be,upgrading these and i believe by the end,of this year,everyone should have os 2.0,themes on their store,we click on try theme,and this will automatically download the,theme to our store,that way we can manipulate it and start,using it,you can have a bunch of different themes,installed,on your actual,backend and dashboard and that's what,we're doing so right now we have this,live theme which act it's actually,totally nice kid but what we're gonna do,is we have this theme live library down,here and these are all the themes that,we have installed right here on on this,totally united skit website and what you,can do is you can customize these themes,and you can make them your own and once,you're ready to publish that then you go,to actions and then you publish and that,will bring this particular theme all the,way to the top and put this one right,here down here at the theme library so,just keep that in mind when you're,creating new websites,all right so since that one's still,installing i'm gonna go and manipulate,this one oh never mind it just added so,we're gonna actually click on customize,and this is where we'll start designing,our website now,when you start designing on shopify,you'll see here that on the left hand,side you'll have all the sections broken,down and in here you'll have a preview,of what your store looks like right now,up here you can actually change it to,the mobile version or full screen to see,how that really looks,and then here at the very top you can,change between all the pages or,templates that you have that you can,manipulate,for this particular tutorial we're going,to go over the homepage how to design it,and how to make it look good for a,clothing store,all right so we're going to start from,the top and go all the way through the,bottom,right now every time you install a new,theme it will show you sort of a,different sections right,all with,just dummy,content,some of your content will actually show,up in here but for the most part it's,going to be sort of this black and white,very wireframe looking,just so you have an idea of some of the,sections that this theme actually has,right so you're not starting completely,from scratch you at least have something,to look at in here but we can actually,get rid of all that and start from,scratch or manipulate some of these,because we'll probably end up using some,of these,all right so like i said we're gonna,start from the top and we're gonna go,with the announcement bar so in the,announcement bar,uh keep in mind that all these sections,now are broken down into um these care,looking things so that you can actually,break it down a little bit further right,so there's an announcement bar when you,click on announcement bar it doesn't,have any other customizable settings but,some of these sections actually do so,you want to keep that into consideration,for example this announcement bar has,this right here,which i believe yeah it's just a text,block essentially so that says welcome,to our store for this particular store,we're going to be offering free shipping,so i'm going to actually,add that to,the very top,but,some of our recommendations is don't do,just free shipping for all orders do,free shipping,starting at some kind of price point so,we're gonna do free shipping on,orders,over,95 dollars all right so now color scheme,for this particular section we have,different options in here,i will show you actually where to change,the color scheme um because for this,particular theme it only allows you to,change it between these and the color,scheme is somewhere else right here,within the the editor so right now let's,just leave it like this just to see how,it might look i actually let's go i,think this one yes a little grayed out,so let's do that um,you could also add a link if you wanted,to but we're just going to leave it like,that this is more of an announcement,as you can see here what i was talking,about earlier is that you can actually,add more blocks more content to these,sections and you can manipulate them a,little bit better where you might be,able to now move things around so this,button if we go right here you can,actually move that button on top of the,actual heading,you don't really want to do that but um,just kind of let you know that you have,more flexibility more freedom with these,new os 2.0 themes and depending on how,the thin theme builders,build these themes,you might be able to do even,more things so this is sort of the tip,of the iceberg when it comes to,designing stores,all right so now that we have that let's,go into the header header typically,holds the navigation and,the,logo and some of the search and cart,options here so for this one we are,going to leave background one which is,the white,and then we're gonna select an image and,i've already uploaded a few things in,here so you have the logo right there,now that logo looks very very small so,right here we have the option to make it,bigger,i think i want to do,220. yeah that looks good,and then we can also manipulate where,the logo goes um,for this particular store because we're,not going to change this,um i'm going to leave it right here on,the left-hand side but if we start to,get a lot more,navigation items right here on the top,then it might be a good idea to move,that logo to the top and i believe i can,do that yeah top center,so that gives a little bit more room,right for more navigation items to,um be right here underneath the logo so,it's less about aesthetics and more,about,um what's more functional right for your,website,but as a maybe another recommendation,would be,on your navigation,i would highly suggest maybe not having,your,home link like it's like right here and,then collections and chop if they're,going to your shopify store,more than likely,all they want to do is shop right so i,would encourage you to,just add some of your categories so you,should have something like new arrivals,dresses tops shoes bottoms so all of,your navigation at the very top should,be products that you're selling not,necessarily the about or contact or home,home your logo should just take you to,home every single time and that's how,this works,all right and then the next thing here i,typically there's a few set more,settings right here and right here in,the menu is where you can change the,actual navigation um and you can edit it,right here by clicking that we're just,going to leave this like it is,um but there's this sticky header again,typically we don't recommend sticky,headers um but this one is sort of a,smarter sticky header where it actually,shows as you scroll up so when you're,scrolling down through the home page the,header will just hide and once you start,scrolling up that means that you're kind,of ready to move on to the next page or,keep exploring then that's when the,header actually drops down so we're,actually going to leave that on but,typically i would say try to stay away,from that because it just takes a lot of,real estate on your website while,someone's scrolling while someone's,scrolling you they want to see you know,what they're scrolling into not,necessarily have that constant up there,all right so navigation and header looks,good i'm gonna click save just,that's a good practice to save every,time you manipulate a section or make,some big changes um something happens,power goes down i don't know your,computer crashes all that stuff that you,just made it's not gonna be saved so,save often,next section that we have is what we,call the hero section so this should be,uh where you have big announcements uh,maybe you release just a new collection,or,maybe have general new arrivals,this is where you want to talk about,that and always always always have a,call to action cta a button that directs,them to where you want them to go,this is something that's very very,important and we've seen it seldomly but,we've seen some stores that,don't have it,something that i realized with this,particular theme is that they don't,support,the ability to link the whole image,which i would love if they would do that,shopify should probably change that,um so for this particular theme we have,to have the actual button um and they,actually have to click on the button,instead of the whole image i would much,rather have the whole image so if you,look at your theme or maybe you're,designing something different with a,different theme that might be an option,for you,so,for this we're going to select that big,first image and,so this is the old one so you can see,right here in this little preview it had,a baked in so we designed it in,photoshop and we have a shop now button,and that's why we wanted to make the,whole thing clickable but it's just not,possible so we've gotten rid of that,button,um,so as you can see in this preview we,don't have the shop now button,because we'll have to use the one that,shopify has right here so,let me look in here see what,options we have to change so it looks,like,yeah some of our girls here are getting,cut off so the banner image,height we're going to change it to large,okay that fixes that problem,and then,show text box so yeah we don't want that,text box to show,and then we can stack images,okay,so i think that's all we need to do,right here so we were just right here,now we have the talk about your brand,which we don't need any additional text,so we're going to remove that block,and then we do need this button here,which is this shop all,let me do something that says shop,collection,okay and then the button link we're,going to change that to,collections,fall collection,you can add a second everybody a button,if you want but we're not going to do,that we're just going to leave it like,this,another word of caution is i would try,to stay away from sliders or moving,sliders,typically you want them to direct them,to that one thing um those could be a,little bit distracting sometimes um i do,understand the reasoning um sometimes,you just have,a lot of stuff going on right you want,to promote different things,typically they just don't do very well,compared to having just a single static,image and a single call to action for,them to go through all right we're gonna,save,and move on to the next section,we have a rich text section which is,this right here but i don't think for,this exercise we will need this um this,might be a good opportunity for you to,talk about the brand if you wanted to um,but for this particular store we are not,going to do that so i'm going to click,on rich text and remove that section,perfect now we're just going to jump,into products so i like how this is,displayed so you can see right here,that's the uh totally 90 skit shirts but,we're going to do feature collection,and instead of all we're going to change,that,to display,our,let's say this is not our fall,collection but let's just say like this,is new arrivals we'll probably do that,um and then put in here new arrivals,so since we just,promoted the fall collection right here,with the hero,then i just wanted right here to just,showcase some of the new arrivals which,may or may not be some of the same items,that will be in that collection but i,just want to make it a little bit,different right,um so we have maximum products to show,four but right now we only have three,products in that new rivals collection,so that's completely fine i do want to,do this enable swipe on mobile let's see,how that looks real quick,nice so because we have more than three,products now on mobile you should be,able to just swipe you kind of see that,little preview peeking right here that's,pretty cool,alright so that actually looks pretty,good depending on the type of images,that you have for your store you might,need to,manipulate some of these um this is a,cool feature um i do not know okay we do,have some images,so that's kind of cool that'll be a cool,feature that i'll probably add in here,and then i don't want to add vendor and,if you have reviews i would highly,suggest that you add these to your store,i'll just click click it right now but,we don't have any uh reviews for any of,these products right here,awesome,that's looking pretty nice,now before we move on i just want to say,bienvenidos my name is christian pinyon,one of the co-founders here at,bitbranding we're an ecommerce growth,agency that specializes in helping,clothing boutiques and apparel brands,grow and scale profitably online and now,make sure that you hit that subscribe,button turn on notifications so you,don't miss out on any of the latest,strategies for clothing pcs and apparel,brands we drop videos every week so hit,that like button and subscribe,all right let's move on to the next,section here,so i actually didn't have anything,planned for this collage but since this,is something that's pretty unique to,this dawn theme then i was like heck,let's do it let's manipulate this,collage section and see what we can make,of it so because we can move things,around i think that i want to maybe,feature,one product,so what i'll do,product select product,and then let's do this heartbreaker,vintage with stress faulty,um,i hate it how uh it just cuts up the,image like that so,i think that what we can do here,is change the location so you can move,it here,and that would actually take up the,bigger space that actually looks a lot,nicer you can actually see the product,etc yeah that was good now if you have a,video that you're talking about these,products then i think that's the next,move right so in this video right here,what we can do,let me see if i have a link,so this is not the right link but this,will work for now,so imagine,imagine in a world,that this will just be a quick video,describing maybe the fall collection or,this actual product that we have right,here,so,i'm gonna click on select image,and let's do like yeah fall collection,so this video is about the fall,collection this whole section right now,it's gonna be about default collection,and then i'm gonna go to collection,and guess what,we're gonna do fall collection,so now we have a little collage set up,right here with a video explaining what,the fall collection has we have an,actual product that we're gonna feature,that guarantee is going to be a,bestseller and we have a direct link to,the fall collection again,perfect,now that multimedia collage thing i want,to get rid of that,done,i don't think it needs a title it looks,nice like that yeah it looks nice okay,perfect now we've used a collage section,now we're going to save that,and keep scrolling here so we have a,video section a multi-column so for this,particular store i do want to feature,i'm going to skip this video,section for now,i do want to do this multi-column and,try to make this into,uh,maybe a testimonial review section,so let me see,what we have here,yeah so let's just call this,testimonials,and then,we're not going to have images and we,don't need a button,and then for each of these,oh nice so you can't,create a okay so heading we're going to,get rid of that and i do have some,testimonials right here that we're gonna,copy and paste,so we're gonna go to that process right,here,and,let's do make up some names,let's make it bold,looks nice,okay,so we're gonna fast forward through this,process so you don't have to wait for me,but i'm gonna copy and paste all this,information right here,beautiful,now we have a little bit of a,testimonial so people can see that hey,we're good people we do good business,and we're awesome,all right so after that section,let me see what we have here so,let's add this video,yeah let's just add this video and then,we'll go through the actual section that,i wanted to add,so for this i also have a,about video,on youtube,so we're just going to paste the link,right here,so we have that,and,i wish that this theme would actually,just give me a preview of the thumbnail,because let's make this,nicer,um,because that way you should be able to,see that but,for now we're just gonna do this,that's an about us,and,i'm just gonna save that for now,all right so moving on to the next,section i do want to do a few featured,collections and i already created some,graphics on photoshop so all we're going,to do here is add a section,and for this particular one,i believe yeah let's do the collection,list,yeah that should work but what we're,gonna do is we're gonna do just two and,two,so we're gonna get rid of this last one,remove block,now we have two,and then let's do another one,and again remove that last one,so yeah now we have two and two we're,gonna get rid of the heading that says,collections,go back,to this one get rid of that heading so,now we have sort of a two and two,column going on,so we're gonna select the collection,we're gonna do,tops,select that,and then,mighty fine,collections let's do dresses,select,that,for this one,we're gonna do,shoes,very important,and the last one,accessories select,all right so there we have sort of a,collection list so just again just,promoting more products what we didn't,we want to do with this home page is try,to show them as much product and as much,as basically what we're trying to push,right now so we have a lot of fall items,and then just a little mix of maybe some,of our top categories or top collections,on our store,i'm going to minimize these,and what i'm going to do is i'm going to,move that to above the video,so i'm going to do that there,and move that there,then,let's do,an instagram section so,this particular theme doesn't have like,your typical instagram feed,and we're actually not gonna do anything,custom or anything too crazy what we're,gonna do is an image with text section,right so what we'll do,is,this is the heading okay,so let's do follow,shibby's,boutique,on instagram,perfect actually we can also,see if this works,you can add a little emoji oh awesome,that works okay yeah let's do an emoji,just because and then after that we can,do,a little about,let's just be this text right here,someone copy and paste,giving them a reason to follow us and,then the,button will say,follow us,and then the link will go basically you,can paste a link in here so it'll be,something like www instagram forward,slash shipping,so we have that and then for the image,which we have to click on this,i already created sort of a collage,again on photoshop you can make these on,canva as well,very very easy and it just kind of,showcases some of the products that we,have or some of the posts that we have,on,instagram right it just looks nice,okay,i think all this looks pretty good,let's go ahead,and,save,now we do want to move this to,above the video,so now we have,we have that we have that section we,have collections,looks like it didn't move,let's try it again,there we go so now we have the follow us,on instagram,then we have the about video and then,next section we're actually going to,make the same one but inverted so we're,going to add a section on our facebook,vip group so we have a facebook vip,group where ladies come in and,get sort of the latest scoop and,actually get to shop a little bit early,right so we're gonna do another image,with text,and on this one we're actually not gonna,do a heading so we're just gonna hide,that for now,and then,i'm gonna copy this little paragraph,that i have here i guess sentence and,paste it right here,perfect and then the button should say,something like join today,perfect and then for the image we're,going to,again have a custom image that we,created,and just looks really nice,vip group,now what i said is i wanted to make it,inverted so it doesn't follow it doesn't,look too similar to this section that we,created for instagram so i want the,image to be on the other side,so i believe we can do yeah for the,desktop layout we can do text first so,that will flip and invert those two,awesome,okay that's looking good i'm gonna save,that,so we have the testimonials i believe,the last section that we want to have oh,so subscribe to our emails that we,already have in the footer let me see,how this looks right here,footer,email sign up show email sign,okay,perfect,i do want to display my social media,icon,so they're not showing right now because,i don't have them uh i don't have the,links,on my settings so we're gonna do that,right now,i don't know why it's not cooperating,with me but,let's try one more time,let's save it,and refresh,this is the typical uh did you plug it,unplug it plug it back in that's what,we're doing,so we're gonna hit refresh and let me,see how this looks,nice it works perfect all right so there,we have it we have a full home page,created from scratch for a clothing,store like i said this is a sort of a,basic,uh layout,we've used the dawn theme and used some,of their,sections,and all the features that they have,included in this particular theme,the other thing that i do want to touch,on was the actual theme settings so,that's sort of hidden right here but if,you click on theme settings you'll get,sort of a different menu this is where,you can actually manipulate some of your,colors so you can change the primary,colors,you can change your background colors so,that's why they only give you the option,for background one background two,but in here you can actually click on,these and make it whatever color you,like,all right you could also change the,typography so if you don't like this,font that's being used on,all the text so this sort of new arrival,is called assistant so it seems like,it's a very generic font so we'll,probably want to um,delve into that and explore that a,little bit better and see what we can,come up with there,so like i said there's a lot of,different features in here this is where,you would add all your social media,links so that they will actually appear,right here at the very bottom of your,store now let's hit that preview real,quick so i'm going to click on these,three little dots,and,click on preview this will open up a new,tab and now we can kind of see how our,store really looks,collection we have our new arrival,now we have our collage,very nice,we have our sections right here our,collections shoes accessories,we have our follow us on instagram,we have our about video,which let me see if i click on it,nice,so we'll be able to just kind of play it,from here,that's cool we have our vip group,section,some testimonials and then our footer,there we go pretty cool now if you are,working on this and you want to show,that to someone else without necessarily,publishing it you can click on that,green button right here it says share,preview so you can actually show someone,again without publishing the whole thing,and they'll able to give you some,pointers on what to do what to change,now if you're interested in,going through a full,revamp of your store learning from a to,z we did create that video where we walk,you through what's next right what's,next after you create this home page um,what are some of the next steps settings,and all the things that you need to have,figured out for your store to function,this is just more of a deeper dive into,the dawn theme and the settings and some,of the sections and some of the things,that you can do for your homepage
Congratulation! You bave finally finished reading how to change themes in shopify and believe you bave enougb understending how to change themes in shopify
Come on and read the rest of the article!