Metics Media · คลังวิเคราะห์

The Ultimate Beginner’s Guide to Shopify

📺 ดูคลิป · 👁️ 58,152 views · 📅 2026 · ⏱️ 55:52 · 🛒 eCommerce / Shopify / Dropshipping

📌 สรุป

คลิปนี้สอนการสร้างร้านค้าออนไลน์บน Shopify แบบครบวงจรตั้งแต่เริ่มต้น แบ่งเป็น 10 ขั้นตอนชัดเจน ตั้งแต่สมัครบัญชี เพิ่มสินค้า ออกแบบหน้าร้าน ตั้งค่าชำระเงิน/จัดส่ง ไปจนถึงเปิดร้านจริง เหมาะสำหรับผู้เริ่มต้นที่ไม่มีประสบการณ์ด้านเว็บไซต์มาก่อน เน้นการใช้ Horizon theme และ AI tools ของ Shopify ในปี 2026

🔑 ประเด็น / ขั้นตอนหลัก

🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง

💡 เอาไปใช้ / ข้อสังเกต


📄 Transcript เต็ม (English, 10,880 คำ)

Shopify is the easiest way to build a professional online store. And in this video, I'm going to show you exactly how to go from a completely blank account to a fully published store that looks like this, ready to take real orders. I've broken this into 10 simple steps. First, I'll show you what Shopify is and how to get the best available price. Then we'll go deep on the parts that actually matter, designing your homepage, using Shopify's new AI tools, adding products, and making everything look like a store people actually trust enough to buy from. The first few steps are quick, creating your account and getting oriented. But stick around for the design section because that's when your store goes from looking like a template to looking like a real brand. Now, if you've watched other tutorials and felt overwhelmed, or even if you've never built a website before, no worries. I'm going to walk you through every single step and I won't skip anything, so you can follow along. So, Shopify is a platform that lets you build your own online store. Instead of selling on someone else's platform, like Amazon, Etsy, or eBay, it's your own website where customers come to you, buy from you, and you control the entire experience. It's your brand, your prices, and your customer relationships. Think of it like renting a storefront, except it's online and you can set it up in just an afternoon. Right now, Shopify offers a free trial, so you can build your entire store before paying anything. And if you use my link in the description below, you'll also get an additional 3 months of Shopify for just a dollar a month after your trial ends. The basic plan normally costs $39 a month, so this saves you over $100. It's the best deal they offer. So, to get that deal, use the link on screen or scroll down and click the first link in the description below. When you use that link, you'll land on this page here. Go ahead and add your email to get started. Create a password, complete the CAPTCHA, then click to create your account. Next, you'll need to enter your payment information. Now, nothing is charged right now. On the left side, you can see it says there's a free 3-day trial, and then after that you'll be charged $1 for your first month. Go ahead and use either PayPal or enter your card information to get started. The next page shows you three plan options, and the cool thing is for your first 3 months you can get any of them for just $1. I recommend clicking the view plan details button if you're not sure which plan you want to use, but for most people you can get started with the basic plan, and that's what we're going to use today. Next, Shopify is going to ask you a few quick questions about your business. For the most part, these just customize the setup checklist on your dashboard, so quickly answer these first few questions however makes the most sense for your business. The last question is, what should we call your store? Go ahead and enter your store name how you'd like it to appear on your site. Then click finish. And just like that, we're inside the Shopify dashboard. Step two, let me give you a quick overview before we start building. All right, this is your Shopify admin, the backend of your store. Everything you need to build, manage, and run your store lives here. On the left, you've got your main navigation. Home, that's where we are now. Orders, that's where customer purchases show up. Products, where we'll add what you're selling. Customers, a list of everyone who buys from you. And you can access almost anything else you need from this menu. Just look here for the broad category first, and then dive in deeper. A little further down, we have online store. This is where we'll customize how your store actually looks. We'll spend a lot of time in here. And then the gear icon with settings is at the very bottom. That's where we'll handle payments, shipping, and your domain name later on. You'll also notice that Shopify gives you this setup guide in the center of the screen, basically a checklist of everything you need to do before your store is ready. But the good news is, we're going to cover all of it in this video, so you don't need to pay too much attention to this. And one more thing, you see this little icon up top right here? If you click that, that's Sidekick, Shopify's AI assistant. If you ever get stuck on something after this tutorial, you can ask it questions right here. It's free on every plan. You can close it with the little X in the top right. If you ever want to see your Sidekick conversation history, you can click Sidekick conversations in the lower left. It'll appear down here by settings. Now, step three. Before we start designing, you need to choose a theme. A theme is basically a template that controls how your store looks, the layout, the fonts, and the style. Think of it like choosing the interior design for your storefront. You're not locked into it, you can customize everything, but the theme gives you a starting point so that you're not starting everything from scratch. In your left side navigation, click online store. And here you can see we've been automatically routed into the submenu, themes. In the center of the screen, you can see that our default theme is Horizon, version 3.5.0. Horizon is Shopify's newest default theme. It's built with a block-based system that gives you much more control over your layout, and it loads faster than older themes. It also gives you access to some of their newest AI features. On the right side here, you can see the edit theme button. This is what we'll click to edit our store. If you scroll down, you will see this design your store in seconds bubble, and if you type a prompt in here, you can generate a theme that's unique to your store. However, each theme has different features, so if you want to follow along with this tutorial step by step, I don't recommend doing this. That said, if you want to choose your own adventure, by all means go ahead, it is a very cool feature. You can scroll down and browse other free themes here, too, but Horizon is a great choice and it's what we'll use for this tutorial. Now, Shopify sometimes runs split tests and changes which theme new stores get by default. So, if you don't see Horizon as your current theme, here's how to switch. Scroll down to this popular free theme section, find Horizon, click add, then when it loads in your theme library, click the publish button to make it your active theme. The rest of this tutorial assumes you're following along on Horizon, so it's worth the 30 seconds to switch if you need to. Once you're done with this tutorial, you can always switch to a different theme and try other ones out later. In step four, we're going to add products to your store and organize them into collections. Those are the categories customers browse. Products first, then collections. Now, before we add anything, you might be wondering, where do I actually get products to sell? And the answer is, it depends on your business model. Some people make their own products, like handmade goods, art, or digital downloads. Some people buy wholesale and resell. Some people use print-on-demand services, where a company prints your designs on t-shirts, mugs, or other products. And some people drop ship, where a supplier ships directly to your customer. Shopify works with all of these. For this tutorial, I'm just going to add some sample products so we have something to work with. The process is the same regardless of where your products actually come from. Let's add our first product. On the left side menu, click products. Then click add product. Give your product a name. In my case, I'm selling an Alpine hiking backpack, 45 L. Next, you'll need to write a description. You have a text editor here that has all the normal features. Or you can click the AI sparkle icon in the upper left to generate text automatically. Click it, give the AI Sidekick a prompt, and submit it. You can see the Sidekick write a nice description for you, and then you can click in to edit, regenerate, or write your own. Next, upload your product images under the media section by clicking upload new. Here, I have a folder of photos for this particular product, so I'll select them all, and then click open to upload. If you have a folder open on your computer already, you could also just drag and drop them into the media section here as well. Next, scroll down and set a price for your product. You have some additional settings right below the price, including compare at. You can use the compare at price to show that your product is on sale. For example, right now I'm selling this backpack for $89.99, but it usually sells for $129.99. The compare at price will show up on the product page with a strike through it, and $89.99 as the current price. Next, if you scroll down the page, there's a toggle to enable inventory tracking. Set how many of the product you have currently available. Under the inventory section, you also have options for SKU, barcode, and sell when out of stock. Let's add a SKU. The SKU is a unique product code for your records, which is optional, but helpful as you grow. I'll enter mine here. Scrolling down, we have the shipping section. And by default, the physical product toggle is switched on. If you were selling a digital product or a download, you could toggle this off. With it toggled on, you can set your shipping package details. To do this, click the drop-down under package, click add new package, and then enter the dimensions and weight of the typical package for this product. And give your packaging a name. If this is your normal package size, you can also click the checkbox to make it your default package. If not, just click add In the next section, you can add variants. For example, if you sell your product in different colors or sizes. And finally, at the very bottom, you can see a preview of how your product will show up in search engine listings. Scrolling back up to the upper right, we can enter some additional information to help organize our product. Let's give this product a type. In my case, I'll say backpacks. For vendor, we can use the store name, but if you sell products from multiple brands, you could use the brand name here. I'll skip collections for now, I'll show you how to do this in the next step, and then I recommend adding tags. These are additional short description words that help to categorize your product. In my case, I'll put hiking, outdoor, and backpack. At the top, you can set your product status. There are three options, active, draft, and unlisted. I'll leave mine set to active, so it shows up right away as a purchasable product on the store. When you're done making changes to your product, click save in the top. To get back to the product list, I'll click products again on the left side. And here we can see the Alpine hiking backpack. To add another product, you can click add product in the upper right. I'll add a couple more products quickly, so we have something to work with. Here, I'm adding a waterproof trail running jacket for both men and women. So, I'll want to add a variant for both men's and women's options. We'll click add options under variants, and then select target gender. Then make sure both male and female are selected from the list. You could also add unisex or other from this list. When I click done, now we have two options. You can add variant specific pictures, which I'll select from my photo gallery. And then you can set inventory per variant. I'll say that there are 50 of each for a total of 100 at this shop. Okay, fast forward and I've added a couple of products to my list here. You don't need dozens of products to launch your store. Even two or three is enough to start because you can always add more products later. Now that we've got some products in here, let's organize these into collections. Collections are basically categories for your products. Think of them like aisles in a store. Hiking gear, camping equipment, sale items. When a customer visits your store and clicks shop in the menu, they'll browse by collection. Without collections, all your products are just in one big pile. Setting these up now means our store will actually be organized when we start designing it. To view and create collections, click collections on the left side under your products menu. Here you can see Shopify already created one for you. This is your homepage collection which controls which products show up on your homepage. You can add or remove products from here to curate what visitors see first. You can come back to this later when we design the homepage. For now, just know that it exists. To create a new collection, click add collection in the upper right. Give your collection a name. I'll create one called hiking gear. Then write a brief description of your collection. Just one to two sentences is fine. Next, you'll need to select a collection type. There are two types, manual and smart. A manual collection is one that you can select which products go into manually. Whereas a smart collection allows you to add products automatically to it using rules like tags. The homepage collection that was created is a manual collection. It has just the first product you add to your store automatically added to it and you can go in and add other products to it manually. To add products to a manual collection, you can click browse and then select products from your list and click add. You can remove them from your list by clicking the X next to them in the list. Now, I want to create a smart collection. We'll change the collection type to smart, and then let's add any products to this list that have the tag hiking. And you can see now it's automatically pulling in this waterproof trail running jacket and this alpine hiking backpack. Smart collections are great for when you add more products over time. That way you don't have to manually go in and add each new product to a collection. It just automatically gets pulled in if it meets the right conditions. Finally, scroll up to the upper right and add an image to your collection. You can add a file, drag or drop one, select one from your library, or even generate an image. Let's generate an image in this case. The sidekick says describe your image. I'll say hiking gear. And click send. And here it comes back with a beautiful generated image. We'll click keep in the bottom right to use it. It'll get added to our library, and then we'll click done to use it for our collection image. When you're done creating or updating your collection, click save in the top bar. Collections appear as categories on your store and in your navigation menu. We'll set that up shortly. Once you have more products, you can keep adding collections for each category. You don't need a ton of collections to start. Even one or two categories is enough. You can always add more as your store grows. Products and collections are done. Now step five, and this is where it gets fun. We're going to design two things, your homepage and your product page. The homepage is what people see when they first land on your store, and the product page is where they actually buy your product. Let's start with the homepage. On the left side navigation, click online store, then click edit theme. This is the theme editor. On the left is the section list. In the middle is a live preview. The top bar's center drop-down lets you switch between pages, toggle between desktop and mobile versions of your site, and open up the AI sidekick if you need help. Let's quickly understand site structure. Your store is made up of pages, your homepage like this one, your product page, contact page. Each page is built from sections. That's these large horizontal areas here like a hero banner or a featured collection, testimonials, that sort of thing. And inside each section you've got individual blocks like headings, images, buttons, and products. Pages are the biggest part, sections are the medium part, and blocks are the smallest part. That's the whole system. Once you understand that, everything in this editor makes sense. Your homepage has one job, convince someone who just landed here to keep browsing. So, think about it in three layers. A strong first impression at the top, that's your hero. Then show them what you sell, that's your featured collection. Then build trust, testimonials, an about section, anything that says this is a real business. We'll build all three. We're just going to focus on the homepage right now, but you can always come back and tweak other pages later. Let's start with the hero section. That's this intro section right at the top of your homepage. It's the first thing your customers will see, so we want it to be really engaging. Let's start by swapping out this placeholder image. Click on the banner, and then you'll get a menu with settings that appear for this hero. It'll appear on the left side for small screens and on the right side for bigger screens. To replace the placeholder image, find the media one section, and then to upload your own image, click select. Or if you want to use some free stock photos, you can click explore free images. I've got a specific image I want to use, so I'll click select, then click add files, and grab this image I want to use for a hero. Let it upload, then click done when it's finished. Nice, now we have a custom image. Now let's change the header text to something relevant. Click it, and then you get a text box in the settings. Let's say adventure starts here. Next, further down the menu in the typography section, you can see there's a preset that says heading two. Let's change this to heading one. This makes it a little bit bigger. It also does another thing in the background. The main header for each page should be set to a heading one or H1. This is good for your SEO or search engine optimization. It helps search engines understand the contents of your page better. Now let's adjust the button text, link, and style. Click the button in your hero, and then button settings appear. For the label, change it to something relevant. Let's say view products. The next item down your menu is the link. Where does the button go when you click it? If you click the default that says all products, you'll get a list of places you can send your customers. Right now, it links to the all products collection, which is fine for the moment. The next menu item you have down the page is style. Right now, it's set to a secondary button style. But since this is our first and main button on this page, let's make it a primary style button. This makes the style a little bit more bold. Next, let's adjust the size and layout of our hero section. Click on the banner, then scroll down the settings to the layout section. Here, there's a height setting which we can change from medium to let's say full screen. This makes our hero image much larger. After expanding it, you notice that the text and button are at the bottom of the image. I'd rather have it be in the center of the image. So, let's change the position setting from bottom to center. There we go. Next, if you wanted to change the alignment of the text so it sat on the left or the right side of the image, you could do that here, too. The alignment setting will let you switch between left, center, and right. For this website though, I like center, so I'll keep it there. Next, let me show you one other setting I think really levels up the appearance of your homepage. Scroll down a little further to the appearance section, and then there's this blurred reflection toggle you can turn on. If you toggle it, you can see that any image you have in this hero banner will be reflected and blurred in the section below. It gives it a cool transition effect between sections. This reflection opacity of 75% I think is a bit much for this particular site though, so let's drag the slider to the left and reduce it until it looks just right. Something around the 30% mark looks pretty good. Instead of having a hard cut off, we have a nice gradual transition into that white color. Now, every section has these settings, heading, image, buttons. Once you learn one, the rest follow the same patterns. Now let's edit our featured collection. By default, the collection that appears here is your all products collection. That's basically just all the products you've added to your store. To change this, click on the section, then the first field that appears in the menu is the collection option. Click the drop-down, click replace, and here you can select a different collection. Remember Shopify created a homepage collection for us by default, and right now it just has the one product in it. But right now, I'm running a sale on hiking gear, so I want to feature that collection specifically on the homepage, and I'll select that. Next, you can choose the type of display. Right now, it's set to grid. You can also do carousel, which if you have a lot of products will show up as something you can scroll through, or editorial, which gives it more of a spaced out feel. I like this for this site. You can also adjust the number of products shown and other layout characteristics here. Next, let's add a new section to our page. To do that, first click out of whatever submenu you're in. Then, you can either add a section by clicking add section in the left side panel, or you can scroll on your page to the area between two sections, hover between them, and a plus button will appear. When you hover over that plus button, you'll see an add section button. Click that. A new pop-up will appear showing you all the different section types you can add to your page. Scroll through them and pick something that fits your brand. In my case, I want to add a testimonials section. So, I'll scroll to the text section here and use this pull quote format. Then Shopify will automatically add the new section. And we can edit it quickly just like we edited everything in the hero section. I'll click this text and in the text box, paste in a quote I have from a customer. Do a little light formatting. Change the text size by changing the preset typography. We'll do heading four, maybe. That's looking better. Next, we can change the appearance of the whole section by clicking on the section and then under appearance in the menu, we can change the color scheme. Here we have scheme one set and if you click the drop down, multiple other color scheme options will appear. Let's try scheme five. This color scheme gives us a dark background and light text. Next, we can move the section to a different place on the page by going back out to the main panel, hovering over this pull quote section, clicking and dragging the six dots to the left of it, and then dragging it to a new location. Let's put it here at the bottom of the page. There we go, that looks nice. Now, one of my new favorite features in the Horizons theme is that Shopify added an AI block generator that lets you describe what you want and it builds the section for you. Let me show you how this works. Let's click to add a new section at the bottom of the page and then click generate. Here, you simply describe what you want to build. I'll say, create a section highlighting free shipping on orders over $75 with an outdoor adventure theme and then click send. You can see the Shopify sidekick start to write code specifically for your store. And when it's finished, you'll see the new section that it created. Now, you can follow up with additional instructions if it didn't do exactly what you had in mind. So, here I'll say, make the banner bigger and bolder, add a button that links to the catalog and makes people really want to click it. Then click send and you'll see the Shopify AI sidekick get back to work revising the section. When it's done, you'll see it implemented the changes I requested. Now, the cool thing about the AI sections is that they're not locked in as they are. It's custom coded, but you can tweak anything that it creates. Think of it as a starting point, not the final design. It'll create a bunch of customizable settings for you in the left panel that you can adjust until you're happy with it. For example, we could scroll down and change the button color. We can choose to hide this icon. And we can even add a background image. So, let's add one. I'll click to add a file and then choose this promo banner image I've got here of some mountains. And click done to add it. It loads the image in and then we can adjust the image opacity slider until it has just the right level of contrast between the text in the foreground and the background image. Somewhere around 0.3 looks pretty nice. Now, if you notice any section or block feels a bit cramped like this here, you see this banner that it created sits right next to this black section here. It would look a lot nicer if there was a bit of space between these two sections. This is where you'd want to adjust the padding. Padding is essentially the space between elements on a page. So, let's find the padding setting in this left side menu. Here, there's a layout section that has some padding settings, but they're already set up a little higher, so I'm not sure that these are the right ones we want. These sliders seem to be for the padding for the blocks within this banner, but I want to adjust the padding between this banner and the next section up. So, let's try to find that. After scrolling through, I think it's because I clicked this banner section here, but we actually want to click on the whole section itself. And there we go. If we scroll down, now we have options for top and bottom padding. So, let's add 40 pixels of padding to the top and about the same to the bottom. There we go. Now, we have a little bit of white space at the top and bottom of this custom element, which gives it a bit of room to breathe and makes the layout look more clean. Next, let's link this button somewhere. We'll click the button. Shop now for the text is just fine. Let's add a link to our all products collection. And while we're updating buttons, let's actually do the same thing for the button in our quote section. We'll click this button. We'll change the style from link to secondary button. And it's already linked to all products, so that's looking great. Now, I know this theme editor looks like it has a lot of options, but just focus on one section at a time and do your home page first. You can always come back and refine things later. They don't need to be perfect right away. But now, our home page is looking great. So, let's customize the product page next. That's what customers see when they click on a specific product. In the top bar, click the home page drop down and then switch to product and default product. So, this is the product page template and the keyword here is template. You're not designing a page for each individual product. You design this once and every product in your store uses the same layout automatically. So, if you add a you may also like section here, which we get in this particular layout, it shows up on every product page. Get it right once and it works everywhere. Now, this is the page where people actually decide to buy. They've browsed your store, clicked on something that caught their eye and now the product page needs to close the deal. Good photos, a clear description, an obvious add to cart button, and nothing that makes them hesitate. This default layout here has images, our title, the price and compare at price, some buttons, and our description. This is all looking good so far, but we can refine this and make it even better. First of all, on the left side under the template section, you can expand each of these sections and then show or hide any elements you want using the eye icon next to each block. One thing I like to do is adjust the image gallery layout. Click on the image gallery and then you can change between grid and carousel view. Personally, I'm a huge fan of the carousel view cuz it makes it so you have one big image and then people can toggle through them. Now, with the carousel view, you might also want to change the desktop pagination to something like thumbnails. That makes it more obvious that there are more images your customers can click to see. You can also change the icons that indicate that people can toggle left and right between the different images. Let's try large arrows. And you can see here, it's kind of hard to see on this image, but there are arrows on the left and right. This will allow your customers to toggle between the images. Next, depending on what kind of product you're selling, you may or may not want the quantity selector to be enabled. So, you can click this and then click the eye icon in the floating toolbar if you want to hide it. However, I'm going to keep this enabled in case people want to buy multiple backpacks. Next, I'm going to add some padding to the top of this product information section. That way there's a little bit of space between this image and the next section up. 40 pixels or so seem to work pretty well on our last page, so let's do that here. That looks pretty good. If you want, you can change the color scheme of the product section. Something like a light gray could be nice. But I've got a trick for making this section feel like it ties into everything else, so I'll set it back to scheme one and I'll show you how to do that later. Finally, I recommend clicking on the you may also like section that it loads in by default and you can choose how it recommends products. Do you want to recommend related products or do you want to recommend complementary products? For example, do they need a water bottle to go with their backpack? If there aren't any complementary products or related products, the section will just hide itself entirely. Similar to the featured collections section on your home page, you can also change between grid and carousel layouts. I don't have a lot of products right now, so they won't look terribly different. So, I'll just keep grid. All right, that's our product page. Step six. There are three things that tie your whole store together. Your extra pages like about and FAQ, the navigation menu that connects everything, and your header and footer that show up on every page. Let's build all three starting with pages. So, your store has a home page and product pages, but most real stores have a few extra pages like an about page, an FAQ page, things like that. They aren't required, but they build trust. When a customer is deciding whether to buy from you, they want to know who you are and how to reach you. So, let's create those now so they're ready when we set up the navigation menu. First, let's navigate back to our admin panel. Click save in the upper right and then click the exit icon in the upper left. Next, on the left side under online store, click pages. Every store should have an about page. It builds trust with customers. So, let's create one. Click add page in the upper right, title it about us, and then write a brief description or use AI to do it. Once you've got your content description, change the visibility in the upper right from hidden to visible. Then click save. Nice, we've created the page. Now, click pages under online store again on the left side to return to the page list and you can see now about us is in the list here. You could also create an FAQ page to answer common questions about shipping, returns, sizing. This will save you time on customer support. I'll create an FAQ page real quick. These pages exist, but they won't show up on your store until we add them to the navigation menu. Let's do that next. The navigation menu is what customers see across the top of your store. It's how they move between pages. Right now, your menu doesn't know about the pages and collections we just created. So, we need to connect everything. In your admin panel left side nav, click content, then menus. Here, you can see you have three items: main menu, footer menu, and customer account main menu. We won't work too much with the footer menu and customer account main menu today. The main menu is the one that appears in your header, so we're going to work with that. Click the main menu to open it. Right now in our menu we have home, catalog, and contact. And catalog refers to the page where you can see your all products collection. Now, most sites have it set where if you click the logo, that returns you to home, and that's a behavior that most people who are browsing the web understand. So, I think having the home item here is redundant. So, I'm going to hover over it and click the trash can icon to remove it. Next, let's change the name of catalog to shop. And click the check mark. That'll make it a little bit clearer about what it's for. Now, let's add some menu items. Let's link the two pages we just created. Click add menu item. And let's add the about us page first. The format that's been established here in our menu is each link has just a one-word title. So, let's make our label just about, and then we can link it to the about us page by clicking the link, going to pages, and selecting about us. Then clicking the check mark to lock it in. We'll do the same thing for FAQ. Next, you can rearrange the items in your menu by clicking and dragging the six dots to the left of any name. I like shop in the first position, but let's drag contact down to the last position. So, now we have shop, about, FAQ, and contact. Now, you can also add drop-downs and sub menus if it's relevant. This is especially useful for the shop where you can have a shop go to your main shop with all the different products, but then you can also have sub menus for different collections. To do this, click add menu item, and we'll link to the hiking collection. So, we'll type hiking gear, and then make the link go to the collection hiking gear. Here you could also use tags to filter it down even more, but we've already done the tag and filtering work on our hiking gear collection, so we'll just go ahead and lock this in. Next, we can make this a drop-down item by clicking and dragging hiking gear under shop, and then drag it to the right, and it appears as an indented item. So, if we click save now at the bottom of the page, our menu's been updated, and we now have hiking gear as a sub item under shop. I recommend keeping your main menu to about five to seven main items at the absolute max. Too many options overwhelm your customers, and they end up leaving as a result of it. Now, let's check out how our menu looks in the editor. We'll go to online store on the left side, and then click edit theme. And you can see in that top header bar, our navigation's looking really nice. And if we turn off in the upper right bar, deactivate inspector, so that these little blue boxes don't appear around the items that we're hovering over, this makes it so it functions more like we're browsing the website as a regular real user. And if we hover over shop, now we can see this hiking gear collection appear as a sub item. Really cool. Okay, while we're here, let's finalize the header and footer. The header is the bar that stays at the top of every page. It's where your logo, menu, and cart icon live. Along with your hero section, it's one of the first things customers see, so it sets the tone for your entire store. The footer is the opposite end. It sits at the bottom of every page, and it's where customers look for things like policies, contact info, and social media links. Our theme comes with both of them. Let's make them look professional. We deactivated our inspector earlier, so in the upper right toolbar, next to the sidekick icon, click to activate your inspector again. Then, click on your header, and your header menu appears in the left side. Let's start by setting the color scheme. In the left side, scroll down until you see colors. Then, let's change the color scheme to something that looks better. I'm going to try this dark scheme. I think that has a really chic look that works well for this particular brand. Next, let's replace this generic text with our logo. Click on this placeholder logo, and then in the left side, you'll see it says edit logo in theme settings, and you can click on theme settings to navigate there. Now, here you can add a default logo and an inverse logo. It says here, "Use an inverse logo when transparent header background is set to inverse." And basically, what this means is you want your default logo to look good on your bar here when it appears like it does right now. But then, depending on your header settings, the header may change its appearance, and you want to make sure that your logo looks good even if it changes. So, I'm going to upload a default logo that looks good with this dark color scheme. We'll click select, add file. For me, I have this inverse one with a dark background and light foreground. And you want to make sure that you use a transparent background. We'll click done to add it, and the logo gets added in. Here you can set the height of your logo on desktop. This actually changes the whole logo size, both height and width, proportionally. Let's set it right around here. That looks nice. 58 pixels or so. And then, you can set your mobile height separately. To do that, toggle into the mobile view in the upper right, and then set your mobile height accordingly. Again, let's try 58. See what that looks like. It's a little big on mobile, so let's shrink it down. Maybe 50 or so. That looks better. And let's toggle back to our regular desktop view. Now, I'm going to add the inverse logo, which actually, in my file naming here, is just regular logo. Make sure I use a transparent background version, and done to add it. Next, you'll see a section to add a favicon. A favicon is the little icon that appears in your browser tab. Kind of like right now, we have this Shopify logo appearing on this tab. Let's add one. Click select, and then upload a small square version of your logo. Kind of like this one that I have here. And you won't see this right away, but when we open up the live public version of our site, you'll see our favicon show up in the browser tab. All right, our logo's looking great. Now, you can also rearrange the position of the items in your header. Let's click on the header again, and here you can see the first item here is your logo. You can change the position from left to center, to right, but I think it looks best on the left for this particular site. You can do the same thing for your menu position. Change it from left to center, to right. And in my case here, I actually really like the way it looks with the logo on the left and the menu on the right, so I'll keep that. Let's scroll down the header settings to see more options. Specifically, I want to show you sticky header. Now, what does that mean? A sticky header is a header that sticks to the top of your page as you scroll through it. So, if I deactivate the inspector here, we can start to see what this behavior looks like. This is a sticky header. As you scroll, it stays at the top of the page, so people who are on your site can always access it. This is the always mode. Now, you can also add it on uh scroll up. So, basically, as you scroll down the page, the header disappears, but then if people start to scroll back up, presumably to look for the menu, it appears again. You can also disable this entirely, and then the header only appears at the very top of the actual page. I like to keep the header accessible, so I'm going to set my sticky header to on scroll up. Next, let's scroll down the settings and look at these other options that are available to us. One setting I really like is the homepage sections transparent background toggle. If you toggle this on, and you've got the inverse and default logo set, as well as the sticky header on scroll up behavior for your header, it gets this cool effect where the header itself is transparent on the hero, but then you hover over it, and it becomes dark. Same thing as if you scroll down, and then you scroll back up. Look at that. It turns dark. I think this is a really cool modern effect, and it really makes your site look polished. And especially, it looks good with this full page hero image. It makes it so that your header and your logo adapt to wherever your viewer is on the page. Next, let's set up your footer. The footer is where customers look for policies and support links. First, make sure your inspector is activated. Scroll all the way to the bottom of the page, and click on your footer. Here there's a footer section, and then also a utility section. In the utility section, you can see a terms and policies link. This links to your shipping policy, privacy policy, return policy, etc. And I'll show you how to update these policy pages later. On the right side, you've got your social media links. You can click these, and then add your actual social media links in these fields here. To remove any social media platforms you don't use, simply click on the link, and then click the X to the right of it. And you can see the TikTok link has been removed from the social media icons in this particular case. Next, you can update the copyright section by clicking on it. And I'm going to toggle off powered by Shopify. So, now it'll just say copyright, current year, and then the store name. You can add or remove sections to this footer just like you would any other section. Just keep in mind your utility section of the footer limits how many different items you can add to it. One change I want to make is to update the color scheme like we did the header. So, let's click the footer, change color scheme to the dark format, and we'll do the same thing for the utilities. This gives us a nice clean dark look at the bottom of our page that matches the top. All right, footer's all set up. Step seven. Throughout this tutorial, you've probably noticed we've been picking color schemes and text styles for different sections. Those options come from your theme's global settings, and this is where you control them. If you change a color here, it updates everywhere that color is used across your entire store. So, instead of going page by page, you set your brand colors and fonts once, and everything across your store stays consistent. In the theme editor, go to theme settings. That's the gear icon in the upper left. Scroll down to colors, and here you have your seven default color schemes. To customize, you can either add a brand new scheme or simply click to edit an existing one. Let's edit scheme one. I want to edit scheme one's background, so it has a little bit more of a natural feel that blends with the rest of the theme of the site. So, let's scroll up, and I want to grab like this greenish, tanish, gray color here from the reflection that we got off this image. So, I'll click background, grab the eyedropper tool, and then grab this sort of greenish gray color here. I might lighten it up a bit, so it actually works better as a background. Sort of a pale greenish gray. Now you can see as you scroll through the site that anywhere that scheme one is used, that background has been updated to this new color. Now let's update the button color to something that matches our brand. Now, the header section here is using a different color scheme. If we click the hero, we can see that the hero's color scheme is this scheme six because it has a transparent background, which makes sense if you're using an image. So, back in theme settings, we'll exit scheme one, click scheme six, and then let's scroll down to the primary button section. We'll grab the background for the primary button, use the eyedropper tool, and then let's select this orange color from the ampersand. We'll click to lock it in. Now we have a nice orange button, but the black text on the orange button looks a little strange. So, let's change the text for the button to a white color that'll give it some nice contrast. There we go. Now that you know how to update colors, let me show you how to update theme fonts. Let's click the X to exit this color scheme editor. Then, in the next drop-down, you can see it's typography. Open here you can set your fonts for your body, subheading, heading, and accent. I recommend scrolling through and looking at the various styles. You can see all sorts of different fonts that are available to you. Or if you know which font you want to use, you can search for it. For example, I know that I like Montserrat. I think that works really well for headers, at least for my brand. So, I'll search for that and add it from the list. We'll also set it to be extra bold. And then click done. I'll do the same thing with subheading and accent. Finally, let's update the body text. You can use the same font for your header and your body, but it's common to have different ones to have different looks for each type. You typically want your headers to look nice and bold and capture attention, and you want your body to have fonts that are easy to read. For example, I know that Source Sans Pro pairs well with Montserrat and works well for my brand. But again, play around and find fonts that work for your brand. Here in your typography settings, you can also set your standard size for each different level of heading as well as the paragraphs. When you're happy with how your theme settings have been updated, don't forget to click save in the upper right. The design is looking great. Now, step eight, the business side. Policies, payments, shipping, and taxes. These are straightforward, so we'll move through them quickly. Before we set up payments and shipping, let's add store policies. These are pages that tell your customers how your business works, what happens if they want to return, how you handle their personal data, and what the rules are for using your store. You might think nobody reads these, but they matter for two reasons. First, customers look for them when they're deciding whether to trust you, especially a new store. And second, payment providers like Shopify Payments actually require them. The good news is you don't have to write these from scratch. Click exit in the upper left to return to your Shopify admin page. Then click settings in the lower left. In the new menu that appears, scroll down, and the last item is policies. Go ahead and click that. Here are your written policies. You can see that the privacy policy is automated, so you don't have to worry about that. Shopify automatically generates a privacy policy that covers how you collect and use customer data, things like email addresses, payment info, and browsing behavior. Now, for return and refund policy, let's click into it. This covers what customers can return, how long they have to return it, and how refunds work. Now, you can click the insert template button to generate one. The template gives you a solid starting point. Just read through it and update anything in brackets to match your business. When you're done, click publish. And you can see the no policy set tag is gone. You'll want to do the same thing for terms of service, shipping policy, and contact information. Next, let's set up how you actually get paid. When a customer places an order, the money needs to go somewhere, and this is where you tell Shopify where that is. You'll connect the payment provider that handles credit cards, digital wallets, and everything else. And then Shopify routes the money to your bank account. On the left side navigation of your settings, select payments. Shopify Payments is the easiest option. It handles credit cards, debit cards, Apple Pay, Google Pay, and Shop Pay all in one. Just click complete account setup to get started. You'll need to verify your account, grab that code from your email, paste it in. Next, you'll need to fill out the questionnaire. Select whether you're running your store as an individual, a registered business, or a nonprofit. I'll select an individual in my case. Enter your name, date of birth, email, phone number, and address information, as well as your tax ID. Once you've got this all completed, click next. Next, make sure your store name is set the way you want it to appear on your customers' bank statements, and then click next. Review your account details, and then submit for verification. Once you've done all that, you'll see that Shopify is verifying your information, and this usually takes a few minutes. At this time, you could add additional payment methods because Shopify Payments might not be available in every country or every region. So, set up whatever payment method is available to you to make sure that you will get paid. Regarding payment capture method, I recommend leaving this set to automatically at checkout. That's the default, and it's what most stores use. Next, let's set up shipping, so customers know how much delivery costs. Shipping is one of the first things customers check before they buy. They want to know how much it costs and how long it'll take. What we're setting up here are the rules, how much you charge for shipping based on order size, weight, or destination. You're not shipping anything right now, you're just telling Shopify what to display at checkout. In your settings left side menu, click shipping and delivery. Next, click into your general profile. Here we can see that we essentially have one shipping zone, so we're just offering domestic shipping in the United States. You can change your shop location by clicking up here, and you can even add international shipping below if you want. But let's focus on domestic for now. This shop by default has two types of shipping, standard with different rates for different order values, and then express for a higher price. Let's edit this so that there's free shipping on orders that are $75 and up, not 70 and up. We'll go to the one that says 70 and up, and click the three dots to the right, and click edit shipping option. We'll change the minimum from 70 to 75, and here you can see a preview of what that looks like. Click done in the upper right, and then let's update the other standard so that the maximum this is available for is $74.99, and this will cost $8. You can also adjust it to whatever shipping price makes sense in your situation, which I highly recommend you do. You can add shipping options by clicking the add shipping option button. Here you can set your rate type. By default, it's set to flat, but you can also change it to be based on order amount or weight. We had our other standard based on order amount. You can also add carrier or app calculated. I'll show you how to do that. For example, let's say you want to use FedEx. You can click to add services, and then pick which FedEx services you want to use. Let's say two-day, ground, overnight, and priority overnight. Click done. Now Shopify will calculate the shipping rate based on what these different services normally charge based on your packaging dimensions and weight. Here you can also add a handling fee as a percentage or a dollar amount, so that you can charge a little bit of margin in case the shipping rate isn't calculated exactly right, and you need a little buffer. I generally recommend doing at least $5 for handling. This can also help cover your packaging costs. And then here's a sample below of what that looks like. We'll click done in the upper right. When you configure shipping based on the different handlers here, you can also use Shopify to help you buy and print shipping labels at discounted rates, so this is super handy. I recommend keeping your estimated delivery dates set to automated, cuz this tells customers when they can expect delivery. And finally, if you plan to ship internationally, make sure you add your additional shipping options here. When you're done making changes to your shipping settings, be sure to click save in the top bar. Now let me show you two simple, powerful settings that can supercharge your marketing. On the left side, navigate to checkout. Now the checkout settings are mostly good by default, but there's one thing I want you to turn on. If you scroll down to marketing opt-in, turn on both email and SMS, setting email to checkout and sign-in page, and setting SMS to checkout only. This adds a small checkbox at checkout where customers can opt in to hear from you. And here's why this matters. You can't legally send marketing emails or texts unless someone gives you permission. But when a customer opts in, you now have a direct line to somebody who's already bought from you. If you have a new product launch or a sale, you can show up in their inbox. And that's one of the most valuable things you can build as a store owner. Everything else here, you can pretty much just leave as is. So, go ahead and hit save at the top. Now, we're almost done with settings. Let's quickly handle taxes. Again, on the left side, navigate to taxes and duties. Shopify handles tax calculations automatically based on your location and your customer's location. You can see that Shopify tax services are active by default. And here you can go in and set up your various regions. So, if you're selling in the United States, you need to set up your United States region. The one thing I do want to point out here is this tax liability insights dialogue. When you make enough sales in a certain region to hit tax collection thresholds, you'll be notified here and then you can register wherever you need to register. This page is where you'll make all of your management changes and decisions for taxes. Each region's a little different, so check with the tax professional if you need help here. Next, step nine. Right now, your store's web address is an ugly temporary domain like this one. It works, but it doesn't exactly scream professional business. A custom domain like your store.com is what makes your store feel real. It's what you'd put on a business card, share on social media, or tell someone in conversation. And it's one of the easiest upgrades you can make. On the left side settings menu, scroll down and select domains. Right now, you can see that your store has this temporary domain at myshopify.com. It doesn't look very so, let's connect a new one. You can either buy a new domain, this is going to go through Shopify and this is the simplest option if you don't have a domain yet. Or if you already have a domain from someplace like GoDaddy, Namecheap, or some other domain registrar, you can click connect existing. And then Shopify will walk you through the steps on how to do this. For us though, we're going to buy a new domain. I'll show you how to do this. Right away, you'll see that Shopify searches automatically for domains that are similar to your store name. In my case, it searched for openclothes.com and unfortunately, that's not available. Now, .com is the most widely used domain and so I highly recommend getting one if you can. There are other options available here like openclothes.net or even openclothes.org, but I want to see if I can lock down a .com. So, let's add open clothes outdoor and search for that. openclothesoutdoor.com is available for $16 a year. So, let's go ahead and grab that one. Click buy. Next, you'll land on the checkout page and right at the top, there's an auto renew every year toggle that's automatically turned on. I recommend keeping this on if you want continuity so you don't have to think about renewing your domain every year, but if you didn't want to do this, you could turn this off. Next, you've got your contact information that you'll need to fill out. And at the bottom of the page, your payment information that you would used for your Shopify plan has already been added. If you wanted to use a different payment method to buy your domain, you could add that here. But if you're happy with this, simply fill out your contact information and then when you're ready, click buy domain. After you've completed your checkout, you'll get a confirmation like this. And you can go ahead and click the see domain status button. Next, you'll land back on the domain management page. And right at the top of the page, you'll see your current domain and the status associated with it. Right now, mine says propagating. It can take up to 24 to 48 hours for your custom domain to fully propagate. And basically, what that means is your site is being registered with that domain and that can take some time for that domain to actually point to your site. If I click the view button here, you'll see that I get an error. And that's because it's still being registered. So, don't worry if you see errors like this right away. Just give it some time and eventually, it'll settle itself. The nice thing is that Shopify connects everything automatically for you, so you don't need to do any manual DNS configuration or anything fancy like that. All you have to do is wait for it to finish. Now, at some point, you're most likely going to see the status needs verification. And essentially, what this means is we need to finish registering your domain to your email address. This is a requirement. So, go to the inbox that's listed here and find the verification email from Shopify. It should look something like this with the subject action required and it'll provide a link. And all you really have to do is click that link. On the page that opens, scroll through and verify your contact information looks correct and then click verify information. You'll get a confirmation saying your contact information has been verified and then you can close this tab. And if you refresh your domain page, you may still see that it says it needs verification. This is just like propagation, it can take a little while to finish. So, don't worry if you still see this. It'll all settle out eventually. When it finishes connecting, you'll see the status change this green tag here and it'll say connected. Now, for the final step. Everything is built, your products, your design, your payments, your shipping. But right now, nobody can actually see your store. Shopify keeps every new store behind a password by default, so only you have access. The last step is removing that lock and putting your store on the internet for the world to see. After your domain status changes to connected, if you click view, this is the page you'll see or something similar. Nobody can access your store yet. So, let's fix that. Click the X in the upper right to exit your settings. Then on the left side, click online store, then click preferences. And then here at the top of the preferences page, you'll see store access and password protection. You'll have some instructions on how to make your store accessible to everyone. Now, if you haven't added an address to your store, that's what you'll need to do first. So, go ahead and click the link if it provides one. Add your business address and then click save business address. Next, simply disable the toggle for password protection and click save. Now, if you click to view your store, your beautiful brand new Shopify store is live on the internet ready to make sales. And that's your Shopify store, built from scratch, ready for real customers. If you haven't already, use the link on screen or click the link in the description to lock in your free trial plus three months for a dollar each. It's the absolute cheapest way to start your Shopify store. Good luck and thanks for watching.

← WooCommerce Tutorial 2026 - Build eComme The Only Dropshipping Guide You Will Eve →