Building an E-Commerce Website | Squarespace | Squarespace Templates | Ecommerce Website Design



[Music]hello and welcome to another tutorialfrom profile tree today we're going totalk about making an e-commerce websitewith the website builder Squarespace solet's go ahead and get started the firstthing I'm gonna do is login and whenlogging in you have four options you caneither log in via your created accountwith your email address and password oryou can sign in with Google Facebook orTwitter also if you forget your loginthere is a way of recovering your emailor password so I'm going to just log inwith my owner kiteonce you've logged in it will take youstraight to the dashboard and todaywe're going to be creating a brand newe-commerce site so we're going to go tothe top and click create a site onceyou've collected it we'll bring you up avariety of templates and you can gothrough each category and based on yourbusiness you can select a template thatsuits you today we're going to bebuilding an e-commerce site as I'vementioned so we're gonna go to onlinestores so now we're gonna select wettemplate we're wanting to use so scrolldown on online stores and just selectone that you like you can preview atemplate or you can just select it I'mgonna go with Jonesso let's give it a few seconds to loadup welcome to your new Squarespace siteand so click start to begin and thenyou're brought automatically to theeditor so let's begin with our sitetitle so click Edit so sad title a slashtagline your site title goes in here andwe're gonna be selling art so we'regonna call itfine art belfast and the tagline it'sgoing to be something simple you need tocreate a logo so RS if you've got yourown logo already but it's definitelyimportant to create one so I'm going toshow you quickly how you can create alogo using Squarespace so go to localmaker I'll enter your company name whichis fine art Belfast and then search forsymbolso based on what your business saysenter that into the search and it willbring up symbols related to that pieceof textand then you can go ahead and add at thefonttell you find one that you think workswell and you can pretty much editeverything else there's quite a basiclogo you can also add your tagline andthen click Save logo so you either needto log in or create an account I wantyou to log in you can download the logoso you can go ahead and choose which oneyou want to downloadI actually prefer this version dependingon what your website is as well whereit's gonna go I see that this isactually a white background so I may bebetter choosing this one but you canalways go back and download probablybetter download anigh they're all threeversions just remember which ones whichgo back to your website editor and clickAdd lugal I'm gonna add this onenow we have it tell us our logo uploadedyou can also add what is called afavicon which goes in the little spaceof your tab when the user of the websiteis browsing your website will appearhere so that's squarespace's favicon youcan also have one and a social logo soonce you're done just click see if Iwill update the page so there's a littlelogo at the top I'm not too sure if ourtagline fits in so well beside our logoso I'm gonna remove this for themeantime so remove that and click SaveI think that looks a lot better soyou've got a lot of flexibility whenusing square Spears and I will show youwhat I mean by that so if we go back todesign and we click on site stars youwill see the amount of different thingsthat you're able to change and edit onthe page and the more flexibility ofdesign that you have the more freedomthat you have to add it the morepersonal your website's gonna be towardsyour business and therefore the betterit's going to be providing you edit itto a high standard so you've got yoursite background your maximum width yourspacing custom spacing your alignmenttitle font title color logo max maxheight so I'll never go above thatcertain height that you set it a gotyour footers your header layouts yournavigation on your typography excuse meso all these things you can add ityou've got your page where you can edityour index boner and several otherthings your boners banner text the listgoes on and onitem image mortification and then thisis important to your movie so you canoptimize your web page for MU by mobilemenu or by card icons so there's all thedifferent things you can add it on thispage let's go down to lock screen socustomize the page that has displayablevisitors on your site or individualpages our password protected so you canchange and edit all that you know addvideos or media etc etc that's onlyrelevant if your password protectingcertain pages so it could be a specificdocument you only want certain people tosee or so I'm just important informationthat's when you would do something likethat and this is how you add it thepassword protected page excuse me checkout kidsso again some more design elements thatyou can edit so if we just go throughshow site logo on the page your headercolor you can select that try and keepwith the current theme head our linemengonna put it in the center but also logois to the left on the homepage we'll tryto keep it the same button color you canchange that and if you go through andyou change things and you get this stagewhere you think you're in a bit of amess because you've changed so many youcan always reset the styles to thedefault so save that and go back and goback to your design and scroll down tothe error page this is what's gonna comeup if someone tries to search for acertain page in your website that you'vedeleted or it's no longer active so it'sjust showing you how that's gonna lookso if you want to add something to thispage click Edit and you'll see thislittle tear drop icon so the tear dropicons when you click on them you can addpretty much anything from photos to textto buttons images grids slideshows formsso on an error page you could have acodewhich is just going to saywe were sorry but this page is no longeravailable click here to go back to thepagerightand what's thatso once you're happy with that go aheadand click see ifand that's thatso let's get on to Squarespace badge sothis is basically at the bottom of yourpage where it says part by Squarespacebut if you want your website to look abit more professional you shouldprobably take the simple square spacebut and this will disappear when you arepaying for your website so we're goinglook at costings now after we lookacross things first so go back here andthen go down to settings and then go tobilling and account go to billing so upcreate your site you have 14 days leftof your free trial of great night toensure it stays life so our currentdomain is this and that is not what youwant to have for a professional websiteso we go to upgrade plan we can see thedifferent plans they're offering us sowe're also going for an e-commercewebsite so it might be on commerce plansso the basic commerce plan 20 pounds amonth everything you need to get yourbusiness off the ground so this might bea good place to start so let's go lookat what you get with the 20 plans amonth all features from the businessplan you get to sell unlimited productsso you get new trends no transactionfees so all your products that you sellyou will get 100% of the revenue forthose products mobile optimized websiteuncheck itso as we know a lot of searches todayover 50% of searches are completed on amobile device as mentioned in theprevious Worx videos so if you're justjoining usin these videos just to make you awarethat over 50% of searches today arecompleted on a mobile device so it'sextremely crucial that your website isoptimized for mobilefree custom domain with annual purchaseso all Squarespace website planspurchased for an annual term include oneyear of free domain registration onavailable demands on our cheapestpricing tier so that's a very goodbenefit security included so we don'thave to manually maintain the securityof your website you'll get what's calledssl security he will look after yourwebsite for you 24/7 support which isalways good if you ever get stuck youhave got 24/7 access to the Squarespaceteam who will reply and help you throughany of your problems that you may haveunlimited contributors so that justbasically means if you're editing awebsite and there you've got anothereditor is a different location you forexample you're in Belfast and you're theother editor is in London or Madrid andyou want to give them access to editingwebsite maybe they're doing part of ablog for your website and you're doingthe video editing or adding videos tothe website so you can then forward themthe details to edit the website and theycan have access to that powerfulcommerce metrics so you can track theaverage track visits traffic sourcespopular content move on your seedssearch engine queries and much more sokind of similar to SEO you can trackwhere your traffic is coming from andanalyze the data and try and producecontent that will entice these customersand maybe look at areas where you'relacking and try and produce content thatwill engage in the areas that you'relacking you can track your inventoryyour tax coupons things like that labelprinting so you get access to the labelprinting ship stationso you can single your orders thatyou've received and they will printlabels for all major carriers integratedaccounting so Squarespace commerceautomatically syncs with zeroscloud-based accounting platform which ishandy for your accounting and check outcheck out on your Jim Ian so directcustomers go to a secure check appearson your Demyan customer kinds yourcustomers can create accounts and signin for faster checker which means theydon't have to fill out a form every timethey go to complete a purchase sometimesthat will put customers off if they haveto keep entering information every timeso your customers can have a coins andwhen they have a coins that means youcan build on those relationships by forexample email campaigns and justdifferent forms of contact it's forexample that you can able them about therelease of some new products if there'sa CL on just things like that it'salways good to have customersinformation as your Immortal more thanlikely to get repeat custom fromcustomers that you can keep in contactwith and finally products on Instagramsync your products with Facebook'sproduct catalog to tag products in yourad second proofs and sell more so that'squite a lot for a basic plan rememberthis is the basic commerce plans it'scheaper if you're not using ane-commerce website but that's thecheapest commerce plan you can get andthat looks pretty good to me so let'slook at the additional features for anextra 10 binds a monthI'm sorry 30 pounds a month billedannually or 37 pounds month-to-monthplus applicable taxes okay so the extraadditional features that you getsubscriptions start sellingsubscriptions to products and serviceson a weekly or monthly basis so forexample that's like your Spotify orEurope an in if $8.99 a month or 1099 amonth and you're getting not repeat andcome from these customers for anyproducts or services that you can chargea subscription fee for and it'shere which makes it easier to buildcustomer loyalty so that's a goodfeature already you're probably if youdo manage to get several customerssigned up to a subscription you're gonnamake back that small fee quite quicklyand advance shipping so automaticallycalculate at real-time rates forservices like USPS FedEx and UPS controlyour separate shipping options at thezip code level in the US FSA level andin Canada so that's a very good featuremore relevant if you're in the US thatlooks like it's still very important ifyou're a global company and flexiblediscounts so offer discounts that areautomatically applied to qualifyingorders and check out or are limited inuse giving your full look giving youfull control over your storagepromotions so any promotions like salesor vouchers or coupons that you'rereleasing you have complete control overthem you can release gift cards to yourcustomers there's all gift cards in youronline store to expand your reachrecipients can redeem these gift cardsas payment in checkouts and API ordersbuild custom integrations with thethird-party systems that you use tohandle order fulfillment and productlogistics so there is a lot ofadditional features there I would saythat this is more for the likes of yourGlobal Brands who are selling all overthe world primarily because of thisadvanced shipping and if you're a smallcompany you're more than likely notgonna really have many customers thatare signing up for subscriptions to yourwebsite but I do think that this is verygood value so go ahead and select oneand yep go ahead and under yourinformationand you'll have to pay an upfront costof 240 pints and then you will becharged to whatever rate you select sothat's just looking at costings I'mgonna go back and look at the actualcreation of the website now so let's weleft one thing out on the design whichwas custom CSS so this area will allowyou to inject custom CSS rules into yoursiteso the first thing that I want you to dois to open a new tab and type inSquarespace block identifier go into thesecond one and click it and click Add toChrome once you've done that it willappear up here and then you can closedown the tab okayso now you're back on to your editor andwhat I want you to do is click on aproduct[Music]in fact we'll add our own image so yeahwe're gonna use the go TR up by thosepits and go to the food aI'm the fitter sorry well I'll an imageand yeah so click the teardrop iconclick image click upload an image thenclick another thing you like I'm gonnapack the logo processing resizing oncethat's done click applywould you've done that just click on andthen click on the block identifier andonce you want to once you find that youclick on the block and it'llautomatically copy the code that youneed through the clipboard once you'vedone that click see if and go to yourCSS field there's also a piece of codewhich I'm going to put in thedescription of this video that you willalso need but for now I'm just gonnapaste there myself okay and now I'mgoing to go to the top and pierced in mycode that I copied from the block andthen I'm gonna go down and that shouldbe at saved now you will start to seethat my logo is moving up and down andthat just gives a more dynamic feel tothe website and yeah it's for moreanimated so that's just something youcan do are utilize CSS for so we'll goback from this and finally make it ontoour e-commerce section so if we go toorders you can search for any orders andthe search bar by name email or ordernumber inventory which is your stockIsrael premium features but you canstill get the idea of what Squarespacecan offer you that's where all yourstock is stored then it was purchased itwill automatically update customers as Iwas mentioning earlier you can give yourcustomers the option to create anaccount so that they don'tto further deform every time they go topurchase products this is where alltheir information will appear and youcan search for them againdiscounts I think I've talks on this aswell already so basically this is whereyou will put the legs of your gift cardspromotion seals objectives all in thissection I thoroughly recommend that youget a premium account so that you canmake the maximum use of this this iswhere your payments can be utilized soyou can see the Apple pay discoverAmerican Express MasterCard and Visa andthen you've also got your external oneswhich are PayPal and venmo your storecurrency is here so if you're using USdollars or any currency like and movingon the checkout page enable up on thecard recovery emails so if someone isit's made a massive order and then theylose internet they can get back thereand caught that they had created checkout on your own domain of course mewlinglists which are touched on your shippingand billing addressesshipping so you can add shipping optionsconnect to ship station Squarespace haspartnered with ship station to save youtime shipping your ordersyou can print shipping labels for allmajor carriers and batch andautomatically send shipmentnotifications to your customers withtracking numbers ship station is asubscription service with plan sellingfrom nine dollars per month thisintegration is only supported in theUnited States Canada United Kingdom andAustralia so if you don't really havetime to be manually doing all yourshipping or you don't have an externalshipping provider then you could maybethink about using ship station which isavailable on the Squarespace taxes andtaxes included and product prices that'sall done for you you not to worry aboutthatand I can't ding so you get alldifferent reports and there's anaccounting software called zero whichI've touched on so you can get all youraccounting from the last week let pastmonth past ninety days here today it ora custom range so there you are I hopethis tutorial has helped you today itwas designed to be a brief tutorial Ican't do I will be doing another largevideo specifically on Squarespace and Iwill touch on almost everything but Ihope this gives you a brief right thereto help you get started on making ane-commerce website thank you forwatching goodbye

Source