Squarespace Ecommerce Tutorial 2023 - Create a Professional Ecommerce Website on Squarespace

[ad_1] - What's going on? My name is Simon, and in this video I'm gonna show you step-by-step how to create your own professional e-commerce website using Squarespace. We're gonna start from complete scratch and we're gonna 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. All right, 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 gonna ask us a couple of 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 gonna 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 gonna 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 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 wanna sell something in the photography niche, Then you might wanna just choose photography here to see the templates that were made for a photography e-commerce website. Then if you wanna 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 wanna choose, simply click on start with this design And then you will get to the next step. Now, for the example store I'm gonna build in this video, I'm gonna choose this template right here called Zaatar. 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 wanna choose, simply go with this one and then just follow through with this tutorial. So I'm gonna click on start with Zaatar. Then here we're gonna have to create our Squarespace account. So it 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 gonna name my website Metics Headphones, Because in my example store I'm gonna be selling headphones. Then click on continue, and let's close this window. So now before we're gonna start customizing our e-commerce website, I wanna give you a quick introduction of how this Squarespace editor 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 homepage, 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 gonna do all of our changes on the desktop version. So we're gonna go back to the desktop view. Whenever you wanna 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 homepage. And then here on the left side We have the menu items of this editor, which we're gonna 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 could 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 wanna keep it by just clicking on copy page. Now, I don't need a journal page, so I'm just gonna 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 gonna go through each of these menu items right now because we're gonna cover them throughout the video, but what I do wanna 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 gonna continue with this website here. So we're just gonna click on website, which will take us back into the editor. All right, so as this is an e-commerce website tutorial, I wanna first show you how you can add your products to your website, and then later on we're gonna 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 gonna go to pages, and then we're gonna go to the shop page. So we're gonna 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 wanna 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 that 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 gonna 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 gonna click on physical product here. Then here I'm gonna 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 the 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 wanna make sure that you actually update this number when you get more stock. I'm gonna 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 gonna look at the fulfillment options later on in the video. Here under organization, you can add categories to your products which I recommend. 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 categories. So I'm gonna add 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. Then you have visibility. So we're gonna 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're gonna 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 gonna also add our own domain To make it look very professional. We're not gonna worry about the checkout options here. I'm gonna 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 boxes 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 delete them individually. So now I've added a couple of more products just so we have something to work with for our example store. Now, if you wanna 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 wanna 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 homepage. And now we're actually gonna go and click on edit, which will take us to the editor where we can start customizing our website. Now I wanna quickly explain to you how this editor works Because it's very simple and you're gonna get how to use this very quickly. So the basic structure of your website is gonna be, there's gonna be a header here at the top. You can see it here, site header. Then all the way on the bottom is gonna be a footer, Which you can see here. These two elements are gonna be visible on each single page on your store. It can be the homepage, 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 the section, the main section here on the homepage. Then this is another section. 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 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 wanna edit each block, simply click on it, for example, this button here, and then you get some options here. So we 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 your section. Now, whenever you wanna 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 wanna 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 wanna duplicate a section, just click on the duplicate icon, or you can also click on the remove icon If you wanna 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 wanna 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 wanna 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 content to our own images. What I'm gonna do is just, I'm gonna delete everything, all these sections here, and then I'm gonna start from complete scratch. So I'm gonna 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 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 gonna add our content for our homepage. 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 homepage, we'll probably use something From the intro pre-made templates here. So if you like something here you can use it. However, I'm gonna build something from complete scratch, so I'm gonna click on add a blank section here. So now what I wanna create is I wanna have an image here On the right side of one of my products. Then on the left side we're gonna have a text and then a button that says Shop Now. So add these elements we're gonna click on add block, and then I'm gonna first add an image. Then I'm gonna 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 use these AirPods Max or Air, I dunno what it's called. And then we can just drag this wherever we want. Now to edit this image, we're gonna click on the edit button here, click on edit right here. And now I'm gonna click on the crop icon. I wanna have this as a square image because it's gonna fit better on the website. So I'm gonna click on 1:1 which is a square, And then I'm gonna 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, add some text, then double-click and type in your text. I'm gonna just say something like experience perfect sound, and I'm gonna make this a heading. Let's do a heading two, 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 hit G on your keyboard, you can always see the little brackets here, which is gonna be the area Where you can drag your blocks around. If you wanna 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 the shop page. So I'm gonna go to this link gear icon, And then go to page and to the shop page, click on save. And there we go. Now when we hit G on our keyboard again, the rectangles will be gone. And so this is my hero section of the homepage. Now let's move on and add another section. So let's click on add section here at the bottom. And now instead of starting from scratch, we're actually gonna 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 homepage, Just choose the one you want. I'm gonna choose this one here, and I'm gonna update the text a little bit by just clicking on it. I have prepared something here, so I'm gonna add something like why we are different. I'm gonna change the size a little bit. Actually gonna choose this one here. When you click on this icon, you can just change the exact size of your text, and then we can just change text here as well. Just paste it in. And I'm gonna change the button text to let's say learn more or shop now which makes 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 page. So let's just go to the gear icon and then just choose the shop page again, make sure to click on save. And there we go. This is our next section here. Now what I also like to do on the homepage is show people the different categories of the products we are selling. So that's what we're gonna do now. So let's click on add section to add another section. And again, I'm gonna use a pre-made section. I'm gonna 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 gonna 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 collections, let's say earbuds. So I have an image for earbuds, and then I'm also gonna 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 wanna do is add buttons here below that say what category this is. So I already have a button, so what I'm gonna do is just duplicate this one twice. So I have three of them. Just drag this to the correct image and then I'm gonna 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 then 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 gonna choose the headphones category. And then for the last one, we're gonna choose the sport category. So now we could just move on and build out our homepage 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 product, 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 signup 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 wanna waste your time and just build out this page even further. So what I'm gonna do is move on to the next part of the tutorial, which is gonna 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 gonna 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 gonna do is add our logo by going to site title and logo. You can change the site 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 could just add the title here, But I actually have created a logo for this example store, which is this one here. So I'm gonna add it by uploading it to the website, and then you can see it here on the top left. Now I'm gonna change the height a little bit to make it a bit smaller like this. And then I'm gonna 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 gonna show exactly how to adjust in the next step, but first we're gonna 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 gonna 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 cart icon. I would recommend to leave this turned on because you have an online store and people are used to seeing this cart and see how many items they have in the cart. 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 a theme and then change the theme for this specific header. So this really depends on what your thing looks the best. I'm gonna leave this on dynamic. You can also add a border here, obviously, as you can see. I'm just gonna 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, Let's just maybe leave this turned on. You have to go to done, save, and then you wanna 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 site header, and then I'm gonna turn off the fixed position. So that was it for the header. Like I said, I'm gonna 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 footer here. So in the footer, what I like to do is add all of the policy pages, like the terms of service, 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 gonna have our social links like Instagram and so on. So first, before we edit anything here in the footer, we're gonna 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 gonna do is use this layout for all of my legal pages. So what I'm gonna simply do is just click on the gear icon for the privacy policy page, scroll down and click on duplicate page. I'm gonna duplicate this page twice because I'm gonna need a refund policy, And also a terms of service page. So I'm gonna click duplicate again here, and then let's click on the gear icon for the first one. Change this to terms of 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. I'm gonna 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 to edit this page, We just click on edit, and then we wanna 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 gonna 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 forms 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 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 gonna do is just delete the Instagram here and then add, I'm gonna start with privacy policy, and then I'm gonna add my terms of service. And once all of those pages are added, what we're gonna do is first of all, highlight everything and make this a paragraph three. And then I'm gonna add the links so we can just highlight the text, then go to the link icon and then go to the gear icon. And this is the privacy policy text. I'm gonna 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 gonna delete this here and this as well. Now I'm gonna add a block and an image to add the logo. So let's click on the plus icon, upload file and choose the wide version of my logo. Then make this a bit smaller like this. 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. I will also wanna rearrange the elements a bit. So I'm gonna 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 then I'm gonna align this in the center To have it lined up with the logo. 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 this looks pretty good. Let's hit G, yeah, that looks pretty good. So I'm gonna keep the footer like that. So now as I mentioned before, I wanna show you how to manage your pages on your e-commerce 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 we've been here before, So we kind of already know how this works, but here under main navigation, this is gonna 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 gonna 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 terms of 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 gonna turn it back on and then click on save. Now when you wanna add new pages to your store and you wanna 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 we 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 wanna 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 wanna 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, we 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 wanna add some FAQs so we can keep this and we can maybe even add this to our main menu here at the top. Obviously, we wanna change the content here, and we also wanna 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 homepage. 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 you 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 cart here at the top right. Then you can see the cart page, then go to the checkout page, And then you can see the checkout page here. Now here you can't really edit much, but I'm gonna 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 site 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 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 site 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 could 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 gonna 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 will 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 gonna choose this and go back here. And then you can also go and mess with the spacing. I didn't really change this, So I'm gonna 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 wanna add our own logo. So I'm gonna click on add Favicon. This is another name for browser icon. Upload my icon, so I have it here under Favicon. I'm gonna 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 gonna 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 wanna 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 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, direct 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 if you click on this text and then you change, like, double-click, and then you change the alignment to be center aligned. 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 desktop version, but if you're just gonna 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 wanna 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 payment, so 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 third party payment providers. 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 gonna charge for shipping Click on add shipping option here. And then you have some different options on how you wanna set up your shipping rate. 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 $9 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 gonna choose United States here, and then click on save. So now this shipping rate Is gonna be applicable to the United States if people choose standard shipping. We could 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 gonna 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 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 wanna go for the commerce plans, because when you choose the commerce plan, Then your transaction fee will be 0%. If you stay with the business plan, then your transaction fees will stay at 3%, which can add up to 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 per month, or you can pay monthly, which would make this $33 per month. If you pay annually, you also get a free custom domain for one year. I'm gonna click pay monthly because this is just an example website, And I just wanna 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 wanna connect, you wanna 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 meticsheadphones.com if possible. So there we go, meticsheadphones.com. I would buy this domain and click on it, click on checkouts. Now I've chosen 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 gonna go ahead and buy this domain, But you wanna 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 wanna 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. 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. [ad_2] #Squarespace #Ecommerce #Tutorial #Create #Professional #Ecommerce #Website #Squarespace For More Interesting Article Visit : https://mycyberbase.com/ https://mycyberbase.com/technology/squarespace-ecommerce-tutorial-2023-create-a-professional-ecommerce-website-on-squarespace/?feed_id=24328&_unique_id=649fd6fadd7fb #TECHNOLOGY