Shopify Website Design Tutorial 2026 (FOR BEGINNERS)

Hey, my name is Dan and in this video I'll show you how to design your Shopify website step by step. Designing your Shopify store can be intimidating, so I'll go through the process in a way that you can understand. Even if you're a beginner, I'll go over the entire process of designing your store, adding your products, and organizing your product collections so that everything in your store is organized, and it looks appealing. Then I'll make sure to show you the settings and options that you need to change so that everything is ready to go when you launch your Shopify website. The first thing you need to do is sign up for a Shopify account. And if you use the link at the top of the video description, it will bring you to this signup page. Using this special sign up link will get you an extended free trial where the first 3 months will only cost you $1 per month. That gives you plenty of time to design your Shopify website without rushing. I'll click here to enter my email address and then I'll click start free trial. Then I'll enter my password here and click create Shopify account. Then I'm going to enter all my payment information. And once I have that in, I'll click subscribe for $1. Here I'm going to click try basic. You can always upgrade later if you need, but what you see in this tutorial will be done on the basic plan. And here, if you already have your business address, go ahead and enter that. Otherwise, you can click add later. I'm going to walk you through the entire website design process step by step. So, to get into the dashboard faster, click skip customize setup. Now that we're in the Shopify dashboard, the first thing we want to do is choose a theme for our store. The theme sets the overall look and layout for your site design. And Shopify has some great free options to start with. on the design your store tile here. Let's click browse pre-esigned themes. And I'm going to close this setup guide over on the right here. You can see that Dawn is our currently installed theme and it's a pretty popular one. If you want to change it, scroll down until you can see the popular free theme tiles. At the very bottom, you can click visit theme store to see all of the available themes. That will open in a new tab and you can narrow the list down to just the free themes by checking the free box here on the lefth hand side. Here we can see Dawn. If we scroll down we can see trade here. This is a popular B2B theme. If we click on any one of these themes you can see the bigger version. And if it's the one you like you can click try theme. That will bring you back to your dashboard. And in our theme library, we can see that we've just added the refresh theme here. You can click publish and publish again to install this new theme. And if you want to revert back, Dawn is actually the theme that I'll be using in this demo. So in my theme library, I'll click publish on Dawn and publish again to swap them out. Once you've settled on a theme, let's jump into customizing the homepage. Your homepage is the first thing your visitors will see. So, it's worth taking a little time to make it look good. I'm going to close our original dashboard tab right here. And then to open the editor, I like to come to this customize button and rightclick open in a new tab. That way, we can keep our Shopify dashboard open here in this first tab, and we can keep the Shopify editor open in this tab. And then we can bounce back and forth between the two. At the top of the editor, we can see Dawn is our theme. And here we have a page switcher. We're landed on the homepage. These are all of our other pages, but we'll stay here and explore for now. In the lefth hand pane, we can see that our website is organized into different sections, each of which have elements. So, if we come up to the header here, we have this announcement bar. Anytime you click on an element, it will show you the surrounding border. We have a header section that contains our store name, our menu, search, and cart functions. Similarly, if we go back at the bottom of our page, we have our footer. And when this starts to get a little bit more complicated, you can always toggle visibility for any given section. Sometimes I use that to quickly identify what I'm looking at. And then we have the main content of our page within this template section. If I click image banner again, that's going to show us our outline here. And if we go back, we can see our individual elements within the image banner, such as the headings and buttons. Each of these is dragable, and I can arrange that button among the other sections however I'd like. We can add blocks within a section. So under this image banner, we could add more text. Everything can be drag and dropped and we can delete these elements within a section as well. We can also add entirely new sections. So let's click add section here and select image with text. And here we have an entirely new section. We come back and collapse these sections within template. Again, we can toggle or completely rearrange. As you go to drag sections, you can see in the right hand side that Shopify gives us sort of a zoomed out view and allows us to easily see how that section is being moved around. And I'll delete this one for now. Now that you understand the structure of your homepage, let's start designing your store. What we want to do for this homepage is add a slideshow at the top here where the image banner currently is. Having a slideshow at the top is pretty common for fashion stores. To start, let's delete this image banner section. And then we're going to add a new section. And you can either search or find slideshow right here. Now, we see that under our featured products section. So, I'm going to go back and simply drag this above the featured products. Now, for this slideshow, I've used AI to generate some placeholder images, but ideally, if you have your physical products in hand, you want to spend time making the best banner and product images that you can. Good images will go a long way in helping you get sales. We can click between these two placeholder slides here. And if we go back, we can see those slides were created in our elements. When I open this slide, I can come select an image. And here you can go upload image. And you can navigate to the folder that you have these prepped. I'll select my image and click open. And that will show as uploading here. Once your image is uploaded, click done. And then obviously we need to work on the layout of this part here. So over on the left, scroll down until we find layout. And this container property is what will allow us to toggle this box on and off. So if I select this, the container goes away. In the content position, we can move this around. I have some open space here. So I'll try bottom left. And then clearly we can't see the text very well. So, I'll click color scheme. And scheme 3 has light colored text. So, I'll select that. And now we can see this much better. To change this text, let's scroll back up. Here we can see our heading. I'll edit this text to match my brand. And if you want to utilize the subheading, you can enter that here. If you were to remove it, your heading text is automatically going to move closer to the button. But I do have a subheading. So I'll add that here. We can also edit the label for the button. So I can update this to say shop now. And we actually want our button to go somewhere. So under the button link for the moment I'll just click products and all products. Then the button will fill in. And you can see that it's now clickable. All right. So this is starting to look better. At any time we can come up to the top right and click save. But let's add some more slides to our slideshow. We come back here, click back. Let's remove this second placeholder slide by clicking the trash can. And then you can hover in here to add a slide. Or if you like the styling with what we've just done, I can rightclick and select duplicate. And we can edit this second slide the same way. So I'll open it. You can rename this if you'd like. I'll select the image to change and select from library. Add files. This time I'll load the rest of my banners so that I have them as I go through and edit each and I'll open. Then I'll select this image for my second slide and click done. You can see here that I've edited the heading and subheading for this new slide. And we can toggle between them. Now I'm going to go back to my slideshow and then I'm going to repeat that process until I have all four of my slides in my slideshow. Let me take a minute to do that now. All right. Now that I have my four slides completed, you can see how those look within the slideshow by cycling through. If you ever want to see how your site looks on mobile, you can come up to this desktop mobile toggle. And this might help you determine if you need to change any of your images, including any of the crops or if you want to change any of your copy. I'll switch back to desktop here and exit our slideshow on the left. The next section of our homepage that we want to look at is this featured collection. And this will be where we can show off any group of products that we'd like. Now, we don't have any yet. So, let's add some products to our store so that we can eventually add them into this section. This is where we'll want to enter product names, photos, pricing, and anything else your customers need to know before they make the decision to purchase. So, let's make sure to click save up in the top right. And then we're going to go back to the Shopify dashboard. So, if you remember, that's in our other tab. Or you can click here if you've closed that tab previously. Once you're in the dashboard, come down to products. Then add product. Here we can add our title. This first product will be the MOA motion short for men. Then we can add a description. Throughout the dashboard you might see this icon to generate text or images, but in this case I've already prepped my descriptions off screen. And then here we can upload our new media and select the ones that I want to display for this product. Now we can see those images are uploaded. Below images we have pricing. So here you can add the price and then in the compare at price you can add a strikethrough price. So you might show something higher here. If you're going to be tracking inventory this is where you can do it. And if so you have some quantity settings that you can choose here. Below the inventory section is where we have our shipping details. You would want to make sure to set up all of the variants that you have for this product, like sizes and colors. And you can see that Shopify is going to automatically tag your products in some circumstances. And lastly, Shopify will show you how this might look for a search engine listing. I'm going to go ahead and click save. We can see that our product has been added here. And if we go back, this will show our full product listing. At this point, you can now repeat that process to add all of your products into Shopify. Let me take a moment to add a few of my products. Now, with your products now in place, we can organize them into collections. Collections help group related products together. Popular examples of collections could be men's and women's clothing, new arrivals, and best sellers. On the left, if we click on collections here, we can create different categories for the types of products that we are selling. You'll see this homepage collection here by default. And if we select it and go to the three dot menu, we can go ahead and delete this one. And now we can add some new ones. So I'll click add collection. And I'll first set up my men's collection. You could enter a description here if you'd like. And I'll keep the collection type set to manual. That way we can add products to this collection one by one. meaning that we'll have precise control over which products get added to this collection. Like some of your banner images and your product images, you want your collection images to be top quality as well. Again, I've generated a few with AI for this tutorial. So, I'll click add image and I'll add some new files. Once that's uploaded, I'll select my file and click done. And then we can scroll down here. In the product section is where we want add all of our men's products. So I can click browse here and I'll select all of my items that belong to the men's collection and then I'll click add. Finally, at the very bottom, I will click save. Up here at the top, I will click create another collection. And I'll repeat this process for a women's collection and for a new arrivals collection. So I've just finished creating my new arrivals collection. I can go back to see all of the collections that I now have. And real quick before we go back to the Shopify editor, I want to show you how to add products to these collections from the product page itself. So, let's go products, select any given product, and then from within this three dot menu here is where you can add any given product to a collection. You'll see the three collections that I've created here. So, that's just another way to add your products to these collections. So, now let's go back to the Shopify editor in this other tab. And let's go back here. And I want to edit this featured collection section. So, I'm going to click on it. And for the collection, instead of products, I'm going to replace. And you should see the collections that you've just created. I'll click new arrivals. And I'll rename this so that it's better fitting. If you have many products, you might want to keep this column count at four. Otherwise, I can drag this to three, knowing that my new arrivals will now fill the entire width of the column. Finally, if you add a description, that will show up here in the column underneath your heading. Let's go ahead and save our progress. And let's go back. I'm going to collapse the slideshow. And I want to create a new section to be able to display our men's and women's collections. So, I'll click add new section. And here you want to select collection list. I'm going to change the columns to two. And we actually don't need the heading here. So I'll go ahead and remove that. I might want to change the scheme. So this slightly darker background so that this section stands out slightly from the section above it. And then if you click anywhere on this collection, you can actually set the collection that you want to show. So here I'll select men's. Come over to this one and select women's. And then I've already shown my new arrivals. So I actually don't want this collection featured here. I'll click and hover and remove. Then I can collapse this collection list. And we'll save this progress as well. Now that we have some collections in place, we need to customize the header and footer of your store. So I'll scroll to the top. These sections, the header and footer, are going to appear on every page. So, it's a good place to put your logo, the navigation menu, and important things like links to your policies at the very bottom. Let's scroll back up to our header and first take a look at this announcement bar. If we click into this element, we can edit the text. We can add a link. This is pretty helpful if you want to announce a sale or something else very important to all of your guests. You can imagine this might be a good place to put a Black Friday code, maybe a summer discount, but if you don't have any announcements at the moment, we can always remove this. And I can come over here and remove it from the navigation as well. What we have left in the header now is our store name, our menu, and our search bar and cart. Instead of our store name here, I want to add the logo. So, I'm going to click on the header section. Then, I'm going to scroll down till we see theme settings and open that. And all the way down here, we see our logo. I'll click select. Then I'll add a file. I'll find my logo and upload that. Once it's done uploading and it's selected, click done. And now we can see our logo in the header. Here I can control the width. I might keep that at about 90. And I can shrink this vertical offset a little bit. We also have a control here for the vertical offset. But if this header is a bit taller than you'd like, you might have to go in and edit your logo. So if I click edit, crop and transform, I'll check the free form aspect ratio and remove some of this room on the top and bottom. Maybe like so. And click apply. Save and exit here. Now we can see that header is a little bit thinner. We come back over in the left and scroll up. We have a few other settings. We could change the logo position to the center or anywhere else that we choose. I kind of like middle center for this site. And we could change the menu type too if we wanted. If we change this to draw, we could have a super minimal setup with this drawer button right here. But I kind of like it visible. To customize the options in this main menu, let's go back to our dashboard in this tab and come down to content. Under content, click menus. And here's the main menu. In the menu items themselves, you can drag and drop and you can delete. So, I'll remove catalog and I'll add a menu item for men's. And then for link, I'll link to a collection that I've created earlier. I'll also add one more for women's and link to that collection as well. And I'll scroll down and click save. Shopify says our menu is updated. And now if we go back to the editor and we refresh, I'll click main menu. edit. We'll see what we've just added. And that should be enough to refresh this menu. Now that we've customized the header, let's go back and take a look at the footer and open this section. And here, I don't really want to collect emails at this time. So, we can turn this email sign up off with this toggle. And we can see our social media icons are enabled, but I don't see any here. So, go ahead and click manage social accounts. Scroll down and here are your social links. So if I click here, I can start to enter them one by one. Let me add a few. Now once you've added a few links, you can see how they show up. Now this opened the theme settings. So let's click footer to get back to our footer menu. If you wanted to turn the social media icons off, you can always toggle this button. Under the social media icons option, you have the country and region selector. Make sure you leave this enabled if you're selling to multiple countries so that people can switch to the country in which they live. Same thing for this language selector. I would leave this enabled. And then for payment method icons, you can toggle this right now. You can see that it doesn't do anything, but this will show payment icons later. And I would leave this turned on as well so that people know they can pay however is most convenient for them. We don't see the icons yet because we need to set up payments first. But don't worry, I'll show you where to do that soon in the important store settings. This is what those payment method icons will look like once we have that set up. And then down here, we have policy links. So, you can see this privacy policy. Let's toggle this just so you can see what happens. But we haven't yet set up a return policy, a shipping policy, and some of our other policies. Because this is here by default, we do want to review that. and we want to set up the other policies I mentioned so that we can display them all in the footer. To do that, let's make sure if you have any unsaved changes, go ahead and save them. Then we're going to head back to our dashboard in this tab. Let's go down to our settings. And at the bottom here, you can see policies. And the written policies are all listed out here. So, we can go one by one. I'll click on the return and refund policy. Many of these policies are going to include a template. So, that's often a great place to start, but you want to review and make changes wherever you need. I'll click publish for now. The privacy policy is the one that's automated by default, so I'll cancel that. For terms of service, I'm going to insert the template and publish that one. If you open your shipping policy, there is no template, so you'll need to enter your details. Depending on how and where you're shipping, this one could be a little bit more complicated. So spend the appropriate time here before publishing that policy. And then finally, your contact information is required. So if we open that and we click insert template, Shopify will provide you a skeleton of what you should fill out here. And you can click publish once you've done so. These all save automatically. So let's go back to our editor. And I'm going to give this a refresh. I'll scroll down to our footer and we can see all of our new links here. One thing that we can't do with the Dawn theme is center these policy links. As they are now, you can see that these links are aligned to the left. So, if you really want to center these links, let me show you a quick workound that I use. Let's disable the policy links for now and click save up in the top right. Then what we want to do is make a menu, add our policy links to the menu, and then add that menu to the footer. To do so, let's head back over to the dashboard. I'm going to close out of this policies section. Back on the left, we want to find content and menus. Then we can come over and click footer menu. And by default in this menu, we have search and your privacy choices. I'm going to use the trash icon and delete both of those. Next, what you want to do is click add menu item. And if you come over to link here, we can start to add our policies. So, I'll add the refund policy first. And then I'll add another link policies privacy policy. And then I'm going to continue until we have all of our policies added. Once you have them all added, come down and click save. Our menu has been updated. And we can come back to the editor. Now, let's go back to our footer. And in the footer, we want to add a block. And we want to add menu. You can see this is the preview of what we're going to get. Let's click menu. And now we have all of our links shown. Now, I want to delete this heading. So, just click the menu, come over to the heading section, and remove the quick links text. And if we scroll down to the very bottom, you may also want to delete the powered by Shopify link here. To remove this, let's start by clicking save so our menu changes take effect. We're going to come back to the dashboard once more. Then under sales channel, we'll go to online store and then where your theme is, come to the three dot menu and click edit default theme content. Up top, we have a lot of tabs here, but for our purposes, we can just search for links. And toward the top, you'll see powered by Shopify link here. This is the placeholder text. I'm just going to enter one single space and then click save. To check the change, we can come back to the editor and refresh. Scroll back down to the footer and the powered by Shopify link is gone. We still see our store as my store. So that is the last thing that we want to change here. Let's take one more trip to the dashboard. This time head all the way down to settings. And right at the top we see our store details. So go ahead and click on my store. There's a pen icon here. Select your store name. and I'll enter MOA and save. Then we can exit out here once again. Return to the editor to refresh and check our change. And there we go. Copyright 2025 MOA. After taking care of your header and footer, let's take a quick look at the theme settings. This is where you can adjust your store's colors, fonts, and styling to match your brand or your design vision. To get to the theme settings, come over all the way on the left and you can find them under this gear. The first thing we want to do is change our favicon image. So, if you expand the logo section, right here is where we can upload a favicon icon. If you're unfamiliar, come up here to the three dots and click view. That will open our store. And this little image in the tab is our favicon. For this MOA brand, I'll use something similar to this. So, I'll come back to the editor. I'll click select to upload an image. Then I'll add a file. Select what I want to use and open. And when it uploads, I'll click done. Now I'll click save in the top right. And we still have our store open in this tab. So I'll select that and then refresh. And it's a little difficult to tell given the styling of this Chrome browser, but that's our Favicon right there. I'll go ahead and close this tab. Below logo, we have our colors. And here you can see all of the different schemes that we've used throughout this tutorial. If you open one, you can change all the individual hex colors. The schemes are usually a great start for any given theme that you're using, so I don't tend to edit these, but you have the option to do so. In a similar way, you can customize options for your topography, and you have fonts and scaling for both headings and your body text. Under animations, you have effects that you can put on for hover. But again, the Spotify theme that you've chosen will do most of the heavy lifting in terms of the design of your homepage. After you take a look through the rest of these theme settings and you add any additional content that you would like on your homepage, your design should be looking pretty good. One thing I would double check is how your store looks on a mobile device. As more and more people shop from their phones now, I like to go through my pages and then note down any tweaks that I should make before I go live. But things are generally looking pretty good here to me. But before you make your store live, you'll also want to take care of some important store settings. These settings include things like your payment methods, your shipping rates, taxes, and your domain name. Let's see where those things are located. Now, make sure to save if you have any unsaved changes and then come back to your dashboard. Then, let's start by going to settings. Here, you want to make sure that you verified your billing address, your currency, the type of units to use in your store, and your time zone. Another important setting is around payments. So, if we come up here on the left and click payments, this button is how you can activate Shopify payments. This is also the step that I mentioned earlier that you'll need to complete in order to show the payment method icons in the footer of your homepage. I'll click here and the account setup is pretty straightforward. You'll need to check your email inbox and make sure to verify your account and then at least in the United States I needed to verify my address and then a form of identification. If we go back to payments you'll also see a few options here. Some of them control how gift cards work and how Apple Wallet works. Let's scroll back up and head on over to shipping and delivery. And it's going to be important to pay attention to these general shipping rates and make changes based on your shipping regions, your quantities, and weights. If you scroll down, you can see the shipping zones here. And at the very bottom, this is how you can set up additional markets. Let's scroll back up and visit taxes and duties next. Now, when it comes to taxes and duties, you want to make sure you're spending the appropriate amount of time to correctly set the tax and duty information. Shopify recommends consulting with a tax professional if you're unsure, which is certainly not a bad idea. The next store setting that we should take a look at is under domains. And we currently have a Shopify domain already. So if we click this and you were to select this domain and copy it, you can come up and open it in a new tab. So this is a valid domain to our store, but we really want a branded domain. So let's close this tab, come back, and you can see that we have two options. We can connect an existing domain, but if you're setting up this store for a new brand, it's easy enough to buy directly from Shopify. I'll click buy a new domain. The search bar here might automatically be populated with your brand name, but depending on your brand, the do version of that domain might not be available. You might need to try a few more combinations to find a domain that is available. But once you have, you can easily click buy and follow the prompts and check out. And then if you're selling internationally, adding additional languages is really helpful to increase your sales conversions. So, let's come over here to languages. And Shopify makes it fairly easy to add them. You can click here to add a language. Here's the language selector. And if you select one, you can then follow all of the prompts to correctly set these up. And then you can continue to set up all the likely languages that your target customers speak. Once you're happy with your overall Shopify website design and you've taken care of these important settings, it's time to publish your store. Let's come up here to the X in the top right corner and click out. Then I'll go home. And here in the top right, you can see the option to make your store visible to anyone. I'll click unlock store. Now, if you get to this page and the toggle is grayed out, this banner will let you know that you still need to add your store address. I'll click here to do that quickly. Once you update that, if you still needed to click the X and back on the password protection page, the toggle is now open. And I'll just go ahead and toggle that off and then save. And now our online store is open to everyone. If you haven't been following along, make sure to use the special offer link in the description so that you get your first 3 months on Shopify for only $1 each month. And if this video was helpful, please give it a like so that it gets shown to others just like you.