Customize your Shopify Theme FAST | How to Design Shopify Store 2021

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

Channel: Curious Themes - Shopify Experts

Views: 42,895

Keywords: #curiousthemestutorials, #shopifytutorials, customize brooklyn theme shopify, customize shopify theme 2021, best way to customize shopify theme, how to customize shopify free theme, how to customize shopify store theme, shopify theme design tutorial, design shopify store brooklyn, design shopify store, shopify store design tutorial, how to design my shopify store, how to design my shopify website, how to design shopify store 2021, shopify tutorial for beginners, shopify free themes

Id: qMv24ilTzrg

Length: 32min 34sec (1954 seconds)

Published: Fri Mar 26 2021