How to Build a Squarespace Website from Scratch in 2023

If you want to build a Squarespace website from scratch you’ll need to make a Squarespace account, create a new website and style it with relevant fonts and colours. When you’re happy with the design, you can simply add your content, choose a domain and publish the website. Sounds simple enough, but it can be a lot of work. I’ve broken down my process into bite-sized steps so you can learn how to build a Squarespace website from scratch without getting overwhelmed.

Create a New Website

Before you can do anything, you’ll need to make an account on Squarespace and create your first from scratch website. From there, you can begin making edits, adding content and changing the look and feel of your website. To create a new Squarespace website, follow these steps:

  1. Head over to Squarespace and create a new account by clicking Get Started in the top right corner.

  2. This will prompt you to select a template. Don’t worry too much about which choice you make - all of the templates have the same functionality, and you can change the design later.

  3. Next you’ll be asked to sign up for an account, or log into an existing one.

  4. Once you’ve logged in, Squarespace will walk you through the process of giving your new website a name and showing you how to make basic changes.

The Squarespace website templates page.

The Squarespace website templates page.

If you work with a Squarespace Circle Member (like me!) on your website, they may be able to offer you a 20% discount on an annual subscription. However, they will need to create the website for you for this to be applied.

Choose a Colour Palette

If you’re starting your Squarespace website from scratch, you may not have colours chosen yet. Colours have a huge impact on the way your website appeals to people - take advantage of this and choose colours you know your target audience will prefer.

Squarespace will generate colour “themes” based on the 5 different colours you add to your new website.

You’ll want to select 5 colours ranging from light to dark so you have a good variation. I actually don’t recommend using more than 2-3 different colours. Those remaining can be light/dark variations of the other colours.

Three different colour palettes made up of five colours each.

Three different colour palettes made up of five colours each.

If you’re struggling to find colours, I recommend utilising Google to find other websites with appealing colours. Once you’ve found a few, use the Chrome Extension called Chroma to find the hex codes for those colours. You can also generate colour palettes with this tool!

To add the colours to your Squarespace website, follow these steps:

  1. In the Home Menu, go to Design > Site Styles.

  2. Click Colours, and select Edit Palette to open up the colour palette editor. 

  3. Select each of the circles to replace the colour. You may need to select Hex from the dropdown menu to paste in hex codes. 

  4. Make sure you paste in the colours going from left to right, light to dark. Squarespace will automatically update the website based on this order, so if you add the colours out of order, your website will end up looking odd!

The colour palette settings on a Squarespace website.

The colour palette settings on a Squarespace website.

Choose Your Fonts

If having a good looking website is important to you, this is where you need to spend your time. Figuring out typography is probably 5% of the total effort it takes to build a new website…yet it will have the biggest impact on the appearance by far.

Squarespace has a huge selection of fonts which you can use on your website. It draws from two different font libraries:

The Google Fonts logo and the Adobe Fonts logo.

The Google Fonts logo and the Adobe Fonts logo.

It is much easier to find and choose fonts using these websites, rather than on Squarespace directly. Double check that Squarespace has them available though, as not all fonts will be. To add fonts to your Squarespace website, follow these steps:

  1. In the Home Menu, go to Site Styles > Fonts.

  2. Select from the Global Text Styles to adjust the fonts for different places.

The font settings on a Squarespace website.

The font settings on a Squarespace website.

Do NOT use more than three fonts on your website, as it will be overwhelming. In fact, using just two is a safer bet and much easier to get right.

Using a Custom Font

Alternatively, you can upload a custom font to your website and use that instead. This means you can have pretty much any font you want! I love using Creative Market to find new and beautiful fonts, as they currently have over 60,000 created by designers all over the world. They also have FREE fonts available every week as part of their weekly drops

Some of the fonts available on Creative Market.

Some of the fonts available on Creative Market.

You’ll need a small amount of code and the font files to upload custom fonts to Squarespace. Detailed instructions about how to do this can be found in my post below!

Related: How to Add and Apply Custom Fonts to Squarespace 7.1

Add Your Copywriting

Copywriting is the text you add to your website. If you’re building your Squarespace website from scratch, then you probably don’t have much (if any) text to use. This means you’ll need to write all of your copy at once, which can be quite a time-consuming task.

However, there are two ways you can go about writing your copy:

  1. Write the content specifically to fit the template you’ve chosen.

  2. Write the content you actually need and adjust the template to fit.

