Squarespace Ecommerce Tutorial 2026 (Step-by-Step)
📺 ดูคลิป · 👁️ 73,215 views · 📅 2023 · ⏱️ 50:13 · 🛒 eCommerce / Shopify / Dropshipping
📌 สรุป
คลิปนี้สอนการสร้าง e-commerce store บน Squarespace ตั้งแต่ต้นจนเปิดขายได้จริง โดย Simon จาก Metics Media ใช้ตัวอย่างร้านขายหูฟัง "Medics Headphones" ผ่านทุกขั้นตอนตั้งแต่เลือก template → เพิ่มสินค้า → ออกแบบหน้าเว็บ → ตั้งค่าชำระเงิน → ซื้อโดเมน → เปิดร้านสาธารณะ เหมาะสำหรับมือใหม่ที่ยังไม่มีประสบการณ์ web development
🔑 ประเด็น / ขั้นตอนหลัก
- สมัคร Squarespace trial 14 วัน ผ่านลิงก์ใน description (affiliate link) → เลือก template หมวด Online Store → filter ตาม topic เช่น Fashion/Photography
- เพิ่มสินค้า: Pages → Shop → Add Product → กรอกชื่อ ราคา รูปภาพ ตั้ง unlimited stock หรือระบุจำนวน → เพิ่ม category/tag → แก้ SEO URL ให้สั้นและอ่านง่าย → Save & Publish
- ออกแบบ Home Page: ลบทุก section ออก → Add Section แบบ blank → ใส่ Image + Text + Button (Shop Now → ลิงก์ไปหน้า Shop) → เพิ่ม section category ที่ 2 → ลิงก์รูปและปุ่มไปยัง category จริง
- แก้ Header: เพิ่ม logo → เปิดปุ่ม Shop Now บน header → เปิด cart icon → ปิด fixed position ถ้าไม่ต้องการ sticky header
- แก้ Footer: สร้าง policy pages (Privacy Policy / Terms of Service / Refund Policy) โดย duplicate page → ใช้ termly.io generate เนื้อหา → ลิงก์ใน footer + ใส่ logo กลาง + social icons ขวา
- ตั้งค่า Design: Site Styles → เปลี่ยน font / color palette / animation (แนะนำ Slide) → เพิ่ม Favicon (browser icon)
- Optimize Mobile: สลับ Mobile View → drag/resize elements แต่ละ section ใหม่ → style changes จะกระทบทั้ง desktop+mobile แต่การย้าย position กระทบเฉพาะ mobile
- ตั้งค่า Commerce: เชื่อม Stripe (แนะนำ) หรือ PayPal/Square → ตั้ง Shipping Rate (Flat Rate: Standard $9/Express $18) → กำหนด Shipping Zone เช่น US
- เลือก Plan: Business ($23/เดือน annual หรือ $33/เดือน monthly) → Commerce plan ถ้า transaction fee 3% เป็นปัญหา → annual plan ได้ domain ฟรี 1 ปี
- ซื้อ domain → ไป Settings → Site Availability → เปลี่ยนเป็น Public → เว็บ live ทันที → กรอก Business Information → ทดสอบ checkout ครบก่อนยิง traffic
🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง
- Squarespace — เว็บบิลเดอร์ e-commerce: squarespace.com (ลิงก์ affiliate ใน description)
- Squarespace Business Plan — $23/เดือน (annual) หรือ $33/เดือน (monthly)
- Squarespace Commerce Plan — ลด transaction fee เป็น 0% (จาก 3% ของ Business)
- Stripe — payment provider แนะนำ (เชื่อมผ่าน Squarespace Commerce)
- PayPal — payment provider ทางเลือก (มีความเสี่ยง hold เงิน)
- Square — payment provider สำหรับ US only
- Termly (termly.io) — generator นโยบาย Terms of Service / Privacy Policy / Refund Policy ฟรี
- Custom Domain — ฟรี 1 ปี เมื่อซื้อ Squarespace plan แบบ annual
💡 เอาไปใช้ / ข้อสังเกต
- คลิปนี้ใช้ affiliate link Squarespace ใน description เป็นโมเดลรายได้หลัก — Simon ทำ tutorial ละเอียดเพื่อ convert viewer เป็น sign-up ผ่านลิงก์ของตัวเอง เป็น pattern ที่ replicate ได้กับช่องสาย tool review
- Squarespace เหมาะกับ dropship/print-on-demand ขนาดเล็ก-กลาง แต่ Business plan มี transaction fee 3% — ถ้า volume สูงต้องอัปเป็น Commerce plan ทันที ไม่งั้นค่าธรรมเนียมกิน margin
- Simon แนะนำ Stripe ชัดเจน หลีกเลี่ยง PayPal เพราะ hold เงิน — ข้อสังเกตนี้ตรงกับปัญหาที่นักขายออนไลน์ไทยเจอบ่อย
- ก่อนยิง traffic จริงต้อง test checkout ครบ (shipping rate + payment) ไม่งั้นเสีย ad budget เปล่า — จุดนี้สำคัญมากสำหรับ campaign launch
- Squarespace mobile optimization แยกอิสระจาก desktop (drag/resize ไม่ link กัน) — ต้องทำ mobile pass แยกทุกครั้งที่แก้ layout
📄 Transcript เต็ม (English, 9,118 คำ)
what's going on my name is Simon and in this video I'm going to show you step by step how to create your own professional e-commerce website using Squarespace we're going to start from complete scratch and we're going to go over every single step and everything you need to know so after watching this video you're gonna have all the tools you need to build and launch your own online store I'm Gonna Leave the timestamps Down Below in the video description so if you're looking for a specific part you can just go directly there so without wasting any time let's get right into the tutorial first thing we're going to do is get us a 14 day free trial for Squarespace so scroll down and go to the video description and click on the first link you find there this will take you to the Squarespace signup page where we can claim our free trial alright so once we are here on this page let's just click on get started here in the center or also here on the top right then Squarespace is going to ask us a couple of questions questions about what kind of website we want to build now you don't really need to answer those questions it doesn't really do much so to save some time I'm just going to skip all these questions by clicking on skip here at the bottom and this will then take us to the Squarespace website templates so here is where we can choose a template for our new e-commerce website which is kind of going to be the starting point of our website design now theoretically it doesn't really matter what kind of website template you choose here because you can still customize everything and you're not giving up any options by just choosing a template here the template will simply give you a basic structure with some placeholder content and some default styles for your fonts and your colors that you can then start to customize from now the easiest way to find a good template for the kind of e-commerce website you want to build is to use the filters here at the top so first of all it makes sense to filter by online store because because then we can only see the templates that were specifically designed to be an online store then under topic we can also filter by different topics so different types of online stores for example if you want to sell something in the photography Niche then you might want to just choose photography here to see the templates that were made for a photography e-commerce website then if you want to see how a template really looks like simply hover over the template click on preview then you can see exactly how this website would look like on a desktop screen on a tablet or also on a mobile phone so you can also navigate through the website by just clicking on different pages and see exactly what the design looks like once you decide what kind of template you want to choose simply click on start with this design and then you will get to the next step now for the example store I'm going to build in this video I'm going to choose this template right here called zatar you can find this under online store and then fashion this is a good template that works with pretty much any online store so if you really don't know what kind of template you want to choose simply go with this one and then just follow through with this tutorial so I'm going to click on start with zatar then here we're going to have to create our Squarespace account so I can either use your Google account your Apple account or simply continue with an email which is what I'm gonna do then simply type in your name email and choose a password and then click on continue here we can now give our new website a name so I'm going to name my website Medics headphones because in my example store I'm going to be selling headphones then click on continue and let's close this window so now before we're gonna start customizing our eCommerce website I want to give you a quick introduction of how these Squarespace edit works and how to navigate through this platform so first of all this in the center here is a preview of what our website currently looks like currently we are on the home page and you can also see how this website looks like on a mobile phone by just clicking on mobile view here on the top right then you can see how it looks like on a mobile phone we're going to do all of our changes on the desktop version so we're gonna go back to the desktop view whenever you want to test your website and see exactly how it looks and feels like as a visitor the best option is to just go to the preview mode by just clicking on the Arrow here on the top right which will take us to the preview and then we can just simply click on different buttons and see exactly how our website looks like and works as you were a visitor on your own website so to go back to the other view we just click on the Arrow again here on the top right and we can just click on the logo here to go back to our home page and then here on the left side we have the menu items of this editor which we're going to go through most of them throughout this video the first one is the pages here you can see an overview of all the pages that currently exist on your website so in the main navigation menu which is this menu right here we have the about page the shop page the journal page and the contact page you can see a demo text next to the page name this just means that this is a demo page and if you want to you can just keep this or you can also delete it by clicking on the trash icon here when you visit a demo page it will ask you if you want to remove that demo page or if you want to keep it by just clicking on copy page now I don't need a journal page so I'm just going to click on remove and confirm and then you can see this page is now deleted from the main navigation menu we also have some more pages here on the bottom which are currently not Linked In the main navigation menu so these are just some other links that we could click on throughout the website so let's go back to the home button which will get us back to the menu overview and I'm not going to go through each of these menu items right now because we're going to cover them throughout the video but what I do want to show you is on the bottom left you can see your Squarespace account when you click on this account you will get to your Squarespace dashboard where you can see an overview of all of your Squarespace websites So currently we just have one the one we have just created and if you want to you can also create multiple websites in your Squarespace trial so you can start a new trial for a new website by just clicking on create website here and then you will have another one and you can choose another template and start building a variation of your website now we're going to continue with this website here so we're just going to click on website which will take us back into the editor alright so as this is an e-commerce website tutorial I want to first show you how you can add your products to your website and then later on we're going to go over every single step to customize and design your website to exactly how you want it to look so to add our products we're going to go to pages and then we're going to go to the shop page so we're going to see the shop page because we have chosen an online store template so we already have a shop page set up if you don't have a shop page what you can do is just go back to this view here and then you want to go to Commerce and then you can click on add products right here under set up your store click on products and this way you can also set up your products and then the shop page or the store Page will automatically be created for you but I actually like to use the shop page it already exists so let's click on pages again go to the shop page and then here we can see there are already some products set up these are just placeholder products we're going to delete them later on but for now let's just ignore them so to add our product let's click on ADD product here then here as you can see you can sell different types of products on your store so it could be a physical product a digital product gift cards services and a lot more now in this video I'm gonna build a physical product store so I'm going to click on physical product here then here I'm going to add my product name and then also add an image then click on next then let's add the price of the product and we can also set this stock so how many of these items do we have in stock NOW be careful here so when you set this to let's say 100 and then you actually sell 100 of these products and the stock goes to zero then it will actually be visible as sold out on your store and you won't be able to get any more sales so if you add the stock number you want to make sure that you actually update this number when you get more stock I'm going to Simply turn on the unlimited stock option and then click on add more details then here we can add some more information like a product description and we can also add a few more images then let's scroll down to inventory we have already set the price now if you want to set this item to be on sale just tick this icon here and then you can decrease the price to a sales price so we could say this is now 59 instead of 79 and this would be visible on our store as well then again we have the stock which we've already set to unlimited stock then we're going to look at the Fulfillment options later on in the video and here under organization you can add categories to your products which I recommend so you can if you have a lot of products you can really organize them quite well using categories so for example for this one I would just add this in the earbuds category so I'm going to add to this one here click on ADD and then we also have tags so if your products have specific things in common for example these could be Wireless or these could be noise canceling you can add these as tags and then you can also sort these products by tags or have other products recommended based on your tags so these are quite useful as well and then you have visibility so we're going to cover this later on in the video as well you don't need to worry about this for now the SEO URL so this would be the URL of your current product you can also change this by clicking on edit here and then you can change the link right here so we could change this to earbuds let's say Pro 7 which looks a lot better especially if you you're going to be sending people directly to the product page you can add an SEO title here so again we could do earbuds Pro 7 and then also add a description here and then click on apply so now the URL looks a lot cleaner obviously later on we're going to also add our own domain to make it look very professional we're not going to worry about the checkout options here I'm going to show you a couple of things about this later on so now let's click on Save and we can actually click on publish which will make this item available on our store immediately as we can see right here so now next to all of these example products we have now our own product which we have just added when we click on this product we get to the product page where we can see the description that we have added and the sale price we can see right here so the next step is to just delete all of the other products that are not really ours that we're not really selling just tick the Box this is and click on delete now if you get an error message if you want to delete many products at the same time just go to the three dots and click on the delete button here and then just just delete them individually so now I've added a couple more products just so we have something to work with for our example store now if you want to rearrange these you can just go to the left side and then just drag these up or down depending on where you want them to be which one to show up first so now we have added a couple of products now if you want to manage these products an easy way to do it is by just going back to the menu overview here going to Commerce and now under inventory here you can see all of your products and you can just edit them delete them however you want to here you also have an overview of how many physical products Services digital downloads you have currently on your website great so now that you know exactly how to add your products to your website let's look at how to design and customize our e-commerce website so let's go back to Commerce then to home and then let's go let's click on our icon here at the top left which will take us back to the home page and now we're actually going to go and click on edit which will take us to the editor where we can start customizing our website now I want to quickly explain to you how this editor works because it's very simple and you're going to get how to use this very quickly so the basic structure of your website is going to be there's going to be a header here at the top you can see it here site header then all the way on the bottom is going to be a footer which you can see here these two elements are going to be visible on each single page on your store it can be the home page the product page the contact page the header and the footer will always be visible and then in between the header and the footer we have the content so the content is structured in different sections so this is a section the main section here on the home page then this is another section and then we have the third section here in between those blue lines you can see the section so to edit the section we simply click on it and then you can see the edit section icon right here and then you can do some changes like you can change the background you can change the colors you can change the format so here you basically change the section itself then inside of this section you have a lot of freedom so you can add blocks and elements to this section to add something simply click on ADD block here on the left side and then you have some different options you can add some text you can add an image you can add a button and just basically everything you can see here so for example let's add an image we just click on image and then we can see this element here and we can just click on it and then just drag this around the area to place it exactly where we want it to be so let's say you want it to be here and then we can just click on the plus icon and then upload a file here which will then add the image so so as you can see in this section we have a text block we have a button block and then now we also have this image that we have just added before if you want to edit each block simply click on it for example this button here and then you get some options here so you can click on the pen icon and then you can see all the options that you have available here so for example you could change the text you could change the design of the button so these differ between the different types of elements you add in in your section now whenever you want to delete a block in your section just click on the Block and then click on the trash icon here and this will remove it from your section if you want to duplicate a block just click on it and then click on the duplicate icon here and this will duplicate your block the same thing with the sections if you want to duplicate a section just click on the duplicate icon or you can also click on the remove icon if you want to remove this section completely so for example let's remove this section here click on remove yes and then it will be gone from your page to rearrange your sections just click on the section you want to move and then click on the up Arrow or down arrow depending on where you want to move this section and this will just rearrange your sections on your page whenever you want to undo something just click on the undo button here on the top left and this will undo your changes so now you know exactly how to edit content on your page let's actually start building out our customized website so we could either just start with the layout we have here and then just change all the contents to our own images what I'm going to do is just I'm going to delete everything all these sections here and then I'm going to start from complete scratch so I'm going to click on remove for each single section so I'm just left with the header and the footer great so now as you can see I I am left with a blank canvas we only have the header here at the top and the footer at the bottom and nothing in between here's where we're going to add our content for our home page so let's click on ADD section here and then we have some different options we could either use an existing pre-made section by just browsing through the library here so for example for the top section of the home page we'll probably use something from the intro and pre-made templates here so if you like something here you can use it however I'm going to build something from complete scratch so I'm going to click on add a blank section here so now what I want to create is I want to have an image here on the right side of one of my products and then on the left side we're going to have a text and then a button that says shop now so to add these elements we're going to click on ADD block and then I'm going to first add an image then I'm going to click on the plus icon upload a file now I've actually downloaded one of the products of Apple because they just look amazing in my opinion so let's just um use these air pots Max or air I don't know what it's called and then we can just drag this wherever we want now to edit this image we're going to click on the edit button here click on edit right here and now I'm going to click on the crop icon I want to have this as a square image because it's going to be it's going to fit better on the website so I'm going to click on one to one which is a square and then I'm going to remove the edges a little bit to make this fit perfectly so let's just do this and then click on save save great now let's just make this a bit larger kind of like this so that looks pretty good the next step is to add some text here by clicking on ADD block and add some text then double click and type in your text I'm going to just say something like experience perfect sound and I'm going to make this a heading let's do a heading 2 and also Wrap This by clicking on this icon here and then we can just manually increase the size of this text so I'm gonna just make this a bit larger kind of like this and then I'm gonna also drag this down now by the way if you wanna if you hit G on your keyboard you can always see the little brackets here which is going to be the area where you can drag your blocks around if you want to make this area bigger just go to edit section and then you can change for example the gap of these brackets in the background which will change the alignment of your elements or you can also change the row count I like to do it by just dragging down this icon and then you can increase or decrease the size of your sections so let's make this a bit smaller kind of like this and then let's also add a button so let's click on ADD block and then click on button and let's just drag this here maybe like this and then click on the button click on the pen icon and then just type in something like shop now and this is going to go to one of these to the shop page so I'm going to go to this link gear icon and then go to page and choose the shop page click on Save and there you go now when we hit G on our keyboard again the rectangles will be gone and so this is my hero section of the home page now let's move on and add another section so let's click on ADD section here at the bottom and and now instead of starting from scratch we're actually going to choose a pre-made template so under intro let's just scroll down and I'm actually gonna choose this one obviously you can choose whatever you want whatever makes sense for your home page just choose the one you want I'm going to choose this one here and I'm going to update the text a little bit by just clicking on it I've prepared something here so I'm going to add something like why we are different I'm going to change the size a little bit actually going to choose this one here when you click on this icon you can just change the exact size of your text and then we just changed text here as well just paste it in I'm going to change the button text to let's say learn more or shop now which makes it a bit more sense let's say shop now and again when you edit a button always remember that you need to link this button to another other page so let's just go to the gear icon and then just choose the shop page again make sure you click on Save and there we go this is our next section here now what I also like to do on the home page is show people the different categories of the products we are selling so that's what we're going to do now so let's click on ADD section to add another section and again I'm going to use a pre-made section I'm going to go to products and then let's see what would make sense let's actually choose I think this one would work here so let's choose this one here and then I'm gonna delete this text and I'm just gonna say something like find your style make this a bit smaller like a three and then I'm going to change the images to the different categories that I have on the store so this first one would be let's click on replace upload file would be the collections let's say earbuds so I have an image for earbuds and then I'm also going to change the other images here as well so now I've added an earbuds category and headphones category and a sport category now what I want to do is add buttons here below that say what category this is so I already have a button so what I'm going to do is just duplicate this one twice so so I have three of them just drag this to the correct image and then I'm going to change the text so this should say earbuds then this is gonna say headphones and the third one is gonna say Sport and now we need to link the images and the buttons to the correct categories so let's start with the images so let's click on the image and then let's click on link and on image and then go to the gear icon go to page go to shop and then under categories let's choose earbuds and click on Save and do the same thing for the other images as well so now the images are linked we need to do the same with the buttons so let's just click on the first one here go to the gear icon page shop categories earbuds save and do the same thing for the other buttons but for this one obviously we're going to use the headphones category and then for the last one we're going to choose the sport category so now we could just move on and build out our home page further by just clicking on ADD section and then add more things like for example we could add a feature product section by going to products and then maybe add this one here add an image of your product and then have the button go directly to that specific product or you could add a newsletter sign up form by going to forms here and then add something like this now you should Now understand exactly how to edit content on your site so I don't want to waste your time and just build out this page even further so what I'm going to do is move on to the next part of the tutorial which is going to be how to edit the header and the footer so this on the top here is the header and here on the bottom we have the footer and again this is going to be displayed on every page of your store so let's start with the header by clicking on edit site header here on the top and the first thing we're going to do is add our logo by going to site title and Logo you can change the side Title Here this was the first title we have entered when we've created our store now if you don't have a logo you can just add the title here but I actually have created a logo for this example store which is this one here so I'm going to add it by uploading it to the website and then you can see it here on the top left now I'm going to change the height a little bit to make it a bit smaller like this and then I'm going to go back so then let's click on elements here you can adjust all the elements here on the top right so for example what I like to do is just add a button that says shop now like this and then add the link to go directly to the shop page click on Save and I think this is a bit more prominent than having the shop link here in the top menu which I'm going to show exactly how to adjust in The Next Step but first we're going to cover the header and the footer then you also have the Social Links here so if you have added your Social Links which I'm also going to show you how to do later you can turn this on and then the links will be shown here in the header the language switch if you have multiple languages if you have a multilingual site then we have the card icon I would recommend to leave this turned on because you have an online store and people are used to seeing this card and see how many items they have in the card then let's click on style this is regarding the style of the entire header currently we are on the dynamic mode we could for example change this to theme and then change the theme for this specific header so this really depends on what your thing looks the best I'm going to leave this on Dynamic and then when we go so you can also add a border here obviously as you can see I'm just going to leave it as it is I think it looks good like this and then you can also change the fixed position you can turn this on which means that when you turn this on and you scroll down your page the header will always be visible and to really see how this looks like you would have to um let's just maybe let it just turned on you have to go to done save and then you want to go to the preview mode here on the top right and then when you scroll down you can see exactly how this would look like when the header is just Frozen here at the top I don't really like this so I'm gonna go back click on edit go to edit side header and then I'm going to turn off the fixed position so that was it for the header like I said I'm going to later on show you exactly how to change the menu items and manage your pages but first of all let's go to the footer menu so let's click on edit photo here so in the footer what I like to do is add all of the policy Pages like the terms of servers privacy policy refund policy and so on here in the footer on the left side then in the middle I like to add the logo once again and then on the right side we're going to have our Social Links like Instagram and so on so first before we edit anything here in the footer and we're going to create those policy pages so let's go out of the footer editor and then click on done and save and then let's click on pages here's where we can manage all of our pages so here as we can see we already have a privacy policy and also a shipping and returns page so let's click on the privacy policy and there we have some placeholder text what I'm going to do is use this layout for all of my Leo pages so what I'm going to Simply do is just click on the gear icon for the privacy policy page scroll down and click on duplicate page I'm going to duplicate this page twice because I'm going to need a refund policy and also a terms of service page so I'm going to click duplicate again here and then let's click on the gear icon for the first one change this to terms of service service and then just copy this text paste it in the navigation title as well and the URL slug as well then click on Save and I'm going to do the same thing here for the refund policy copy paste and paste and then click save and now we have all of our Pages the next step is to actually add the correct content for these pages so for the terms of service and to edit this page we just click on edit and then we want to change this as well to terms of service and then we need to change the text here and actually add our terms of service now setting up the terms of service and all the other policies for a store can be quite overwhelming if you've never done this before so what I recommend is to use a service called termly which I'm going to leave a link to this down below in the description this is a policy generator where you can just go and click on start building compliance for the terms of service they have a terms and conditions generator so let's click on this one and then they will just ask questions about your business about your store what you're selling where you're selling who you're selling to what information you're keeping and stuff like that and then you just go through the um forums here and then at the end it will create or generate a completed terms of service text for you that you can just copy and paste into onto your page that we have created here so once we have all of our policy Pages ready here we can go back to the editor and then scroll all the way down go to the footer menu and then I'm gonna add all the text here in this field so what I'm going to do is just delete the Instagram here and then add I'm going to start with pry the C policy and then I'm gonna add my terms of service and once all of those pages are added what we're going to do is first of all all highlight everything and make this a paragraph three and then I'm going to add the links so we can just highlight the text and then go to the link icon and then go to the gear icon and this is the privacy policy text so I'm going to go to page and choose the privacy policy click on Save and apply and now this is a link to the privacy policy and do the same thing for the other policies as well once they're all linked let's move on by deleting this text here I'm also going to lead this here and this as well now I'm going to add a block and an image to add the logo so let's click on the plus icon upload file and choose the wider version of my logo then make this a bit smaller like this and actually this is still too big so let's make it a bit smaller still and then let's again go to add block and now I'm gonna add the Social Links here so I'm gonna just drag them here to the right side click on the pen icon and then click on ADD Social Links so here we can simply add all of our social links for example our Twitter then we could also add our Instagram and just add all of these Social Links that you have for your store and then as you can see they will just appear right here as the icons and now I also want to rearrange the elements a bit so I'm going to hit G so I can see the alignment brackets I'm gonna just drag this down one and then drag this here to this Center and drag this here and I'm going to align this in the center to have it lined up with the logo and and I think that looks good maybe also decrease the size of the entire footer a little bit like this and then just drag this up yeah I think I think this looks pretty good let's hit G yeah that looks pretty good so I'm going to keep the footer like that so now as I mentioned before I want to show you how to manage your pages on your Ecommerce website so let's click on done and save to go back to this view here and then once you're here click on pages and here we've been here before so you kind of already know how this works but here under main navigation this is going to be all the pages that you can see here in the top and as I've said before as we've added the shop now button we don't really need the shop link here so what I'm going to do is just drag this down to the not linked and then we have gotten rid of the link here in the top menu and people can basically just click on the shop now to see the shop page then what we can do also is deactivate pages so for example if we are working on our let's say our terminal service page we could just click on the gear icon then scroll down and then disable the Page by ticking this switch here to off to the enable page switch and now people won't be able to see this link and they won't be able to access this page but I'm going to turn it back on and then click on Save now when you want to add new pages to your store and you want to have them in the main menu you can simply click on the plus icon next to main navigation and then you can add a new page so let's add a new blank page and let's name this let's say FAQ or let's say free consultation for buying a new headphone for example and then we already get to this page by clicking on it and now we can just start adding content by clicking on edit like we've done before add sections add blocks and as you can see this page is already in our main navigation menu here at the top so this is how you add pages you can also rearrange the order of this menu here by just dragging this stuff up or down so if you want to have the about page first you can just drag this up whenever we want to delete something we just go to the delete button here and then confirm and this will delete the entire page so what you definitely want to do before you launch your store is just go through all of the pages you have here and delete all the ones that you don't need for example the stockists page I can just delete this this is a placeholder page or a demo page the same for the journal we don't need this as well and the FAQs maybe you want to add some FAQ so we can keep this and we can maybe even add this to our main menu here at the top obviously we want to change the content here and we also want to go through the entire customer Journey when somebody visits your website and buys something all the way until the checkout so for example when somebody goes to your website clicks on shop now then they get to the shop page which you can also edit by clicking on edit here and then you can add sections you can change things around the same way as we've done with our home page let's click on done and then when they click on the product they get to the product page now I believe that editing the product page is pretty limited so you could click on edit design but there's not much you can do here so you can't really add any sections as far as I'm aware of you can click on edit product edit section but there's not a lot you can do here except for maybe changing the layout a little bit kind of like this so I can play around with it I would just keep it as it is if you're not sure and then people will click on add to cart and then you can also click on the cards here at the top right then you can see the card page then go to the checkout page and then you can see the checkout page here now here you can really edit much but I'm going to show you a couple of settings later on about these Pages the checkout page specifically so now let's look at how we can change the overall design and default settings for our website meaning the fonts the colors and so on so let's click on design on the left side menu and then let's click on side Styles then on the right side we can see we can change the fonts for our website so you can either change the fonts based on what type of text it is so if it's headings paragraphs buttons and so on or you could just change the entire default package so when you click on switch here you can play around with the different font Styles as you can see here and currently we are on this one but when you click on other ones here it will just change across your entire website so once you like your fonts just click on Save and this will take you back to your website and then let's go back to side Styles and then we can also look at colors so here we can either add each individual color for all kinds of elements on our website or you could just edit the entire palette so here are some presets that we can choose from so for example this one here which will just change the entire color theme of our website I actually like it the way it was I'm going to go to the undo button and not change anything here then we also have the animations so here this is just an overall animation that will happen when people visit your website you can play around with this I personally like the slide option here so you can see the elements were kind of slide in when you scroll down so it looks very high quality and very modern so I like the slide option so I'm going to choose this and go back here and then you can also go and change the mess with the spacing I don't really change this so I'm going to leave it as it is and mess with the buttons or the image blocks personally I recommend to just leave everything as it is if you don't know what you're doing because it's already kind of optimized by Squarespace so once that's done let's click on Save and then also go to the browser icon the browser icon is basically what you can see here in the top of your browser window here we want to add our own logo so I'm going to click on ADD favicon this is another name for browser icon upload my icon so I have it here under favicon I'm going to add the white one open then click on Save and now when people visit our store they will be able to see our logo here at the top of the browser so let's go back to design and now let's also go to the checkout page so like I've said before here you can change some settings on your checkout page specifically so you could change the button color for example or the header color whatever you want I'm going to leave everything as it is because I think it's already optimized based on the template that I've chosen so let's go back to design and that's it for our design tab so next I want to go over how to optimize your site for mobile screens which is very very important so let's go to the mobile view on the top right and then here right off the bat we can see that we have some work to do so let's click on the edit button on the top right to be able to edit the elements here on mobile now keep in mind that when you do something here on mobile it doesn't really if affect the desktop version so here for example what I would do is just rearrange these elements a little bit so just maybe make this a bit larger drag this to the middle have this here have the shop button here and that already looks a lot better so now when we go back to the desktop view we can see that nothing has really changed and that's how you can optimize for mobile you basically build it on desktop and then you optimize everything on the mobile view so here again we just drag this to the center now what does change is like if you click on this text and then you change like double click and then you change the alignment to to be Center aligned and then when you go back to desktop this will be the same here on the desktop version so when you make style changes of each block then the changes will be also made on the desk top version but if you're just going to be dragging things around and changing the size of different elements this will not affect the desktop version so you can just drag everything around and rearrange it on your mobile screen version and once that's done you want to click on done and save so now we just need to go over a couple of settings to finish up setting up our store and then we are ready to launch so let's go to Commerce here on the left side and then we can see a checklist set up your store checklist here and we can see we have some more steps to do so one is payments let's click on payments here this is basically your payment provider which is the way that people will be able to pay you for buying the product on your store so Squarespace doesn't have an integrated payment system like for example on Shopify or Wix they still use a third-party payment providers so so you have stripe PayPal and square for the United States only personally I recommend to use stripe because PayPal they are very restrictive they can hold your money for a long time if something just doesn't add up for them which can be really frustrating so I would definitely recommend you use stripe just click on connect and then type in all of your real truthful information so you can connect it and get paid so let's go back once that's done let's go to fulfillment and this is about your shipping rates so what you're going to charge for shipping click on ADD shipping option here and then you have some different options and how you want to set up your shipping rate and the easiest way is just to set up a flat rate so you could just click on Flat Rate here and we could just name this standard shipping and then add a fee per order or a fee per item let's say we just charge let's say nine dollars per order and then click on Save and then we can all set up the shipping zones as we can see here so let's click on shipping zones and then add a country so this depends on where you're shipping to let's say we're just shipping to the United States so I'm just going to choose United States here and then click on save so now this shipping rate is going to be applicable to the United States if people choose standard shipping we can add multiple options so for example we could add another shipping option flat rate and then type in let's say express shipping we could make this let's say 18 and then the shipping zone is again going to be United States choose United States here click on Save and then we can set up more rates for other countries other regions around the globe depending on your business once that's done let's go back to Commerce and now to be able to publish our store we also need to choose a payment plan so let's click on subscription here which will open open up the different plans we can choose from so as this is an e-commerce website we do need to choose either the business or the Commerce plans here the personal plan won't work because then we don't have the integrated e-commerce as you can see here so it doesn't mean we can't accept payments if we choose the personal plan so what I would recommend is to just go with the business plan if you're starting out and then once you are making enough sales then you want to go for the Commerce plans because when you choose the Commerce plan then your transaction fee will be zero percent if you go if you stay with the business plan then your transaction fees will stay at three percent which can add up to a quite a lot of money when you start making a lot of sales but for now I would recommend to choose the business plan then you can either pay annually which would make this 23 dollars per month or you can pay monthly which would make this 33 dollars per month if you pay annually you also get a free custom domain for one year so I'm gonna use I'm gonna click pay monthly because this is just an example website and I just want to show you how to set it up so let's click on select here then here fill in your payment details and click on Save and continue then here on this page we can add a promo code now currently I don't have one but I will message Squarespace if they can give me one for my YouTube subscribers if I get one this code will be down below in the video description so for now let's just click on confirm payment and now the plan is active and we can publish our store however we still need to get our custom domain so let's click on get a domain here then if you already have a domain that you want to connect you want to click on use a domain I own but most people probably don't really have a domain yet so let's click on get a domain and then here we can look for the domain that we want to get so for me this could be something like Medics headphones.com if possible so there we go medicshedphones.com I would buy this domain and click on it click on checkout now I've chose the monthly plan so I would have to pay for this domain as well but if you are on a yearly plan then you would get this domain for free for the first year so as this is just an example store I'm not actually going to go ahead and buy this domain but you want to Simply enter all of your information here click on Save and continue and then your domain will be automatically connected to your online store so once you've gotten your domain let's go back to the main menu and click on settings and then go to site availability here and change it from private to public click on Save and now your website will be public and people can visit it by going to your domain now let's go back to settings and then you also want to go to Commerce business information and then just fill in your business information here and then what I also recommend you do before you start sending people to your store is to just test every page on your store and see if everything works properly you can go to the preview button here and then just go through the entire customer experience again go through all of the products go to the checkout page see if the shipping rates are calculated correctly see if people can actually check out using the payment provider that you have added to your website otherwise you will maybe spend money on advertising and then find out that people couldn't even check out and buy your product which would make you lose a lot of money so this was my tutorial on how to create an online store using Squarespace hope hopefully it was helpful if it was definitely give the video a thumbs up this would help me out a lot thank you very much for watching I look forward to seeing you in the next video