Shopify Tutorial For Beginners 2021 - Shopify Website Design Step By Step

in this video i'm going to show you how you can design your own clean professional looking shopify store in under one hour without any complicated code or anything like that so with that said we're going to go ahead and jump over to my computer and jump right into the tutorial all right guys so we're inside my computer and um we are going to go ahead and get started with this shopify website design tutorial now i would recommend that you go ahead and follow along with this video side by side it's going to be a lot easier so if you want to do that you can click the first link in the description to go ahead and be brought to this page right here or you can just go ahead and start your 14 day shopify free trial so go ahead and click the first link in the description to start your shopify free trial and let's get started with building your store so we're going to take you through step by step without any coding or any complicated bs and i'm going to try and simplify everything as much as possible and if you find this video helpful just be sure to leave it a thumbs up and to subscribe to this channel so with that said let's get started so once you've went ahead and opened up shopify here all you have to do is enter your email and we can go ahead and sign up so you can go ahead and enter a business email here and then click start your free trial and then you're just gonna have to create a password and then you can put in your store name now it doesn't really matter what you put here just because we can go and go back and change it later anyway but uh for the sake of this tutorial i'm going to be using a cookie shop for the example web design here so i'll just go ahead and say that our store name is jake's cookie shop and i'll go ahead and click create your store and it's going to go ahead and prompt us with this message showing us that it's created our store so we just have to go ahead and wait a couple of seconds here and then we are going to be good to go and once this next screen loads up it's going to go ahead and ask us a few quick questions here so it really doesn't matter what you answer for these questions so i'm going to just select i'm just playing around and then i'm going to go ahead and not check any of these because i'm going to show you how to do this anyway and what is your current revenue just getting started uh which industry um it really doesn't matter what you put in here but i'll go ahead and just select food and drink since this example store is going to be um for a cookie shop so i'm going to click next and then now i'm going to go ahead and put in the information um right here so i'm going to go ahead and enter my name and address real quick and we'll be right back in a second all right so i went ahead and entered some information obviously this is not my real information and once you've done this you just go ahead and click enter my store and we are going to be good to go and we are about to be able to start customizing our site as soon as this loads up all right so now that we've went ahead and started our store right here we can see this is going to be our back end right here for our store this is the our shopify admin panel it's pretty easy to use and i'm going to be walking you through pretty much every part of this step by step so we're going to be going through it pretty slowly so that way you can keep up with everything so what we're going to go ahead and do first is before we get into the actual website design and adding products we just need to do a couple things as far as store settings goes so we're going to take this take care of this first so we're going to come down here and click on settings and we're just going to edit some of these settings here really quickly so first we're going to click on general and then once we're in here what we can do here is we can see our store details so this is where we could change our store name if we wanted to so that's why i said earlier it doesn't really matter so we can come in here and we'll see that we have our store contact email here so this is what shopify uses to contact us with notifications regarding our store so you know like sales notifications and things like that and then this is our customer email so this is the emails that our customers will see and this is what we're going to be using is our customer support so you wouldn't want this to be like your personal email you would want this to be like support at your site.com and if you don't have a support email that's fine that's something that you can create later on but this is where you would put it and then you have your store address here so if you have a physical address you can put that in here and then you can go ahead and we can edit our time zone right here for the standards and formats and then right here we can put a order id for our store so normally you can just put the initials of your store so we could just put like j cs so all this means is this is just going to be the letters that show up before the order number on our invoices and in our order um tracking and stuff like that so um you don't have to do this but it's something you can do if you want it to be a little bit more personalized and then down here is our store currency so whatever is the main currency you're going to be using you select that then we click save and we are going to go ahead and head back into settings and now we're going to go into payments so inside payments there's uh two main ones that you're going to definitely want to use so the first one is going to be shopify payments here so this is how we can go ahead and accept credit cards so we can see that shopify payments lets us accept all of these different cards right here so visa mastercard american express discover jcb diners club shop pay apple pay and google pay so setting this up is really easy if we just click complete account setup you're gonna be brought in here and you can choose whether you're an individual or sole proprietor or whether you have like a corporation or an llc then you enter your business information here or if you're an individual you just go ahead and enter your personal information here and you go ahead and fill this out and describe what you're selling and then enter the banking information where you want your payouts to go and then click complete account setup now because this is a example store i'm not actually going to fill out this information but this is something you should definitely go ahead and do right now it takes a couple seconds and then the next thing we want to do right here is set up paypal express checkout so this lets people uh check out through paypal as well so if you already have a paypal account with the email that you signed up with then you can go ahead and just activate that and it will automatically sync the two it will sync your current paypal account with this store and if you don't you can go ahead and complete the account setup with this email right here so once you have those two setups uh you can also use amazon pay if you want and then there's other types of payment methods you can look into however these first two and maybe amazon as well would be the main ones you want to worry about the rest aren't going to be as common so we're going to go back to settings and now i'm going to just look at check out really quickly so check out here we can see customer accounts we can choose if we want our customers to be able to create accounts when they check out so normally you at least want them to at least be optional so you don't want to have to require accounts you want people to be able to check out as guests but we do want people to be able to create accounts if they want to so we have optional right here and then we have customer contact to check out so they can either enter their phone number or their email address when they're checking out you can keep that right there and receive shipping updates uh they can download the shop app from their order status page or you can check right here that customers can choose to add a phone number or email to receive shipping updates after they complete their order so i'm gonna go ahead and check that as well so they have more options and then right here we can go down to form options and normally i'm going to select require first and last name and then company name i don't normally keep that hidden unless you're doing b2b if you're doing business to business then yeah you probably want to make that at least optional and then address line two optional because that's like apartment unit and then shipping address number is hidden as far as tipping goes we can show tipping options at checkout so this is more so if you are uh in an industry that tipping is customary you can go ahead and check this to go ahead and let customers tip and then we can come down here to order processing and we're going to keep all of these checked and then we're going to go down here to where it says after order has been paid and we are going to keep it do not automatically fulfill any of the orders line items and then after an order has been fulfilled and paid we're going to keep that as automatically archive the order and then for email marketing we're going to show a sign up option at checkout and we're also going to select pre-select the sign up option so we're going to go ahead and click save and now we're going to go back and we're almost done with the initial settings and we're just about to get started with the design here so just one more quick section here so we're going to go down in here to shipping and delivery and this is where you can manage your shipping settings now these are going to be different depending on the type of products you're selling if you're a local business with local delivery you can manage your local delivery options here or if you are a business that's shipping worldwide you can manage your different rates right here as far as shipping labels go um you can go ahead and manage different delivery methods right here up top so what i'm going to do is i'm going to show you how to go ahead and create a shipping rate so i'm i'm assuming that most people watching this video are probably going to be selling um something that's online that can be shipped worldwide but like i said depending on whether you're doing local uh maybe you're just like a local restaurant or something maybe you would want to set up local delivery or it's all going to vary depending on the type of store you're setting up but i'll show you quickly how to mess with the ship in right here so if i go to manage rates we can go ahead and open this up here and we can see that we have a bunch of different us rates that are kind of automatically filled in here and we could uh if if these rates didn't fit with the type of shipping we wanted to offer we could go ahead and create our own by saying add rate and we could set up our own and let's say that i just wanted to create a free shipping option i could put in free shipping with a price of zero click add and then if you click on add conditions you can put in different conditions so let's say i wanted to um have free shipping based on order price so minimum order of fifty dollars so free shipping on orders fifty dollars above i can click done and we've created a free shipping right there so there's a lot of different ways that you can create shipping rates and i actually have like a 15-minute tutorial showing you how you can mess around with a bunch of different shipping rates and stuff like that and i will link that full-length tutorial in the description as i don't want this video um to end up being like two three hours long as the primary purpose of this video is going to be the dot the design itself so i'm gonna go ahead and click save here and then that's going to be it for the general settings so these four are going to be the most important ones that we're going to be looking at so once we've set these up we're going to come over here to online store and now we're going to get started with actually designing the store so i would recommend that before you start designing the store that you get a few design preparations in place so a few of these things are going to be like an image backlog a bit of content a logo and then have a color scheme in mind so if you already have a pre-existing business then you probably already have a lot of stuff like this so you have images of your product uh you have a logo you have like content for example that you want to put on like about pages and product pages and things like that and if you don't have these things um like let's say you don't have a logo right now you can go over here to logomaker.com so like l-o-g-o-m-a-k-r.com and you can create free logos on here you can just type in something like cookie and you can grab one here and you can like drag move it and then click add text and you can just put something like this on there and you can create logos on here so you can if you don't have a logo then you can go ahead and mess around using logo maker to go ahead and create one and if you don't have any um like stock images or any images to put into your website design then you can go to pixabay.com and you can go ahead and search your niche of products that you're related to so if it's cookies you can just look up like cookies and then you can look for different images that would look good in your store design now for the sake of this tutorial i already have all the design preparations ready in a folder so i have a folder with the image backlog the logo and color scheme already so i would recommend doing that ahead of time so just get you know five or six photos you know the more the better that you can use in your store design have your logo ready and everything like that because a lot of the design is going to be based around our logo and our color scheme so once we have these design preparations what we're going to do here is we're going to co go down here to shopify theme store and click visit theme store and we're going to go ahead and take a look at some themes so what i'm going to do here is i'm just going to click on all themes and you can see that we can um see all of the um 73 themes right here now when it comes to picking a theme it depends on uh you know once again what you're selling the type of products you have so it depends on the type of vibe you're going for with the site now a lot of shopify themes can fit a lot of different products but you know there is um you know different preferentials that some people have they like certain themes that fit better with certain products versus others now for the sake of this video i'm going to go to free and we're going to be using debut theme right here so that's the theme that just comes with the store by default and i'm going to be using this just because it's going to be the easiest for the tutorial because everyone starts with it and it looks like it's a pretty good universal theme that fits with a lot of different niches now with that said if you do choose to go with a different theme you can still follow along with this tutorial as when it comes to the design process all the functionality is the same within shopify no matter what theme you're using so it really doesn't matter what theme you use it just what really matters is knowing how to actually edit it and knowing how to do the design from the ground up so if you want to follow along exactly with me you can use debut but if you want to use another theme you can still follow along the editing process it's going to be about the same and to preview these themes you can just click on them so let's say i wanted to take a look at narrative i could click on it and you can see that some of them have different styles like this one has four if you click on view demo you'll see that it loads up right here so here's like an example of what this theme would look like and we can change the style right there and then we can look at it again and then we can go ahead and click on this to see what it would look like on mobile as well which is going to be really important you want to make sure that the theme looks good on desktop and mobile because a lot of traffic is from mobile nowadays so we're going to go ahead and move forward with the debut theme in this case but like i said if you choose to go with another theme that's completely fine you'll still be able to follow along step by step with the video so now we're going to go ahead and get with customizing our home page so to do that we're going to click customize right here and once this loads up you're going to see that we are now inside of the shopify editor so when it comes to editing our store it's actually a lot easier than it looks so we can see we have a blank canvas right here and pretty much we're just going to get started with filling this stuff in so the first thing that i'm going to do is come over here to the header and i'm going to click on this and the first thing we're going to do is upload our logo so we can go ahead and select the logo image here so this is where like i said you would want to go ahead and have your design preparation content ready to go ahead of time so we're going to go ahead and click select image right here and i'm going to go ahead and upload the logo now so i'm going to come in here and upload this logo really quickly and then i'm going to click select and then we can come down here and adjust the logo with so i'm going to go ahead and make this bigger and there we go i think that looks a little bit better and then right here we can go ahead and change the menu that shows up right here we're just going to keep this at the main menu now i'm going to show you how you can add things to the menu later on and then right here we can choose to show an announcement bar so if i go ahead and click yes we can see that we have a bar that's going to show up up here so we can go ahead and put in an announcement for so i'm going to go ahead and use this bar and i'm going to put something in there right now so in this case i could put something like this so depending on what you're selling uh you can put whatever type of announcement you want up here you could put like 50 off uh for the next week or you could put you know really anything you want up here so what i'm going to do is i'm not going to have it linked to anything i'm just going to have it be a message and i what i want to do is i want to change the color of the bar to match our logo so when it comes to selecting color schemes for your site you're going to want colors that match with your logo so typically you're either going to want to have your site based around one color or two colors so in this case we're going to keep it simple and i'm going to keep this site based around just one color the primary brown right here so you want to make sure that you have the exact color code from your logo that you're going to use throughout the site so you can get this one of two ways so if you have photoshop or any relevant photo editor you can go ahead and just open up the logo and you can use the color picker and select the color you want to use and open it up and grab this six digit code right here and go ahead and copy that and then come back over here and if you don't have a photo editor you can go right here to html dash color dash codes dot info slash colors from image and what you can do is go ahead and upload your image here so i can go ahead and upload that here and then click anywhere on it and then we can see we get the same exact color code right there so once we have this color code we want to keep it around because we're going to be using it a lot so i'm going to go ahead and change this bar color now to this shade of brown and now we can see that that already looks a lot better because it already matches so now what we can do is edit the text color here so typically you're going to want just white or black so you can look and see whether white or black looks better on here i personally think that oh i changed the wrong thing right there so i personally think the text looks better as white so i'm going to keep it as white so as we can see we went ahead and edited part of our header already really quickly and it was really simple and our store is starting to look a little bit better so what i'm going to do now is i'm going to go back all right so the next thing we're going to edit right here is going to be this big header image so all we have to do is click on this first box right here and we can see that the image right here we can go ahead and just select an image right here so what you're going to notice if we just go back really quick all of these different blocks on the left side correlate with one of the sections on the theme so that's why i said no matter what theme you have it's literally the exact same editing process so like depending on what theme you have you'll just have different sections on the side that's literally the only difference with themes so i'm gonna go ahead and open this up again and we're gonna add an image in right here by clicking select image and i'm gonna go ahead and upload one and i'm going to go ahead and upload this photo that i specified to use as the home page header and then i'm going to click select and then right here we can see we can change the image alignment so we can make it align to the top we can make it show the top of the image the bottom or the middle and i'm going to keep it on the middle and then we can change the layout to full width or fixed width and in this case i think full width looks better and then we can change the section height so the section height here we can make it really small or we can make it really big in this case i'm going to keep it at large now this is going to be up to personal preference i think large looks good in this case and then we can also change the text size make it medium or make it large i'm going to keep it at large so now right here we can see it says heading so this is where we edit this text up here so i'm going to go ahead and just put in so i went ahead and put in some text right here this is where you can put any type of heading text you want it doesn't have to be uh you know there's nothing there's no rules here you can just put um you know whatever you want here whether it's a welcome or message or anything like that and then i'm going to go ahead and put in some text down here as well [Music] so and then if you want to go ahead and make this text bold you can highlight it and select bold or you can unbold it or you can italicize it if you want so i'll go ahead and keep that italicized right there and then right here we can go ahead and add a button label so you don't see the button here but that's because we have nothing on the button label but if we want to have like a shot button we can go ahead and just type in what we want the button to say so in this case i'll put order now and then i will click on button link and what i'm going to do here is i'm just going to select collections and then i'm going to put actually what i'm going to do is select products rather and i'm going to select all products so what this is going to do is create a button that links to all of our products so now you can see that this looks pretty good but this button shouldn't be this color we need it to be this colors that way it blends in with the design language of our site so what we're going to do now is we're going to go back really quick and before we go to the next step make sure you come up here and click save and you want to make sure you save your changes quite often just in case something happens with your internet you get kicked out you don't want to lose your progress so you every time you finish a step definitely make sure you save so we're going to go over to theme settings now and the first thing we're going to do is click on colors so now we can see that our heading in links right here we can edit the text color for that so headings and links is going to be um what's going to be up top so we can go ahead and click this here and what i'm going to do is i'm going to just make this solid black because i think solid black looks better and then the body text this is going to be this text right here i am also going to make this solid black as i think that looks better and then sale price this is going to be the color of the text if we have a sale so in this case i'll just keep that as red that's fine so primary buttons right here that's going to be these buttons that show up on our store so i want this to be the same color as this so i'm going to go ahead and open this up and we can see that the brown that we've been using is in our recently selected so i'm going to go ahead and select that right there and we can see that that looks a lot better so now what i'm going to go ahead and do is under buttons we can see primary labels right here so if i change this you can see that we are changing the color of the text so i'm going to go ahead and keep that as white as we already determined white looks good on this brown color so what you would do is you would just go ahead and match this to whatever color you picked up here so now if we go ahead and scroll down we can see secondary labels and borders so i'm going to go ahead and just make this black and then if we come down here to form fields and just want to confirm the form fields is black text and this is for form entry which you'll see later when we go ahead and make our contact form we're going to keep these all default and then we're going to come down here to image overlays so this is going to be right here so this is an image overlay uh because we have an image and then we have text on top of it so what i'm going to do is i'm going to keep the text as white but what i'm going to do is i'm going to change the background color right here so as you can see if i go ahead and change this you can see that essentially what this is is there's an image in the background and then there's another image on top that's just one solid color and that's how we can change what color it is right there and you can tell that it's just one solid color because if we change the opacity and i make it 100 percent then we can see that in a second once it updates it's just going to be solid red so what i'm going to do is i'm going to keep it at 40 and i'm going to change the background color to black as i think that looks a lot better and i think that makes our white text look a lot better and then down here at the bottom if we go here to page we can see that the borders and lines and the backgrounds are these colors and we're not going to need to mess with any of that so we went ahead and edited our colors so now i'm going to go ahead and go into typography so in here we can change the font of our store so we can see we have two different options we can change the font of our headings so that's going to be the big text the big text here and like our product names right here and our buttons and then we have our body text which is going to be like this text right here like our product descriptions and stuff like that so in this case i'm going to go ahead and show you some examples if i go ahead and open up change right here we can see that it's going to give us a decent amount of fonts we can choose from and we can go ahead and click load more so you can go ahead and pick a font that you think fits with your branding now i'm going to go ahead and use this font right here for the headings as i think this type of um font seems to fit well with like a restaurant type of vibe so it fits well with the cookie shop and we can see that i changed the font right here as you can see that changed this font and it changed the font up here but it left the paragraph font the same we can see that it changed this font but it left this the same and you can see it left the price is the same but it changed the font right there and i'm going to go ahead and just click select and then with the body text if i wanted to change this i could go in here and change that as well now i would recommend that especially for body text that you go ahead and keep this something that's very basic and easy to read as you can see that while this may look visually appealing it's fine because it's on the titles and just product names but you wouldn't want to read an entire paragraph of text with this font because it would just get annoying so when it comes to large body text you're going to want to go ahead and keep using a simple font that's very clear to read so in this case i'm going to stick with helvetica and i'm going to go ahead and go back now and the next section we're going to do is social media so if i go ahead and open this up right here we're going to keep all of these social sharing options selected so this just means people can share our stuff on facebook twitter and pinterest and right here is where we can add different social accounts and they will show up on our store so this is where we put in our social medias um if we have them for our store so i'm gonna go ahead and just put in some of my personal accounts here just for the example so i will put in twitter and instagram and then you can just go ahead and put in as many different social medias as you have right in there and then we can go ahead and click back and what i'm going to do now is come here to favicon and then our favicon is going to be what shows up right up here so where you see like the little shopify bag is this is where we want a custom logo to show up right here so it's kind of just like a small image of your logo you don't want it to be any text you just want it to be a small just logo only so in this case i'm just going to use the cookie itself so i'm going to select an image i'm going to upload it so once i upload that image i'm going to click select right here and i'm going to go ahead and click save because we've done a lot of different edits and i'm going to go back and right now at this point we have done all of the different edits we need to do within settings i'm going to show you the checkout settings later on once we've added products in since we don't have products right now we're not going to mess with checkout yet so what we're going to do is we're going to finish up this home page now that we have all of these settings done so at this point we're going to finish the rest of these sections the same way that we did our first section so we can see here we have an image with text which is going to be right here and if you notice if i scroll away and i click on this one it takes us right back to what we're editing so you can't get confused with editing the wrong one so what we're going to go ahead and do here is i'm going to go ahead and add an image in really quickly so i'm going to upload another one and then click select and then we're going to add a another heading in here so let's say i will add this and then we can go ahead and add another paragraph of text as well and whatever you put in here like i said is going to be custom to your store so it's going to depend on whatever you want to put in here i can't tell you exactly what text to put in here but you know you just want to make something pick something that looks good so we're going to go ahead and go down here and at this point just like up here where we added this button we can add another button right here in the same exact way by just typing in what we want on the button so we could put order now again and then add another link here but in this case i don't want to put another button here so i'm just going to go ahead and click back so the next thing i'm going to do right here we can see that we have these text columns right here now in this case i don't want to use this section for the sake of the example so this will be a good time to show you how to get rid of a section so if i open up this section here and i don't want it i can go ahead and just click remove and it's gone just like that and if we want to add a section i can go in here and click add section and we can see there there is a lot of different options we can choose from we can add videos custom content we can add a map newsletter slideshow we can add anything in here and if you click it it will preview what it looks like so as we go through these different ones and we if we wanted to add it we could just click add and then if we want to remove it again we can just click remove and it's gone so for the sake of this video we're gonna stick with these sections right here i'm gonna go ahead and fill these out now so the next section is going to be the featured collection so this is going to show our products now we don't have any products yet so it's not going to show up so i'm not going to be able to select a collection yet so i'm going to go back and edit this section a little bit later after we've added some products in so we're going to go ahead and skip down to this section right here which is with which is just another image with text overlay so once we open this up we can go ahead and just select another image so this is why i said earlier where it's good to have a lot of different images um already prepared to go ahead and put into your site because the more images and content you have the better however you can keep your site really simple you don't need that many sections like i said we're you know we already deleted one section and we're not going to add any more because you really don't need a super complicated site for it to look good so within here we can change the alignment just like before all of the editing is exactly the same in every single section like we can change the text size and the section height just like we could before and i'm gonna keep it on medium and then we're gonna go in here and add some more text so we can add another button again if we want in this case i'm not going to because it's going to be right below our products so i'm just going to go ahead and click back and now we're going to come in here to the testimonial section so we can go ahead and title this something like let's say we wanted to just say we could name it like our testimonials in this case i'm going to name it what our customers are saying and then you can go ahead and select this different content right here and then you can see we can open up the section right here and we can paste in different testimonials we have from customers and then we can put in their name and we can close that up and we can open up another one and we can put in three quick testimonials just like this so if you don't have any testimonials yet if you're a brand new business that hasn't sold anything then you can always just delete this section right here or you can try and sell your products to maybe some friends or family members and try and get some quick testimonials from them and just like that we have put in some testimonials here and i'm going to click save again because we've done a decent amount of edits and i'm going to go back and now we're going to go ahead and fill out the gallery section right here so the gallery we can see is just going to be three images um right next to each other so i'm going to go ahead and select an image and we're going to go ahead and get to uploading these so i'm going to go ahead and put this one here on the left and then we can make this link to a certain page if we want by clicking and adding making the link to one of these pages but i'm just going to have this gallery here for aesthetic purposes only i'm not going to have it linked to anything but we could put something in the captions as if we wanted to as well and we can see that it would show up right there with a with text over the image in this case i'm just going to keep the photos there with no captions as i think that's going to look better so i'm going to go ahead and upload the second image now and then we're going to click image down here and we're going to upload the last image and i'm going to click select and you can see that now once i go ahead and back out of this i'm going to click save and we already have a very good looking home page right here the only part that is missing is going to be this featured collection which we are going to edit here in a few minutes after we go ahead and add some products we're going to come right back here and we are going to fill out this featured collection so we can see our stores already coming together really well and it already looks really good so now at this point after we have so we've customized our home page so the next thing we're going to do is create some essential pages so i'm going to keep these as generic as possible we're going to create pages that every single store needs so right now you can see we only have two pages we have our home page and we have our catalog page so we need to create a few more so we're gonna come back here and click the shopify bag in the top left and then under online store we're gonna come down here to pages so we're in here at pages now and what we're gonna do is just select add page right here and we're gonna go ahead and add some pages in so we're gonna be adding in um six pages really quickly so what i'm going to do here really quick is what i want you to do is come down here to settings right click and then open this up in a new tab because we're going to be needing to take content from two separate pages so the first page we're going to create is going to be called the terms of service and so we're just going to title terms of service and to get the content for this we're to come over here to the tab we just opened so under settings we're going to click on legal and when we open this up we can see that this is going to be the legal pages section and we can go ahead and create templates for different legal pages so i'm going to come down here to terms of service and click create from template and i'm going to go ahead and just copy all of this text and then i'm going to come back over here to this page paste it in and click save and just like that we now have a terms of service page set up and every store needs to have a terms of service so i'm going to do now is click create another page and what we're going to create next is the privacy policy so i'm going to call it that i'm going to come back over here and i'm going to go privacy policy and i'm going to click create from template and i'm going to copy all of this text and then i'm going to come back over here and paste it in and then click save and just like that we have a privacy policy and a terms of service page so i'm going to click create another page and this one's going to be the refund policy and i'm going to come over here and create that from a template as well now this one you're going to have to edit a little bit yourself now it depends on the policy you want to offer so i'm going to paste this in here so this is a good template to start out with but depending on the type of products you're selling and and this the type of refund and return policy you want to have you may want to edit this to custom suit your store so i would recommend that you definitely read through this and edit this to make it fit your store to make sure that you're offering the refund policy that you want to so we're going to go ahead and click save on that and we've created three pages and we just need to go ahead and create three more really quickly so i'm gonna go ahead and click create another page and the next one we're going to create is going to be a contact page so i'm just going to call it contact us and what we can do is come down here to template and we can select a template for this page and i'm going to make it page.contact and i'm going to click save really quick and what we can do is if we click view page right here you can see that we now have a contact form already created just by making this a page.contact template page and whenever somebody enters their information on here and sends us a message what it's going to do is it's going to be sent to the customer support email that we saw in the settings section from earlier and we can go ahead and add a couple more things to the contact page if we wanted to like let's say we wanted to add a phone number we could go ahead and put text right here and if i put this text in and i click save it uh what we'll do here in a second is once i click view page again we will be able to see that any text we put in this box actually shows up over here above the contact us page so if you want any custom text here like you can put in your store hours here if you have hours if you're a local business you can put in your address if your local business you can go ahead and put maybe even like a image of where you on where you are of google maps right here by clicking right here insert image and you can put anything like that right above contact so now that we've created a contact page we've just got two more pages to go so i'm going to go back to pages here and i'm going to click add page again and this one's going to be about us so the about us page is going to vary depending on the type of store you have so uh what you want to do is just essentially tell people you know who you are you know what you sell what your business is why your business is around and things like that so you can put in stuff like so like who you are what your business is why you started you could put in a section like meet the team so if you have a team you could put like a picture of you or like uh different team members on here and then like each team member could like introduce themself you know you could be like hey i'm jake the owner uh blah blah blah and then you know you could have like your manager come on and be like hey i'm you know marry the manager and whatever and then they put in like a little bio of them those are just different ideas that you can put in the about us page this is definitely a page you don't want to ignore it's not something that you want to like half-ass and then you know you have one sentence in there because uh you know the more legit your about us page looks uh the more legitimate your business and presence it's going to look so people are going to feel more comfortable for when it comes to buying so in this case i'm not going to type out a full about us page because it's just going to add too much time to the video as we're already closing in on an hour so i'm just gonna save but i would definitely recommend spending a good amount of time on your about us page you can go ahead and use uh these different things another one you could add in is like company mission you can use these different things as ideas to go ahead and put in your template so the last thing we need to do now is create one more page if we go back here add page this one's going to be faqs so faq is going to be frequently asked questions so what i'm going to do is there's pretty much two ways we can do this we can do this with an app which i will show you at the end of the video when we go over apps or we can create one ourself so if i i'm going to go ahead and show you how to create one yourself so first thing i want to do here is also i'm going to show you a little bit how to use this would be a good time to show you how to use the editor a little bit more in depth so right here inside of content if i click on formatting we can add in different headings so let's say i want to add in like a heading 2 and i will call it frequently asked questions and then i can hit enter down here and let's say um i want to have the questions be in bold so like what are your hours and then like i could put something like a q in front of it and then we could hit enter and then i could unbold and we could put the answer we are open nine to five seven days a week and you can just go ahead and use this exact template right here this is one easy uh faq template you can use where you have the question in bold and the answer below it and not bold and as far as the different questions that you want to go ahead and put in you just want to put in questions you know you have to kind of brainstorm this a little bit you just want to put in questions that you think you would ask if you were a customer so you know things like your hours returns um you know shipping any questions that have to do with that delivery times customer support different types of things like that and if you've already been in business for a while think about all the questions that you would normally get and try and answer them right here uh you could go ahead and the longer you have your store open the more customer support inquiries you're gonna get and you're gonna start to see patterns emerge so the more the same questions you get you want to go ahead and try and answer those in the faq because the more questions that are answered on the faq page the more um time and money you're going to save dealing with customer support so this is another page you definitely want to spend a decent amount of time on it spend like 30 minutes or so trying to fill this out with as many different questions and answers as possible um i'm not going to do this for this video because obviously it's you know going to be unique to each store and plus don't want the video to be 15 hours long because you're probably gonna die by that point so we're gonna just go ahead and go back to pages again and we can see that we went ahead and created six different pages and this is going to be good for now so what we're going to do now is head over to navigation and we're going to put these pages inside of a menu so we can see that right here in navigation we have two different types of menus we have the footer menu and the header menu so the main menu right here is going to be what shows up on the top of the store the footer menu is going to be what shows up in the footer of the store so the first thing i'm going to do is just click on footer menu and normally in the footer menu you're going to add the pages of lesser importance that people aren't going to look at very often so i'm gonna click add menu item right here and we can click on the name to go ahead and name it or we can just it's easier to just select link right here and then we can click on pages and we can pick one of our pre-existing pages so normally things like the privacy policy the refund policy and the terms of service we're going to throw in the footer menu because it's something that people aren't going to look at that often so once we select the link it's going to auto populate the text we click add and then we're just gonna go ahead and add more so i'm gonna add these in really quickly and once we've added these in i'm gonna click save right now and just like that we've went ahead and added to our menu so i'm going to go ahead and click back and now we're going to edit the main menu really quickly so i'm going to go ahead and click on that and it's the same process for the main menu i'm going to click add menu item and this is where we're going to add our other pages so i'm going to add the faqs and then i'm going to add the contact us and i'm going to add the about us and i'm going to click save and what i'm going to do is i'm going to click right here on this eyeball and that's going to open up our online store we're going to take a look and we can see that now here in the menu up top we have fvqs contact us and about us in our menu up top if we go down to the bottom we can see we have privacy policy refund policy and terms of service down at the bottom so we can see our stores already looking really good and just under an hour and if we click these links you know they actually work so everything is ready to go so one thing that i want to show you with the navigation quickly before we move on is how to create like a drop down so it's pretty easy so let's say you wanted the contact us section to be a drop down under the about you could go ahead and drag it below it so i would take this drag it down below and then drag it to the right and we can see that now it is a drop down and then if i click save really quick and i come over here and i refresh we can see that now if i hover over about us click on it we can open it up and we can see that now contact us is part of the drop down so that's how you can create drop down menus so it's pretty easy in this case i don't want that to be a drop down so i'm going to put that back up there and i'm going to save that menu just like that so now at this point we have when it went ahead and created menus so we're making a lot of progress really fast and the next thing we're going to look at here is we're just going to go ahead and finish up with all of these sections on their online store and then we're going to move on the products so the next thing we're going to look at really quickly is blog post so blog post if you click on create a blog post it's exactly the same as how you can edit the pages before all of this formatting is the same here so you could you know come in here put in sample title and you could have sample paragraph text and then you could come in here and like insert an image or insert a video so i could like insert an image from our store or we could go ahead and upload another file so let's say i just went ahead and like inserted an image and you know we can go ahead and mess around with different things like that and we can make a featured image for the blog post as well so i'm not going to spend too much time on blog posts as uh this is pretty much the same as the editing process for the other pages you just go ahead and give it a title you format your text like you would any type of article you can insert images and you can insert videos so it's pretty basic within blog post so the next section we're going to look at here on this side is going to be domains so domains are going to be really important because you definitely don't want a domain that ends in uh dot myshopify.com because that looks stupid and unprofessional so we definitely want to go ahead and not have this domain so this is where we can buy new domains so all you have to do is click buy domain and you can enter the domain name that you want to buy right here so you would just enter your store name and you ideally want to make sure that the com is available because that's the most common one and then you can go ahead through the process and buy the domain it's really easy and you can renew it through shopify and it's like 13 a year so it's not too bad i'm obviously not going to buy a domain right here for the example video but that's how you do it there's no real tutorial necessary for that it's just really simple to go through there and then the last section on their online store here is preferences so this is where we can edit our title and meta description so if you're not sure what this is if we go over here to google and i type in amazon we can see that this right here is the title and meta description so this part right here is the title right there so that's what we put right here and then this down here this smaller text down here is the meta description so that's what we would put right here so the title we would just put out we could just put like our store name and then like a slogan and then our meta description could be just a quick uh description of our products or services so come get some so i'm not gonna actually type in uh something longer than this just because i don't want the video to go on too too long because i think we're already at about an hour but you definitely would just type in like a sentence or two right here because it's what's going to show up right there so you can see like amazon puts like free delivery on millions of items with prime low prices so you kind of just want to put something similar like that just a brief description of of what's going on right here and then we have our social sharing image so when people share our site this is the image that's going to show up so it's normally just going to stick with our logo which is fine and then down here with uh google analytics this is where we paste in our google analytics code so i'm not going to be going over that in this video but i do already have a video on setting up google analytics so i'll link that in the description and same with the facebook pixel this is where you put your facebook pixel if you're going to be advertising on facebook you definitely want to set up your google analytics and your facebook pixel id right away but like i said i already have separate videos showing you how to do that so i'll link those in the description and then lastly right here this is where we can disable our password which we can do by picking a plan which we're going to get to at the end of the video so i'm going to go ahead and click save and now we are going to move on to products so one hour in and we're finally going to add a product to our online store who would have thought so if we come over here to the top left we can click on products so right here we can go ahead and add a product now there's three main ways that you're going to be adding products so you can either add products one at a time uh manually which is what i'm going to be showing you today or you can add products via csv which you can do by clicking the import button up here which means if you have like a ton of different products like hundreds then you're not going to want to add those one at a time because that would take too long and by time you actually get the products uploaded you might not even be alive so you definitely would want to make sure that you bulk upload your products if you have a lot but in this case i'm going to be showing you how to manually upload them so let's just say you only have a few and the other way that you'd be adding products in is through like a third-party app if you were doing like drop shipping or something like that but we're gonna go ahead and add a product in right now so the product is uh relatively similar to the pages so we can go ahead and just put in the title of the product so in this case i'll put like one dozen one dozen chocolate chip cookies so we put the title of our product and then we can go ahead and put a description of our product as well so the description you typically you want it to be pretty long like you know like with the theme of most of this video i'm not going to fill it out completely because it would take too long and we'd be here for seven hours and you probably fall asleep so we're gonna go ahead and just stick with this sentence but i would recommend that you go ahead and actually put out a well thought out product description um with a lot of detail and i actually have a separate video that's solely dedicated to making product descriptions which i will link in the description as well and at this point the uh description is going to be have more video links than youtube itself so just keep that in mind when you're digging through all those links so this is where we can put our product description editing it is exactly the same as uh you know the pages as far as the formatting goes we can insert images and everything and then here's we're going to put our product photos i'm going to click add file so this is going to be the chocolate chip cookies so i'm going to go ahead and put a picture of the product here and then over here we can go ahead and put in some details about our product so we can put our product type so in this case it's a cookie and we can go ahead and add our product to a collection so in this case i'm going to add it to the home page collection and i'm going to show you how to manually edit collections um right after we add some products in but this is where we can add products to different collections collections essentially just a way to group together related products they're really useful you can add in different vendors if you have different vendors a lot of the time your store is going to just be one vendor so you don't have to mess with this but if you do have different vendors you can specify that here and then tags so tags you definitely want to put tags in here because this is going to help with if especially if you have a large inventory of products people that are searching for different uh products or the search is going to show up based on like tags so in this case you know we're just going to tag it cookies and then like chocolate chip so put in any relevant tags you can do your product and then down here we can add the pricing so let's say in this case i'm gonna put 12.99 and right now uh and then right here next to it we can put the compare at price so this is essentially just if you want to create a sale so actually really quick i'll just show you what this would look like so if i just click save really quick on this current product i'm going to go ahead and click preview really quickly it's going to open up this link so we can see that it's priced at 12.99 but if i come down here and put the compare at price at say 14.99 and i click save and then i come over here and refresh this preview we can see that now that creates a sale so we can see that here's the sale red sale text we saw earlier and we can see that it creates a sale right there so that's how you create sales you just put like the original price and the compare at and then you put the price that you want the sale to be at right here now i would recommend that you don't overuse sales and that you don't just have everything in your store uh showing as 90 off all the time because like people aren't that stupid so like they know that like a store is kind of fishy if 100 of the items are literally 90 off uh the entire time like that type of stuff like doesn't work like we're not selling the like 10 year olds here so you just want to make sure that you know you use sales like strategically you you know you don't just want everything to be 90 off all the time you know you're not pricing like you're going bankrupt tomorrow so that's how you create sales and then down here uh calls per item so this is kind of just uh for your benefit so you don't have to put anything here but you can put something in here so let's say it cost me like four dollars to make a dozen cookies then we can see all this does it just shows our margin we make on each sale so it says we have a 69 profit margin right there it's a pretty solid number and we can see that we have uh an 8.99 profit per sale that we make so you don't have to put this in but it is nice to be able to see your margins right here and then here we can go ahead and put in our custom skus if you have them or you can make your own and you can go ahead and put in barcodes if you have these as well and you can choose the track quantity if you want or not so uh cookies uh are made to order so i'm not gonna you know keep track of how much we have but let's say you do have an inventory and you only have like 50 then you can go ahead and just put in like 50. and then shopify would track that you have 50 available and once you've sold through 50 it would show that you're out of stock and then you can go ahead and click continue selling when out of stock if you want to keep taking orders when out of stock so whether or not you use quantity tracking is going to vary depending on what you sell and then right here with shipping you can choose it's a digital product you can uncheck that if it's a physical product you can go ahead and put in the shipping information right here so how much it weighs and then the country of origin so that would be like the united states and then down here you can also add in variants so if i click this right here this is where we can add in variants so let's say you're selling something like shirts uh you could have different sizes you could have like small medium large uh let's say you know color that's another good one so you have like red blue yellow and this is where you can put any variants you want and then down here we can see that we have uh all the variants showing up with price quantity and sku so this is where we can edit them so let's say we only had a few we have like 10 small red t-shirts uh we would put that in there and let's say large t-shirts cost more than small so we could go ahead and make them like that because large t-shirts cost more to make so we could change that price and we could change like how many we have of that and we can put in our individual skus right there so in this case um obviously our cookies don't have variants so i'm not going to check this but it wouldn't be a complete tutorial if i didn't show you how to edit these different variants it's pretty straightforward you can add as many different options as you want and it's just going to add more different things to fill out down here so i'm gonna go ahead and uncheck that for the sake of this video and then lastly we have the website seo so like i showed you earlier uh this is what's gonna show up right here so we have the title the meta description and the url which is showing up right there so we can see we have the title the meta description down here and this is the url and we can go ahead and edit these different things so i'm not going to go in to super in depth of how to edit these i do have a video on shopify seo which will be added to the giant list of linked videos below and you can check that out if you want to learn how to optimize everything perfectly for seo but pretty much you just want to have a title that's very clean and looks good add a description of the product and try and put a few keywords in here that people would use to search for your product so with that said that's how you add in a product i'm gonna save that and what i'm gonna do really quickly is add in two more products so i'm gonna click add product and we're gonna go through these really quickly all right so i've added in the three products that we have right here so after you've went ahead and added in uh different products what you want to do is go to collections and this is where we can sort our products by different groupings so let's say i create a collection right here and i'm going to go ahead and show you how collections work really quickly even though we don't really have many products to group together i'll just create one really quick and show you so let's say i type in the collection just going to be cookies we can describe the collection right here so we can just be like all of our different all of our different types of cookies right there and then there's two different ways that we can populate our collection so we can make it automated which is definitely the easiest so what we can do especially if you have a lot of products is you can have products match certain conditions you can have it match all conditions or just any conditions so in this case you saw that we added product tags earlier so if i wanted to add all of our cookies to a cookie's collection we could do product tag is equal to cookie so this means now that every product that's tagged with cookie is going to be in the cookies collection and we can also do this manually so if i want the manual and click save really quick you could just go ahead and search through different products so i could go ahead and browse our products and add all these cookies in and you can do it just like that and like that's relatively easy um when there's only three products but if you have like 100 products and you kind of just want it automated especially if you're adding new products a lot then you you just want to make sure that you're tagging your products correctly and then you're um adding it via automations which is definitely what i would recommend and you can add certain collections to your menu if you want as well which i'm not going to go over because i already showed you how to edit your menu so now at this point we are going to go back and finish editing the home page and we're going to customize the checkout the two things we couldn't do earlier because we didn't have any products so we're going to come back to online store and we are going to click on customize once again and we are going to be returned to the past we are back about where we were one hour ago and we're going to click on featured collection and we're going to get rid of this crap and we're going to make it look good so we're going to select the collection right here so right here we can just go ahead and select which collection we want to show right here so we just created the cookies collection so we're going to show our cookies here i'm going to click select and we can see this looks kind of stupid because there's a big empty space here so what we want to do is change this from products per row from four to three and just like that it looks a lot better so what we're going to do now is we can go ahead and change this heading if we want i'll just leave it as actually let me change this is like uh our favorites and then we can go ahead and click save and we can see that now the home page actually looks legit so we're gonna come back and i'm gonna go back over here to theme settings again and i'm gonna click on checkout and in order to actually see like what the heck we're doing on the checkout we need to actually get to the checkout page so what i'm going to do is i'm going to click on one of our products real quick and i'm going to click add to cart and i'm going to click view cart and then i'm going to click checkout and now this is going to go ahead and load up our checkout page here so that way we can actually see what we're editing so we can add a background image um i wouldn't really mess with that really all you need to do is come down here to logo and we're just going to go ahead and put our logo in again which is going to show up right here and we can change the positioning of our logo we can make it left center or right in this case i'm just going to keep it on the left we can change our logo size from small medium to large i'm going to keep it at medium like i said we can add a background image if we want but i'm not gonna do that or we can change our background um color to something else like say black but in this case we're just gonna keep most of this the same we're just gonna add a little bit of customization and that's it we can keep our form fields and everything the same we're going to keep the order summary and everything the same the only thing we're going to do now is come down here to colors and what we're going to do is we're going to switch our accents to the same brown that we've been using throughout our store i'm going to change our button to the same brown that we've been using throughout our store as well just so that way our checkout branding looks like everything else and then that's it so we're going to click save and now our checkout looks good to go so at this point we are looking really good we're gonna go ahead and go back i'm gonna click the shopify bag again and at this point we have set up the majority of our store so there's just a couple of smaller things that i'm going to show you really quick and we're about done so congratulations if you made it this far without falling asleep and if you are asleep then at least you tried so we're going to go ahead and come over here to discounts really quick and i'm just going to show you how you can create discount codes so if i click create discount code i could put in something here like 10 off so you can name it whatever you want and this is something that customers would enter at checkout and then you can make it a percentage so i could give people 10 off their order or i could give people like a fixed amount which is like 10 off their order so ten dollars off entire order percentage ten percent off entire order uh free shipping so it's just the free shipping uh coupon and that's it so you could just name it free ship or you could have like buy one product get another so like buy a chocolate chip cookie get a free sugar cookie and you can set that up right in here so they buy like any products from a specific collection then they get you know a specific product right here it's pretty straightforward so let's say i just wanted to set up a basic 10 off coupon off the entire order come down here no minimum requirements they can just get 10 off and then customer eligibility everyone and then uh limit to one use per customer is pretty common that way people don't use the same discount code like 15 times and then we go ahead and click save discount code and just like that our discount code now exists so now that this discount is created if you were to go ahead and go back to the cart and go through your checkout process you could go ahead and test this out in the checkout process putting the 10 off code and you would get 10 off the order so that's how you can go ahead and create discount codes the next thing we're going to look at here is the orders section so this is where all of your orders will show up once you select the plan and once you start making sales here so this is where you'll be able to see each individual order so hopefully uh this page gets very full for you very quickly and the next thing that we are going to look at here is the analytics section so right here this is a valuable page here we can see a lot of different data we can sort by dates we can sort by today last seven days 30 days 90 days quarter year there's a lot of different ways or we can sort by specific dates but we can see a lot of different data through here so we can see our total sales how many visitors we have our returning customer rate our total orders our average order value our conversion rate how many people added the cart reach checkout and how many people actually bought we can see with our top product we can see our sales based on what source is doing the best you can see our best landing pages we can see sales by traffic source there's a lot of different data we can see in here it's really valuable this is a really useful section that you're probably going to be checking in on multiple times a week because looking at analytics is definitely a good way to go ahead and gain valuable data and increase your sales volume so the next section we'll look at here is the apps so the app store here if i click visit the shopify app store is essentially just a bunch of third-party applications that you can seamlessly integrate with your store that kind of give your store a little bit of certain types of enhancements or features that don't come with a shopify a base shopify store so there's a ton of different apps i'm not gonna go through a lot i'm just gonna recommend a few apps three in particular that pretty much uh everyone should use so the first one is an email marketing app so i would recommend clavio for email marketing so you can click on this right here so you can use any email marketing you want i i would recommend that you the the point is you definitely just need an email marketing app however i personally prefer play video but you can use whatever you want the next app would be crush dot pix and what this will do it's right over here image optimizer uh what this is gonna do is shrink all the picture sizes on your store which is going to increase your page loading speed which is going to make the process of the process of visiting your store a lot more enjoyable for your customers because no one wants to wait you know 15 seconds for a page to load because they're just going to leave and go to a different site so this is going to help your page load faster by shrinking the image size without ruining the image quality and you can do this manually in photoshop but this is easier for people that don't have photoshop and if you have a ton of photos and the last app is going to be looks reviews so you don't have to use looks reviews you can use any review app you want but this is the one that i like and i would recommend and i will leave a special link to uh looks reviews in the description that will extend your free trial to 30 days instead of just 14 so if you want an extended free trial of looks go ahead and use the looks link in the description down below so those are the three apps that i would recommend there's a lot more apps that you can use i would recommend not using like like 30 different apps because it's not really necessary it's just mental masturbation at that point it's not really stuff that actually adds value to your store you really only need a few apps so uh the last thing that we need to do is go ahead and select a plan so back here at our store selection we can come down here and you can see we have a certain amount of time out there on trial and we click select a plan so we can see that we are presented with three plans here so uh most people are going to start out with the basic one i would recommend this one and uh the reason for that is is that when you're just getting started the main selling point of these larger plans is going to be the discounts that you get on shipping and the discounts you get on credit card rates but if you're only making five sales a month those discounts aren't going to make up for the extra money that you're spending but once you are generating a lot of sales then you absolutely 100 should upgrade to one of these bigger plans because then you will be literally setting fire to money by let's say if you have a store generating thousands each month and you're still in the basic plan you're losing a lot of money by having this 2.9 credit card rate instead of the 2.4 processing rate so that's half a percent that you're losing just by not upgrading to the advanced shopify plan so when it comes to upgrading your plan you're going to do that um typically once you start making a lot more sales so in the beginning most people are going to be starting out with basic shopify and then slowly moving up from there as you make more and more sales so yeah i would recommend i'm choosing this one and getting started with that and now to wrap up the video i'm going to click on the eyeball one more time i'm going to just take a look at what we just created so um in a little over an hour we've went ahead and created this site we can see that it looks really clean really smooth really professional and it's pretty much already ready for people to visit like if we were to have actually filled out the faqs and the about us section so if you would have taken the time to um fill these out properly then you pretty much already have a fully functioning online store that is um you know pretty much ready to go now there are some small things we could do some small tweaks we could do to make it a little bit better but i mean this is a very good base that we can use to go ahead and build upon so i hope this video helped helped you out if it did make sure to leave it a thumbs up go ahead and subscribe to this channel for more content and i will see you in another video

Channel: Casual Ecommerce

Views: 147,295

Keywords: shopify tutorial for beginners, shopify website design, shopify website design tutorial, shopify website design tutorial 2020, shopify tutorial for beginners 2020, shopify tutorial for beginners 2020 full tutorial, shopify tutorial, shopify tutorial 2020, complete shopify tutorial 2020, complete shopify tutorial, shopify design, shopify setup, create an online store, shopify store setup, create a shopify store, how to setup shopify online store, shopify setup step by step

Id: Fn7Spblyn_I

Length: 80min 41sec (4841 seconds)

Published: Sun Aug 30 2020