I find method #2 to give better results. Websites are more effective when they are content first - meaning that they are designed with the content in mind. The information you need to convey is more important than sticking rigidly to a template’s layout.

Whatever you do, do NOT write your website content straight into Squarespace. It will not autosave your work for you when your computer crashes. (Am I speaking from experience? You’ll never know.)

Figuring out what to write on your website is a tricky business, but after building 30+ websites and writing consistently on my own, I have a pretty solid system for it. If you feel like copywriting is going to be a struggle, you might find my course, UntitledCopy, pretty handy.

Add Your Images

If you don’t have professional images for your website yet, there are plenty of free and affordable alternatives. Depending on your business, it can be very easy to get relevant stock photography.

You’ve got a couple of options when it comes to sourcing photos:

  1. Unsplash. This is a website filled with copyright free photos contributed by professional photographers all around the world. And it’s free to use!

  2. Creative Market. If you need something a bit more cohesive, you can find themed bundles at super affordable prices.

I love stock photography bundles, because they give you the curated, professional feel without forking out hundreds for a photographer to come to your home/office/coffee shop and take pictures. We’re talking about $20 - $40 for a set instead of over $500. 

My favourite Creative Market shop for bundles like this is Floral Deco. They have hundreds of bundles to suit all businesses and colour themes!

The Floral Deco Creative Market shop.

The Floral Deco Creative Market shop.

Please don’t use photos taken by your phone on your website. Unless it’s for an occasional picture of you, they won’t look professional OR be high enough quality for bigger screen sizes.

Add Email Marketing

Just because you’re starting your Squarespace website from scratch doesn’t mean you should “skip this step for now”. So many business owners regret not starting their email list earlier (I’m guilty too) so don’t be one of those people! Simply pick an email platform and start adding forms to your website. I recommend using one of these platforms:

  1. Mailchimp. This is a free email platform that integrates with Squarespace’s native forms and is super quick to set up.

  2. Flodesk. This is the paid email marketing platform I have used for years and love.

Why Mailchimp

One of the biggest advantages to Mailchimp is that it is free for your first 1,000 subscribers! If you’re just getting started with email marketing, you might want to experiment with a free platform before making the investment into a paid one. You can always move your email list over to another platform later.

The Mailchimp website.

The Mailchimp website.

Why Flodesk

I found email marketing a struggle for so long, simply because every platform felt clunky and frustrating to use. Flodesk is the complete opposite - in fact, it looks and feels exactly like Squarespace and I truly enjoy using it in my business. So I do actually use it, so it works well to bring me clients and income. You can grab 50% off Flodesk with this link.

The Flodesk email marketing platform.

The Flodesk email marketing platform.

Don’t feel stressed about emailing your list straight away or even figuring out what you want to say. Just advertise your sign up forms as a way for potential subscribers to get free, valuable content from you on a regular basis. 

Add Call Booking

Most websites will need a way for clients to book in calls. You might call them discovery calls or consultation calls, but it’s just a way for potential clients to learn more about your services and begin the booking process.

It’s great for action-takers, as often people will want to skip the contact form and start a conversation with you as soon as possible.

I recommend using Calendly, a free scheduling tool for this purpose! You simply create an event type (for example, a discovery call) and generate a booking link. You can also set your availability and automatically block off busy times based on your calendar.

An example Calendly booking page.

An example Calendly booking page.

Once you’ve set things up in Calendly, you’ll need to add the link to your website. It’s best to use your contact page, since that’s where people would expect to find it! To add a Calendly link to your website, follow these steps:

  1. In the Home Menu, go to Pages and select your contact page.

  2. Click Edit, then hover over a section and click Add Block.

  3. Click and drag Button from the menu onto the page.

  4. Hover over the block and click the Pencil Icon.

  5. Under Link, paste in the relevant Calendly link.

  6. Select the Cog Icon and make sure to turn on Open in New Window.

  7. Hover over Done and click Save.

How to add a Calendly link to a Squarespace website.

How to add a Calendly link to a Squarespace website.

Add Your Policies

Starting a Squarespace website from scratch is tricky enough without getting into all the legal things. But it is a legal requirement to have a Privacy Policy and a Cookie Consent Solution (a notice of your use of cookies and a way for people to switch them on/off) on your website.

There are two ways you can get this sorted for your website:

  1. Find a free Privacy Policy on the internet and add that to your website, then use Squarespace’s built-in cookie banner.

  2. Use Termageddon, my favourite set-it-and-forget-it solution to website policies and cookies for $10 per month.

