how to design a shopify theme

let's be honest your store design,matters and if you have a really ugly,site people are just going to leave and,they're not going to purchase from you,so in this video i'm going to show you,exactly how to customize,your shopify store design,as soon as someone comes to your site,they only have about seven,seconds before they decide if they want,to look longer on your site or,leave so those seven seconds really,matter and design,matters when it comes to that you want,to make sure that your site is,eye-catching,and it really speaks to your ideal,customer so,how do you do this you really need to,pick out your shopify,theme and make sure that it works based,on what kind of,imagery you have if you have a lot of,really great big images,then pick a theme that's going to,highlight those but if you don't have a,lot of great product shots,then you want to make sure that you pick,a theme that's not going to be heavily,reliant on that,once you've chosen your shopify theme,then it's time to,customize it and this is where it's,important to create different assets,choose your fonts and colors,to make sure that it's appealing for,your ideal customer,so this is super important but a lot of,times people kind of overlook the design,step so i'm going to show you really,quickly how to,actually customize your design in the,back end of shopify for both your home,page,collection page and product page so to,get here you're going to click on,online store and then you'll see themes,there from the list,so now that we are on the themes page,you can see your live theme here,this is what your customers are actually,seeing whenever they come to your site,as well as your online store speed we've,done another video on how to speed up,your site so i will,link that in the description below and,in the info cards above as well,and you can also see the theme library,so you can,upload your theme if you've purchased it,somewhere else or you can explore the,different,theme options available so for example,if you click on,explore free themes you'll actually see,a pop-up of all of the different free,themes that are available here,the one problem with this is if you,click into it you can't really see,how the site overall looks as well as,how it looks on mobile you can just kind,of see the different styling aspects,so what i do recommend that you do is,actually visit the theme,store so if we just click on this here,you can see,the full theme store and this is both,free,and paid themes so what i like to do,whenever i'm trying to decide on a theme,for a shopify store,is i'll actually go to all themes up,here at the top,and then you can see the sidebar here of,sorting options so you can actually sort,through,and you can see you know based on you,just want to see,themes that are just for single products,so if you click on that,then it shows you just that product or,specifications on the right hand side so,you can better narrow down what kind of,theme that it is that you are looking,for,so if we unclick this let's just go,ahead and go with a free theme,and we can click on free here and now we,can see all of the different free themes,that again we did see in that pop-up,already,but the difference is now we can,actually click on the,theme we can again see the different,styles that it includes as well as we,can view the demo so if we click on this,here,we can now actually view the demo of the,theme,see exactly how it looks as well as a,really important feature which is seeing,how it looks on mobile so if we click on,this,mobile phone device we can then see how,it looks on,mobile devices so we also just posted a,video about how important it is for,mobile devices and stylizing your site,so i'll also link that below if you want,to get a little bit more information on,how to make sure that your site is,really performing,well on mobile devices so if you decided,that you wanted to go with this theme,you would just hit add theme here,let's go back to our shopify store,backend,and we're just going to go ahead and use,the default brooklyn theme,that we already have set up so you have,a couple options you can click on,actions,you can rename the theme duplicate it so,that that way you,have a copy of the original you can also,download the theme file,and edit the code so this would be if,you knew,exactly you know specific things that,you could edit in,or if you were a developer you could go,in and edit the code,you just want to be careful here because,you don't want to make any changes that,you're not going to be able to fix and,then it's going to edit your site and,you're going to have,issues you can also change the languages,of how things appear on your site so,this would be more,technical terminology so you can go in,and,do these different options but what,we're going to be doing in this video,is we're going to be customizing this,theme so i'm just going to go ahead and,click customize here,and now we can see here we've got some,default things added in on the left hand,side that we can customize,as well as this is the default setting,so we're going to start going through,and doing these different options i do,want to mention real quickly,that this is just a test site that i'm,using for this video,so all of the images and products that,i'm using are from a company called,rifle paper company,if you like any of the products or,images that are featured here,definitely go check out their site at,riflepapercode.com,so back to our site here let's just,start off first,with the header area so you can see here,this header area is going to be,default and standard throughout our,entire site,and that's right here with the logo that,we will change,out as well as our navigation also if we,scroll down to the bottom you can see,here,there is a footer area that's going to,be the same throughout our site as well,and then all of these areas in between,are specific to this,home page design so we'll go ahead and,do the header and the footer first and,then we can come back to the home page,design,so let's click on header and then we can,see all of the options that are specific,to this header,so first off we can add in an image here,so we can hit select,image and i've already got a few added,in but you could just click,upload and upload that from your,computer as well but i'm just going to,add our logo in,click on it and hit select we can then,see that we can change the width of this,so we can make it bigger if we wanted,or we could make it smaller all the,themes are going to have,different options based on the theme,that you choose,so you're not going to see exactly what,i'm seeing in terms of,the options here so you'll just want to,go in and play around a little bit,we can also change the color for links,and icons,and have a transparent header so right,now we have,this is our big slideshow image and we,have,our logo and stuff laying on top of it,if we didn't want to do that and we,wanted it to be a,white bar behind it or another color we,could just click on this here,and now we can see that's a little bit,more prominent so,let's go ahead and leave it like that if,you were going to have your logo,over the homepage slideshow this theme,does have additional options like you,can add a white version of your logo,or change the header links and icons,just to make sure that it shows,up a little bit more we can also see,here we have different types for,navigation if we wanted it to how we,wanted the,navigation to display we will just keep,that as it,is we can also see we could change the,menu out so we just have one menu,for the main menu area here but we could,go in if you had multiple different,types of menus and you could change that,out,and there is a secondary sidebar menu,which would i'm guessing show on mobile,devices,so we'll just keep that at the footer,menu for now,and lastly we have different things here,for the announcement bar so that's this,up here at the top,so we can choose to only show this on,the home page,change out the text where it links to,the colors of it,as well as if we just wanted to show it,or not so let's go ahead and turn that,off for now,just so we can get everything a little,bit higher up on the page,once you make edits you do want to make,sure that you hit the save button you'll,still stay,in the editor here but that way you can,make sure that your changes are saved,so now i'll click on this arrow back to,go to all the other settings,and now let's do the footer so i'm going,to click on footer,and it has zoomed us to the bottom of,the page now we can choose if we want to,show the payment icons which you can see,here as well as,a language selector and currency,selector,so i'm going to go ahead and turn those,off for now,but we'll keep the payment icons on and,again you can change the menu if you'd,like,so if we go back here and let's hit save,one more time,there are some additional options that,you can get into and i want to discuss,that real quick before we actually go in,and stylize our home page,but we can click on theme settings at,the bottom here,and we can actually go in and change the,colors and the fonts for the site so,this is going to change it throughout,the,site not just on the home page this is,going to be your colors overall,so for example we can come in and click,on colors,and you can see all of the different,options that we have here,so for example we have this newsletter,and tables background,which this is a newsletter section right,here we could always come,in and we can change this and you can,see,as we're moving this dot through here it,actually changes that color,if you knew what specific color you,wanted to use,then you could go in and type in that,hex color here,or you can say none to make it,transparent,but you can also just kind of drag this,around a little bit,and stylize your color a little bit more,what's really cool about this is this is,where you can really start to bring in,the branding elements,that's going to really make your site,look more unique so you can go in and,start actually playing with the colors,to match your branding,as well as changing out the fonts,so i'm not going to go through and,change all of these colors,throughout however you can see how you,can easily customize,all of that so if we click on this arrow,back we can now go in,and do the same with typography so we,can see here our heading font,this is what's showing up here as well,as some of our titles like this example,product title,so if we click on change we can then see,a,large list of all the different fonts,that are available and we could click,add more so let's click on one of these,fonts and we can see now it's instantly,changing on the right hand side so it's,really cool it's,helpful to to then go in we haven't,actually made the change on the site yet,but you can try out different fonts and,play around with it to decide what it is,that you want to go with,you can also change here so this font is,arvo,we could click on regular below it and,we have other options,of we can make it bolder or italicize it,and we can go in and make different,changes once we've selected the font,that we want so,once we're happy with that we can just,hit select,and you can see by changing the font,there we've changed it here,we've changed it here and we've changed,it in a couple other areas,that you can see throughout the site so,by just doing it one time,it's going in and it's carrying it,throughout,now we have this accent text which you,can see here,so we can change this maybe we want to,actually keep this font so let's go back,to the newsletter or that looks to be a,different font there,so maybe we actually do want to keep,this font but we just want to change it,to be a little bit less,bold we have these options here of do we,want to capitalize it,or space out the letters a little bit,more we can also again click on change,and we can click on semi-bold,and we could just change this to regular,so we can see that gets a little bit,lighter there as well,and we can just hit select so you can go,through and you can make these changes,throughout so the body text,which you can see here we could then,change to maybe match,this accent text as well so instead of,scrolling through this is an,alphabetical list we can go back we can,see this font,is starts with an m,so we can start typing it out and then,now we'll see it,show up from the list and now we've got,that switched out as well and we'll hit,select,and you can also change the font size of,this so,we'll keep that at 16 for now but you,can see how easy it is to go in,and make these changes and stylize,things we've also now changed,the top menu navigation by changing that,font,so we'll just go ahead and hit save and,we'll go back,so every theme has different options,again that are available for it,so you'll see based on the theme that,you choose all of your options here,the cart page is going to show up,depending on if,it is a specific type of page so for,example if we click on cart here,right now it's set up as cart type so,it's taking us to,a cart page you can also though,have a cart drawer so this would be if,we,click on the cart now it actually pops,out from the right hand side,so different themes offer this kind of,functionality so you wouldn't actually,ever have a cart page,and it can kind of make it a little bit,quicker to get to checkout,we can also enable the order notes i,think we may have to have something in,the cart,but we would then see the order nodes,going back you can then add in your,social media handles and that'll then,start showing the social media icons,on your site so if we just type in,facebook now that we have that typed in,of course you would want to link to your,actual facebook page,you can see here it's automatically,added this in with a link to it and,it may add the icons in somewhere else,on your site,you can also choose if you want to have,the sharing options,for people to easily share your product,on your,product page but we'll get to that when,we're customizing the product page,so let's go ahead and hit back your,favicon,is the icon that shows up at the top so,you can see up here,with rifle paper company they have just,an r symbol,so that's what's showing up there and,you can,upload your own custom image for that,and lastly we have checkout options,so this is important to customize just,so it makes it unique for your checkout,page,so to actually see what this is going to,look like we can click on this,drop down menu up here and we can click,on,checkout so this is what a customer,would see whenever they actually,have decided to purchase your product,and they're going through the checkout,page so,by default it's not adding in our logo,or any colors,so this is where you can actually go in,and change that,you can also add in different stylized,elements so,let's add in a background image for this,banner so we can see how it looks,so we'll just hit select image and,upload,and i'm just going to select an image,that we already have,again from rifle paper company and now,we can see,it has been added up here so you could,play around with what,image looks best for that we could,select it or if we wanted to we could,decide to edit the image and crop it a,little bit to,have it show up differently or remove it,you can also add in your logo,so for this example with the banner it,would be a little bit harder to see over,it,but if we remove the banner it's going,to actually have the,logo below and so now if we add in the,logo,now we can choose how we want this to,look and we can choose the positioning,of it so we could say we want this to be,centered,and we want this logo to be as large as,possible,we can also go in again and we can add,in an image to the,background of the main content area,which is here,or the order summary over here as well,as change the,colors and the form fields and again you,can change the,typography and the colors for these,different buttons so,definitely want to make sure that you go,in and you customize it,so that it looks unique to your brand,and once they hit this checkout page,it's not totally different and kind of,generic looking,and it's still bringing that experience,throughout,so let's go ahead and click on the back,arrow and i'm going to,click on again to get out of the theme,settings page,and let's click on the drop down here to,get to the home page,now that we are on the home page we've,gone in we've stylized the header and,the footer,so now we have these elements here that,are on the actual home page so if we,look at it,we can see here we have a slideshow then,we have this rich text,area a collections list area,a featured collection a featured product,and then our subscribe to our newsletter,so these are the options that have come,already set up with this theme we could,choose other options,by just clicking on the add section and,you can see here we can add another,thing so we could actually say that we,wanted to add in blog post as well,and that will automatically pull in the,blog post,looks like a lot of other things are,added in let's see they also have a map,functionality,so we could add in a map and hours if we,had a brick and mortar store,or we could also add in a video again,this is going to be really specific,based on the theme that you choose,let's cancel out of this and i want to,show you how to quickly go in and edit,some of this,so it's going to be just like how we,edited our header and footer area,where we're just going to go in and,select different options so first let's,start with the slideshow,so i just clicked in on it to actually,open that,and let's click in on this first slide,and we're going to select our image so,i'm going to just hit select,image i'm going to actually use the,image that i had just uploaded for the,checkout page,and hit select we can then choose how we,want it to be positioned if we want it,to be,so this is showing the second image and,here's our first,if we want it to be positioned in the,middle center so we're getting a little,bit of cropping,just because this is a big image area,and ours is a little bit more narrow,we could also choose if we wanted to,have the text over it,and have the text overlay so you can see,here if we don't do the overlay,and we click back to this then it's a,little bit harder to read so you may,want to,do the show overlay and make it a little,bit darker,so let's actually real quick come back,here and i'm going to delete the second,slide so i clicked in on the second,slide,and i'm just going to click on these,buttons at the top to remove it,just so we can keep looking at our slide,so now that we go back to the first,slide that we were editing,you can see here whenever i change the,overlay opacity,we can see how that instantly looks so,you can play with how you want that to,look we also have different options for,the text so we could have it aligned to,the left,align to the right we can change out the,text,itself here as well as,choose a button so right now we don't,have a button,because it's not linking anywhere so if,we click in on this here,we can actually choose to have it linked,to different things like collections,products pages blog posts so let's click,on collections,and i'm just going to have it linked to,our best seller collection,so now we see the button show up here,and we have the options of how to,stylize this button,so again we can choose to center align,it and,now we have got that set if we change,the image position you can see that it,actually will change how,this looks so right now it's middle,center if we change it to top,left now we can see,more of the left hand side of the image,so you're going to have to play,with your image positioning as well as,make sure that you're adding in the,correct size image for your different,areas of your site so let's go ahead and,hit back,we can also change here how big we want,our slideshow to be so right now it's,set as full screen,so i can choose to actually adapt this,to first image,so now it makes it smaller and we see,the full image so that looks a little,bit better there and it's,showing the image a little bit more,crisp and we could choose if we wanted,to auto rotate slides and how fast we,wanted to do that so if you had multiple,slides that you wanted to add in,you could repeat the process by just,clicking on add slide,but let's just keep it at one for now,so next is this rich text area which you,can see here so we could select this,and then go in at our heading if we,wanted to and,text and also change the size of that,we'll go ahead and leave that there for,now,our next area is collection list so you,can see here,we have five different collections,showing up,so right now on this site for test,purposes,i actually only have two collections,that i have,enabled on the site so we can go in and,we can actually delete a few of these so,we'll,go in and click on collection and i'm,just going to click on the arrows at the,top to remove it,and that way we just have the,collections that we need you can see,though,as i'm deleting the collections they're,changing sizes,so at first it was five and you had two,up top three at the bottom,now there's three so they've made them,smaller side by side so once we delete,this one,we'll see that they are a little bit,bigger and still side by side,so if we click on collection we can then,select our collection here so i'm going,to hit select collection,and i'm going to choose one of our,collections that we've already,set up and i've added an image in for so,i'll hit select,and i can hit the back arrow and select,the other one that we have here as well,so now we have those set up we can also,come in here,and we can change this collection list,so we can say,shop our favorites or something like,that or we could just delete that,and now it doesn't actually show up the,collection title,so you have things that you can play,with there if we continue down the page,we can then do the featured collection,so,from here we can say you know shop our,best sellers,and then choose the collection that we,want to,showcase so i'm going to choose gift,wrapped and hit select,now we can see that we have an option of,this is a grid style layout,of it's showing us our six products we,could also choose to do a collage,so it's kind of changing the overall,styling,and making a little bit more dynamic on,the home page so let's go ahead and,leave it like that,the next option that we have is our,featured product so if we select on that,we can then come in and choose a,specific product so let's hit select,product,and since we did gift wrap above we'll,choose one of our other products that we,have,so i also added in some card sets from,them i'll hit select,and now we can choose how we want that,to showcase if we want to have the,social sharing buttons here,or we can turn it off we can also choose,if we want to,show the vendor so i can click on that,there and now,we can see we see rifle paper company as,well as if we want to,show the dynamic checkout button so that,would be the,if you had set up on your site like,paypal you could see the paypal button,there,so you can choose if you want to have,that still,there or not and of course they can,click on full details to go to the,individual product page,the last section of our home page is our,newsletter so if we click on that,we can already see how we had changed,the colors there and our theme settings,but now we can go in and actually change,the text,to stylize however you want and if,someone does,actually go in and create an email,address and subscribe to your list,they'll then be added in to your shopify,account as a customer,and depending on your email provider,whether you're using shopify email,or a third-party email provider like,mailchimp or clavio,they will then be added into your list,that you've got set up there,so i'm going to just keep that for now,but one really cool thing,once you've got everything loaded in is,you can actually change the order so,this was just the default order that we,have,however if we hover over this we can,actually click on it,to drag it and then we can drop it,somewhere else on the page,so you can see here we can drop it and,it actually showcased there,so let's move some things around so,let's actually do our best,sellers underneath our slideshow so that,we get people to the products faster,maybe after that we will actually do our,newsletter,so drag it and drop it there just to,break up the page a little bit with,color,then we've got rich text as well as our,different collections so let's feature,maybe,a product after the newsletter then do,our rich text,and then our collection so now we've,gone in and stylized it and made it more,unique,as well as added in our custom images,just to,stylize it more for our branding so it,looks a lot better overall,so you can do this same kind of process,for different pages on your site,you can see all the pages that you can,customize in this drop down menu here,so if we click on this we can then go,into a product page so let's go ahead,and click product pages,and now we can see a specific product,page again,your header and your footer options are,throughout your entire site but now we,have the option of product pages,and product recommendations so if we,click on product pages,we can see here again we have different,options we can choose to show the,product vendor,we also have the enable product sharing,so maybe we didn't want to do the,product sharing on the home page but we,do want to have that on the product page,so we can keep that there we could also,choose if we wanted to do a,quantity picker and if we wanted to make,that a button,or a drop down again the add to cart,button we can change the,sizing of that of how we want it to look,as well as if we had,multiple different images if we wanted,it to be stacked or if we wanted it to,show,thumbnails of our additional images that,we had i just have one image here,showing up though,but we could also choose if we wanted to,do image zoom,so this would be if we hover over this,you can see the plus icon we click on it,we then see a bigger version of the,image,so i actually have a video showing about,the specific sizes that you need,for your product images if you have,image zooming,for your site or if you don't as well as,how to resize your images in the back,end of shopify,so i will link that in the description,below and in the info cards above if,you're interested in that video,and if we click on the back arrow here,we can then see,product recommendations so this is this,you may also like section,we can choose if we want to showcase,this on the site,and we can also change the name so let's,go ahead and hit save again,so now if we click on this drop down,we'll go in and we can actually look at,how the next page we want to do so we,could do collection pages,so this is our best sellers collection,then it's showing up,or we could also go in and we could,choose one of our collections that i've,got set up in,the navigation so i could just choose,from here,our gift wrapped page and this is,showing,all of our gif wrap options so again we,can see collection pages over here,we can choose to show the collection,image so that's something that i've,added in,in the backend of shopify whenever i was,setting up the collection,it kind of pushes everything further,down the page and ideally you want to,have,everything above the fold so i'm going,to go ahead and turn that off for now,we could also turn on collection sorting,or,tag filtering so this is where people,can sort automatically if they wanted to,then show the price by low to high based,on the,date of how new the product is and you,can let them sort by themselves,or if you had tag filtering like you had,all of your products,tagged that had flowers in them tagged,floral,you could have tag filtering here so,that they could sort through all of that,we can also again choose how we want it,to be stylized so if we want it to be in,a collage,like how it is showing up here or if we,wanted it to be on a grid,in this section so it doesn't matter,that we chose,a collage on the homepage we could then,choose a grid style,here so you can make these changes that,are specific just to this page,and not going to be universal overall so,we'll hit save,and again if we click on this drop down,menu you could then go in and you can,make,continue to make these changes for,different areas of your site you could,do this for your,collections list which would show all of,the different collections and,their product images you could also do,this for your blog,your cart page checkout page which we,already did,as well as individual pages that you,have set up on the site,so for example we have a contact us page,and this theme doesn't look to have any,options on the contact us,page however we could go in and add in,if your theme had that some themes will,have a,map selection things like that on that,page that you could go,in and customize there so you'll just go,in and start customizing all of this,based on whatever theme you've chosen,and the options that are available,once you're done with that again you can,hit save,and you can then go back if we hit this,exit button at the top,we can then always click on this eyeball,in the left hand,menu and then we can actually see what,your site looks like,live so this is how your customer's,seeing it,and you could always resize this window,or see it on your mobile device,to see exactly how that's looking i,definitely recommend,checking it out on different devices if,you have access to them like a tablet,or a phone just to make sure that it's,looking good,overall so we just went over the design,aspect of your shopify store there is of,course a lot more that goes into setting,up your shopify store though,in terms of setting up your products,your collections pages all,of those kinds of things so if you're,interested in a,step-by-step of how to set up everything,like that we do have an online course,called ecom and a weekend,that shows you step-by-step how to set,up your shopify store,in just a weekend so if that's something,you'd be interested in,i will put a link in the description,below as well as the info cards above,and we would love to have you join us,for the course i hope you found this,video helpful we've got a couple,different,2021 growth strategies that we have in a,playlist over here,and you can check those out in terms of,how to grow your shopify store once,you've got it designed and looking great,and you've got it launched also if you,haven't yet make sure to subscribe to,this channel,post new videos every week all about,shopify and how to grow your online,store

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

Come on and read the rest of the article!