Shopify Website Design Tutorial for Beginners

what's up simon here back with another video and in this video i'm going to show you step by step how to set up your own shopify store in roundabout 30 minutes so if you want to build a beautiful looking shopify store but you don't want to spend hours trying to figure out how to set everything up then this is the perfect video for you and even though this is only 30 minutes long we're gonna cover all the essential steps like choosing a theme adding products to your store and also things like setting up your legal pages your payment providers and your shipping information so let's not waste any more time and get started right away okay so step number one is to go down to the description of this video click on the first link that you find there and that will get you a 14 day free trial for shopify so do that now and we'll move on from there okay so that link will take it to this website right here where we can go ahead and get that 14-day free trial so what we're going to do is just type in our email address right here and then we're gonna click on start free trial that will take us to the next page right here where we can decide on a password and also on our store name now you don't need to overthink what the store name is gonna be because you can change that later on as well so just type in something here that makes sense for your store and then click on create your store now on this next part if you want to you can just fill out all the information they ask of you here but you don't really need to and it doesn't really matter so i what i like to do is just click on skip on the bottom here to save some time now on the next page we have to enter our personal information here and also our address or our business address so just go ahead and do that and then we'll move on from there all right and now we're already inside of our shopify dashboard for our new shopify store so the first thing we're going to do is to actually choose a theme for our store so we're gonna click on online store on the left side right here and that will open up the themes and as you see the debut theme like it's kind of the standard theme that comes with the first shopify store and that's already installed and what i'm going to do in this tutorial is add a new theme so we can scroll down and go to free themes right here then click on explore free themes and there you have the nine free themes that shopify kind of gives us to choose from so what i'm going to choose for this tutorial is the brooklyn theme and also the classic style so you have the playful one or the classic style i'm going to choose the classic style for this tutorial so i'm going to click on add to theme library and now it will add this like theme to our library and once it's finished loading right here we can actually replace the theme with the new one that we have just added to our library okay so now it is added so what i'm going to do is click on actions and then click on publish then again and that will replace the debut theme with the new brooklyn theme that we have just added now let's go straight into that by clicking on customize and that will get us into the shopify kind of website editor where we can make all of our changes for our home page our product page and so on you can also watch that page how it looks like in mobile form if you go to the top here and click on the little mobile icon you can always see how your store currently looks like on a mobile phone which is something you should really do because a lot of traffic nowadays comes from mobile but we're gonna do all of our changes on the desktop version right here and as you see um everything's kind of set up in blocks that you see on the right on the left side here so first we have a slideshow block then we have like a text block then we have a collection list and we have like a feature collection and so on what we're going to do is just go through it from top to bottom and make all the changes that we want to do here with our store so let's get started with our header so we're going to click on header on the left side right here and the first thing we're going to do is actually add a logo so i'm going to click on select image right here and then i'm going to upload um the logo for this store that i have prepared so what i'm going to choose is this one right here and that will replace this one with our logo click on select right here and what i'm going to also do is add a transparent logo because then it will be it looks differently when i have a picture in the background so i want to have that in white when i add a picture later so i'm going to click on select image for the transparent logo and then i'm going to upload the same logo in white right here and that will change this one to white click on select and now when i change from home page to let's say collection pages you'll see that the logo actually changes to black which looks a lot better with a white background so i'm going to change back to the home page and then we're going to move on with editing the header so again i'm going to go into the header and then i'm going to scroll all the way down and i'm going to change this announcement bar at the top here so what i'm going to change it to because i'm going to offer free shipping for this store is i'm just just going to type in free shipping on all orders worldwide you can also do like you can also put a discount code in there that you want your your um customers to use or like how many percent off everything is uh today because you have a special sale going on you can use that announcement board for pretty much anything you want all right so now we're already done with the header so i'm going to go back right here and we're going to go to the next part which is the slideshow so for this door to make it a little bit quicker i'm just going to use one picture and not really going to use the slideshow so i'm going to go to the left side and i'm gonna click on the second slide under six dots right here and i'm just gonna delete this slide so we only have like one picture as a background for our hero hero banner um which is the first part of our website so we're going to click on slide right here and then i'm going to click select an image i'm going to click upload and i've already prepared an image as a background for our watch store which is going to be that one right here so i'm gonna add this this is uploading right now and once it's uploaded i can click on select on the bottom and now it's added and what i'm gonna do now is go to scroll down a bit on the left side then i'm going to increase the opacity to let's say 45 which makes the background a bit darker and make the text stand out a little bit more now i want to have that text on the right side so i'm going to click on text alignment and going to click on right and then we're just going to change the text right here to let's say something like timeless design as a title and also something like discover our and discover our new collections um kind of as a title now i also want to put in a button that says shop now and so i click on the button link field right here and then i'm just going to choose collections so that when people click on there they will see all of the different collections that we'll add at a later point of this video so click on collections all collections and that will add the button right here so i want to make this stand out a little bit more so what i'm going to do is click on the black color for the button on the bottom and then i'm going to change the color to to kind of a bright orange which stands out a little bit more just like this works pretty good okay now this hero banner is pretty much finished so i'm gonna go back so this is the slideshow we're pretty much done with that now the next part is the rich text block that's already in there i don't really have something that i want to kind of tell people right here so i'm just gonna go ahead and delete this section by going on the six dots right here and then i'm gonna click on remove section now the next part is the collection list so we have an overview of the different collections that we have on our website so what i'm going to do is actually um i only want to have two two collections right here so i want to have like a men's and a women's collection so i'm going to click on collection list i'm going to give that a name so let's let's actually name that something like find your style and then i'm going to delete all the other collections that i don't need so i'm just going to click on the six dots and then remove content remove content so that now we're left with two different collections okay so far so good so let's now quickly go ahead and save that website that or that store that we have created so far and let's go ahead and go to the left and top right here where we see that um shopify logo and then right click on this one and then open link in a new tab so now we have two different tabs open we have our kind of website editor right here and then here we have our dashboard our shopify so what we're going to do now is actually add a couple of collections right here that will be visible later on our store so we're going to go to the dashboard on that second tab that we have just opened and we're going to go to the left side and click on click on products and then we go to collections so what i'm going to do here first of all is i'm going to delete that home page collection right here delete selected collection and then i'm going to add a new collection so create i'm going to name that collection men's i'm going to skip the description just to save some time right here and then i'm going to click on manual because we're going to be adding products manually to this collection i'm going to also add an image on the right side here let's choose this one all right so once the image is uploaded we're going to click on save and now we have created our first collection i'm going to do the same thing for a women's collection and also for a new arrivals collection so for like new items that our store um just got in stock so i'm just gonna quickly do that right now okay so i've just added three different collections we have a men's collection a women's collection and also a new arrivals collection so now what we can do is we can go back to our other tab that we have opened which is our website editor and then we can go ahead and assign these collections to the ones that we have just added so we're going to go to the left side again click on find your style which is the name of our collection list then go to the first collection and click selection select collection and then choose the men's collection and then go to the second one select women's collection perfect so now it has just added these collections that we have just created now the next part of our home page is like a feature collection um so as we don't have any products added yet to our store you don't see any products here even if we add a collection so let's quickly go ahead and click on feature collection right here and um let's say we're gonna name that new arrivals which is the collection that we're gonna be featuring new arrivals select collection and then click on new arrivals select and now when we add products to this collection they will be actually visible here so let's go ahead and add a couple of products to our store so again we're gonna go back to our shopify dashboard on our other tab that we have open and what we're gonna do is click on products and then click on all products and then we're going to click on add a product and now we're going to add our first product to our shopify store so i'm just going to name it let's say minimalist minimalist leather watch also i'm going to skip the description right here to save some time and i'm going to upload an image for particular product let's choose this one right here and then we can also decide on a price so let's say this is 120 and here we have the compared price so if you have like a sale this price is what's going to be crossed out next to this price so you can say this one is down from let's say 160 dollars and if you want to see your margin or something you can also type in the cost for you per for this item so you can also see a profit margin right here and for this stock keeping unit i'm just going to type in a thousand it's not that important we have like 100 this is a physical product weight you can enter weight if you want to charge shipping based on weight i also don't have any variance so i'm just going to leave it as it is right here so i'm going to scroll up again and then i'm going to go to collections and then i'm going to choose this men's collection and also the new arrivals collection so this product right here is part of both of these collections that's pretty much everything i'm going to do for this product right here and then i'm just going to click on save now i'm going to go back to products right here and now you see your first product right there and what i'm going to do is add a couple of more products just to see eventually how this will look like on our finished online store all right so i have now added a couple of products to our store so what we can do now is go back to our website editor right here and let's go quickly and go ahead and save this and now let's reload the page to actually see if something changed right here so now we should actually be able to see all the products so let's scroll down again and now as you see that i've just added those products to the new arrivals collection so you see those products on our home page so that's pretty much it so here you have this feature collection right here and the next part is the feature product so you can have a feature product on your home page what you just do here is you go to feature product on the left side and you select the product so you go to select product and let's select this smartwatch right here that i've added before and that way it is added you see the price right here add to cart by now now the next thing we have on our homepage is the newsletter block right here so if you do email marketing you can just leave it as it is or also change whatever the text is that you need here but as i don't have email marketing setup for this store i'm just going to click on the six dots and then click on remove this section um now the next part we're gonna do is adjust the footer so this is the footer right here on the bottom so i'm going to click on footer on the left side and what i want to do here is actually add a couple of links to the bottom so i want to add all of the legal pages to the bottom of our of our store because that's really what you should do when you have a legitimate store so what we're going to do is go back to the dashboard by clicking on the other tab right here then go to the bottom left click on settings and then we're going to click on legal on the bottom right that will open up all of our different policies right here so we don't have anything in here right uh right now but what we can do is just we can click on create from template and that will just import the templates that shopify kind of gives us and that's pretty pretty good for a start so for most stores this will be pretty accurate or pretty will fit pretty well but give it a quick read through just so that you know what you're committing to here and the same goes for all the other policies so for the private policy you can just click on create from template then again the same thing for terms of servers click create from template and for shipping we can create something from template so i'm just going to type in something like something like that whatever um applies to your store that you're building right now so now we can click on save and now we have set up pretty much all of our legal pages but to actually make them visible on the bottom of our page we need to do another step so we go back to the dashboard we're going to click on online store then we're going to go to navigation and now we're going to click on footer menu because that's the footer menu that we're going to adjust now i don't want to have that search thing right here so i'm just going to click on delete remove that and we're going to click on add menu item go to the link box right here click on it and then we're going to scroll all the way to the bottom and click on policies and here is where we see all of our policies so just click on private policy add then do the same thing again with refund policy and then basically just add all of those policies right here perfect so now we have all the policies in our footer menu right here make sure you save this and click save now let's go back to our store here click save and then reload the page and that should actually add all of those links to the bottom of our page so let's scroll down and as you see here now the links are all on the bottom of our page in the footer now what we can also do is kind of add our social media links right here so let's again click on footer go to theme settings and here we can just add our facebook our twitter our instagram whatever social media you have for your store just add it here and then they will appear on the bottom of your store on the in the footer so people can click on it and follow you on social media as well so what you can also change is the main menu on the top right here so all you would have to do here is go back to the dashboard go to online store navigation and then click on main menu and here is where you can add different items for your main menu so you can add like let's say you want to add collections like men's collection then you want to also add like the let's say the women's collection and let's say we want to delete the home here right here save menu and that will actually add all that stuff here to the top of our main menu i'm going to quickly show you how to add a contact us page because that's really something you should also have on your store so let's go to online store on pages then we're going to click add page i'm going to name that contact us and then i'm going to just type in something like we'll get back to you asap and then what we do is we go to the right side and then we click on template suffix and then we choose page and dot contact click save and now we have added our contact page now what's important is that you actually tick this right here go to more actions and then click on make selected pages visible okay so now it should be visible let's go back to navigation go to main menu and then click on add menu item and then in the link box right here go to pages and then choose the contact us page to add that page to our main menu then what we can do is kind of decide on what we want to have on top right here so that looks pretty good so let's click save menu now we can go back to our store right here click save and reload the page again to see that those links are all on the top of our store right now so we have contact us catalog men's women's search and the cart okay so we're almost finished with our homepage right here so let's go into the theme settings which is next to the sections right here and also take a look at these options so we have the colors so you can change all the colors of all the text all the buttons so you want to really have your branded color scheme on your website right here but it looks pretty good for this one so i'm just going to leave it right as it is now i do want to change the font of my website so i'm click going to click on typography right here i'm going to change the font to the avenir next font select this one and i'm going to do that for every different text so avenue next and also for the body text i'm gonna choose the avenir next and now i kind of have a better i think it's it's a little bit more modern right now um looks pretty good in my opinion okay let's go back then for the card page we're going to leave it as it is we're going to going to change anything um social media we already added a couple of social media links then the favicon is something that you see on the browser on the top right here so this is the one that you see for shopify which is like the shopping cart and we also want to have ours individual logo for our store so when you go back to the dashboard and click on the little eye icon here it will show you kind of a preview of your store and now we have like this basic icon right here which is not really branded and that's what we're going to do now so let's go to our store editor click on favicon right here and then we're going to upload our logo so i have already prepared this right here so i've just created like created like an m for medics watches so i'm gonna click on open i'm gonna select this and then click save and now when we reload this page this one should actually change to our logo let's see okay now we have the m as a favicon perfect so let's again go back and now for the checkout here all we're going to do is just select our logo so i'm going to choose the logo right here so we have our consistent logo throughout the whole checkout process cool um that's pretty much it so let's again see if this page also looks good on mobile so i'm going to click on mobile on the top here and that's pretty much what it will look like on mobile so make sure you optimize it for mobile as well because again a lot of people will be visiting your page on mobile so that's pretty much it if you want to you can also go through all the other pages so you can go to product page and see if all the designs are the way you want it to be um you probably don't need to change anything here because the theme takes care of all the design work basically okay so now before we launch our store we have to do a couple of more things so what we're going to do is first of all save this right here and then we're going to go back to our dashboard and what we're going to do is go to online store and then we're going to go to preferences here what you want to do is just type in the title of your home page and that's just for search engine optimization and also kind of write a little description with like relevant keywords for your specific store and what's really important is that we kind of disable our password for our store otherwise people can't access our store but before we do that we need to go ahead and pick a plan with shopify so that's what we're going to do now so we're going to click on save right here and then we're going to click on pick a plan here or also at the bottom click on select plan now shopify comes with a couple of different plans but for most of you the basic plan will be more than enough now if you do like 20 000 in revenue per month or more it might be worth looking into getting a higher tier plan because you're going to save some percentages on your transaction costs but when you start out the basic plan will be more than enough so that's what we're going to choose right here choose this basic plan and then we can decide if you want to pay pay like yearly or every two years or every 30 days what i like to do is just pay every 30 days because i don't know if the store is going to work out even so i'm just going to choose um pay every 30 days and then we have to add like a credit card obviously as a payment information so just fill it out your credit card information right here and then we're going to go to start plan and now don't worry you still have your 14 day trial but if you don't cancel or close your store now um it will be charged after those 14 days so let's actually go ahead and and go back to online store preferences and then scroll down again and then we're going to uncheck password protection so that way people can actually access our store and become our customers so we're going to click on save once we have unchecked this and that's it for the preferences now next thing we're going to do is we're going to go to settings and we're going to do some important stuff here as well so first we're going to go to general and what you can do here it's pretty much everything's already filled out let's actually put in something here for the legal name of our business so let's say the business would be called medics watches llc so you want to put that in here so that on the the invoices everything will look um correctly now make sure your time zone is correct as well and also your store currency then click save that's pretty much it for the general settings then go back to settings and then click on payment on payments so we're going to set up our payment providers um so what you can do is set up shopify payments which is like the standard way so people can check out using a credit card so what you do here is just click on a complete account setup and then you pretty much fill out everything that they ask of you here like if you're llc just choose llc or if you're like a sole proprietorship just choose this type in all your real and also your bank information otherwise you won't get paid um once you have done that perfect now the next thing is paypal so you can set this up now or you can set it up once you get your first sale with paypal now if you don't want people to be able to be able to choose paypal for whatever reason you have to activate the paypal express checkout if you don't do anything people will have the possibility to check out with paypal so that's pretty much it right here next thing is um shipping and delivery so i'm going to click on shipping and delivery and we're going to click on manage rates right here and they have already set up kind of rates for our product right here so i want to set this up from scratch and i'm going to do free shipping so i'm going to click on the three dots right here and just delete both of those kind of shipping zones rest of the world delete that as well and now i'm going to create a new shipping zone by clicking on create shipping zone i'm going to name that united states because i'm going to be let's say selling in the united states mainly then choose united states right here click done and then i'm gonna add a rate so click add rate i'm gonna name that free shipping let's say that is like two let's say one to three days and i'm gonna just leave it as zero because that's going to be free shipping um so that's pretty much it click done then i'm also going to add like a new shipping zone for the rest of the world so click on create new shipping zone then i'm going to choose rest of the world click done add a new rate right here and i'm going to name this also free shipping but let's say this is like 5 to 12 days because this is internationally also going to leave this at zero free shipping click done and now we have set up free shipping for the united states and also for the rest of the world cool now let's click on save and now we've pretty much set up our shipping and texas is also something you want to take a look at like that's pretty um specific to where you are located as a business and where you're selling to so make sure to take a look into taxes and what the laws are for your specific country so that's pretty much it now another thing i want to show you is if we go to online store and click on the i icon then we again we get to our store the way it looks right now now as you see the current url of our is medicswatchesstore.shopify.com which is not really what you want you want to have a branded store so what i want is i want to have medicswatches.com so what we can do is we go back to our dashboard then we're going to click on online store and then we're going to click on domains and here is where we can buy a new domain or we can transfer domain so we're going to click on buy let's say if you want to trend if you already have a domain just click on transfer domain right here and then they will kind of walk you through step by step how to transfer it to shopify but what i'm going to do is click on buy new domain and then i'm going to look for the domain that i want medics watches and if it is available you can just buy it right here if i would click buy right now then i would just have to confirm again and then once it's done it would automatically connect that domain to our store that we have just created so that's something you want to do you want to have your own branded domain which is really important so um that's pretty much it now we are ready to launch our store so what we can quickly do is just kind of test our store which is something that i would that i like to do before i actually launch a store so click on the little i icon right here which will get you to your store and then kind of test everything out like click on products and click on like add to cart go through the entire customer experience to make sure everything works because you don't want to like pay for ads and then people can't actually check out so check this one right here then we should get to the next page with our contact information shipping then type in something here click continue to shipping and if it it should work everything should work pretty well and now you're pretty much ready to launch your store all right so there we go if you actually made it to this part of the video give the video a thumbs up if it was actually helpful to you and also let me know in the comment section down below what kind of store you are building what kind of products you're selling i'd really love to know and who knows maybe i even make a video tutorial specifically to the products you are selling also if you want to see more tutorials just like this one make sure to subscribe to the channel and also hit a little notification bell next to the subscribe button so that you don't miss any new videos that i put out with that being said thank you very much for watching and i look forward to seeing you in the next video