I’m usually all for the free solutions/workarounds, but there are a couple reasons why method #1 is a bad idea in the long run. 

Free Privacy Policies

Free Privacy Policies are okay, but they’re so full of jargon that it’s difficult to understand what exactly you’re putting on your website and whether it’s actually going to cover you. Squarespace’s built-in cookie banner isn’t bad, but there are legalities about users being able to opt-out of specific cookies, which is where Squarespace falls short.

Related: How to Style Your Cookie Banner on Squarespace with CSS

Termageddon

On the other hand, Termageddon will ask you specific questions about your business and generate your Privacy Policy and Cookie Consent Solution based on that. Users also have full control over which cookies they would prefer to enable/disable. 

You just add the code once and they’ll magically update themselves when laws change. You never have to think about it again! Grab 10% Termageddon off here or use the code WOLF at checkout.

The Termageddon Cookie Consent Solution.

The Termageddon Cookie Consent Solution.

Grab Your Domain

The domain is the URL for your website! Squarespace will give you a temporary domain until you are ready to launch (it’ll be a whacky looking thing like paddlefish-rhino-xdw1.squarespace.com) but you will need a professional domain.

How to choose a domain

You can search to see if different domains are available here, and also get alternatives/similar domains in case it’s taken. Definitely spend some time thinking about the perfect domain for your business, as it’s not something to pick on a whim. Here are some tips to picking the right domain for your Squarespace website:

  • Pick a common domain name extension. Endings like .com or .org are pretty standard and people may get confused if you use more unusual (and expensive) endings like .site or .online.

  • Short is better than long. People will forget, mistype or confuse a longer domain. Make sure yours is short and memorable.

  • Make sure it is easy to pronounce. Your domain should roll off the tongue and be easy to spell after hearing aloud.

  • Avoid hyphens and numbers. Your domain should not need to be “explained”. If you have to explain a hyphen or numbers in the name, it’s too confusing.

  • Think long-term. Will you be happy with the name in 3-5 years? Changing your domain name in the future will cost you time, money, branding and Google rankings.

How to buy a domain from Squarespace

If you haven’t bought a domain for your Squarespace website yet, follow these steps:

  1. In the Home Menu, go to Settings > Domains > Get a Domain.

  2. Enter the domain name you want to use in the search bar and you’ll be able to see if it’s available.

  3. Select a domain and click Checkout to purchase.

How to choose a domain for a new Squarespace website.

How to choose a domain for a new Squarespace website.

Squarespace offers a FREE domain for the first year to anyone who pays for their website subscription annually. So if you’re brand new to Squarespace, definitely take advantage of this offer. Just wait until after you’ve purchased your Squarespace plan and the free domain will be applied automatically.

Make Final Checks

Before you launch your website, there are a few things you need to check. It is so important that you don’t skip this step, because you are likely to catch any small mistakes early on. These are the most important things to check on your website:

  1. Check your contact forms 

  2. Enable a Cookie Consent Solution

  3. Enable a custom 404 page

  4. Complete basic SEO inputs for every page

  5. Check your loading speeds

  6. Check your page URLs

  7. Upload a favicon

I have a separate post which explains how to complete each of these checks in more detail.

Related: 7 Things To Check Before Launching Your Squarespace Website

Hit Publish

Now it's time to hit publish on your new website! This means making sure it's available to the public, and everyone is able to access it with your chosen domain.

To make your Squarespace website public, follow these steps:

  1. In the Home Menu, go to Settings > Site Availability

  2. Select Upgrade to Publish, and choose a pricing plan from the page. (If you've already purchased a plan, you won't need to complete this step.)

  3. Once you’ve selected a plan, you can go ahead and complete the checkout process. Remember to enter a discount code if you have one!

  4. If you’ve paid annually, you’ll be eligible for a free domain and should get prompted to select and add one to your website.

  5. Your website should now be public! Double check by going to Settings > Site Availability. You should see Public selected.

Related: How to Choose the Right Squarespace Pricing Plan for your Website

Related: 4 Ways to Get a Squarespace Discount

Screenshot showing how to check if your Squarespace website is set to Public.

How to check if your Squarespace website is set to Public.

Previous
Previous

How to Switch to Squarespace 7.1 with the New Update Tool

Next
Next

How to Add Underlines, Highlights and Text Effects on Squarespace