This article was originally published on this site

In this Squarespace tutorial, we’ll walk you through how to build a website on Squarespace, from start to finish.

Compared to its competitors, Squarespace offers some of the most stylish website designs in the industry, along with a site builder made for business owners of all experience levels.

The platform expands its functionality on a regular basis with user-friendly tools for social media marketing, online selling, and email marketing.

Best WordPress alternatives

📚 Table of contents:

Squarespace tutorial: How to build a website with Squarespace

Squarespace makes it simple to construct and launch a website without much design work at all.

To begin, go to the Squarespace website and click on the Get Started button. It’s located in several areas on the Squarespace homepage.

Squarespace tutorial start

1. Personalize your Squarespace experience

Initially, Squarespace asks you about your business and personal information to lead you in the right direction. For instance, someone making a fitness blog would be sent to website themes that cater to blogging, fitness, or other related designs.

site info

You can skip this section, but we recommend browsing through it to locate the ideal designs and features.

Choose what your site is about, such as fitness, restaurants, fashion, or travel.

Click on the Next button to proceed.

top goals

On the next page, specify your top goals, like selling products or publishing a blog. Again, these questions are meant to present the right styles and tools when launching your website.

Select Next when you’re done.

Tell Squarespace where you are in the site-building process. One of the main reasons for this step is just in case you need help transferring a site from another platform to Squarespace.

Click Finish to proceed with the Squarespace tutorial.

process - Squarespace tutorial

2. Choose a starting design

With your personalized details at the ready, Squarespace attempts to provide a website theme that comes close to what you may want for your business.

For this Squarespace tutorial, I’ll go with an online store and blog theme. Therefore, I can filter based on those criteria.

templates for Squarespace tutorial

Scroll through the results to find designs that match your desired brand image. Try your best to get as close to the sought-after colors, fonts, and images. This way, you won’t have to customize as much in the future.

After previewing some website themes, click on one to act as your primary design.

Squarespace then asks you to sign in or create an account.

You can continue with email or a social login like Facebook or Google.

create account

3. Add the essentials

The first steps before launching your site involve adding essentials like SEO elements and the site name.

A popup appears to type in your Site Title. Complete this field and click on the Continue button.

site title

What’s great about Squarespace themes is that they already turn much of your website into a functioning product, with images, headers, and demo menus.

You’ll be redirected to the Squarespace editor, which displays your site design on one side, next to the feature list and settings.

preview for Squarespace tutorial

Click on the Edit button on the site preview.

edit

You’ll see a gear icon to proceed to the basic settings.

Click on that.

settings - Squarespace tutorial

The Page Settings include tabs for General Settings, SEO, the Social Image, and Advanced settings.

Feel free to click through all of these to set your site’s identity.

social image

For example, the Social Image tab only requires you to upload a quick image that gets used if a social site has trouble pulling an image from a page or post.

social image

4. Edit the header and add sections

The visual Squarespace editor includes various buttons and links that appear when you scroll over certain sections of the page.

A great place to start is the Site Header. Scroll your cursor over the header area to show the Edit Site Header button. Click that button.

edit header button

The Site Header editing tools include the following:

  • Site Title and Logo
  • Elements
  • Colors
  • Fixed Position
  • Fixed Header Style
  • and more
header tools for Squarespace tutorial

Each header setting has its own tools for you to turn on and off or adjust based on what needs to be completed.

As an example, you may feel like changing the color scheme or adding a new font.

Each modification you make immediately appears in the preview.

style

Adding a section takes place in the visual editor as well.

Technically, each page on a Squarespace site is pieced together as multiple sections. You can click and drag sections to reorder them or click the Add Section button near a section to place a new one underneath or above it.

add section

You should now see a popup box for adding sections.

All sections are categorized into different collections, some of which include:

  • Donations
  • Forms
  • Newsletters
  • Reservations
  • Social
  • Tour Dates
  • Calendars
  • plus much more

Select a collection to view the different designs and options for each one. For example, the Calendar collection has three calendar formats with varying functionality.

section

Clicking on one of those sections drops it into the place you selected.

Considering each section varies in its functionality, they all have different features.

Click on the new section in the visual editor to modify its unique settings. The calendar section, for instance, has options for displaying events, products, and blog posts by pulling from your website or third-party services.

calendar - Squarespace tutorial

5. Further edit the content on your pages

Squarespace allows you to visit all pages of your website through the visual editor. It’s done by clicking through the preview window like you would a regular website or going to the Pages tab and clicking on the other pages outside of the homepage.

To edit anything on a page, select the Edit button on the visual editor and move your cursor around the page to see the editing option.

Most of the time, clicking on an element like a paragraph box or an image lets you change something.

In this Squarespace tutorial, we’ll click on a paragraph text box to edit some of the headings and sentences. As you can see, a simple text editor shows up with buttons for formatting, bolding text, and linking to other pages.

more edits

Squarespace lets you make as many edits as you want before saving modifications.

To move onto another part of your site, or configure other features, go to Done → Save in the upper right-hand corner of the page.

save

6. Add more pages and edit the menu

With most Squarespace themes, a navigational menu is added by default.

You’re able to add additional pages, edit the current ones, and delete demo content by click on the Pages tab.

pages

Each page in your main navigation is listed under the Main Navigation header.

You might also have unlinked pages below that, serving as pages but not included in the main menu.

Every time you add a page or change the name of a menu item it renders the new item in the website preview.

To make a new page, select the “+” button above the current list of menu items.

add navigation - Squarespace tutorial

7. Publish your Squarespace website

At some point, you’ll decide that the website has enough content and is ready for the public’s eye.

All Squarespace websites start as free trials, after which you’ll be prompted to pay for a premium plan to launch the website.

To begin this process, click on the Settings tab.

settings

Next to Site Availability, you should see the words “Private.”

Click on the Site Availability button to change it to Public.

available

You can still pay for a Squarespace subscription and keep your site private.

In fact, there are three Site Availability settings: Public, Password Protected, and Private.

To officially launch your website and make it public (and gain full control of all other features) select the Upgrade to Publish button.

upgrade

This brings you to a page to decide on a payment plan. You can opt to pay monthly or annually and decide on a Personal, Business, Commerce Basic, or Commerce Advanced plan. More information on Squarespace plans can be found here.

pricing - Squarespace tutorial

Fill in your personal and payment information to activate a plan and get it running.

save and go on

Once the payment is processed, you’re the proud owner of a live Squarespace website!

8. Activate a domain name

A professional domain name is the next step to making your website official. Luckily, Squarespace offers a domain name buying and transfer tool right in the dashboard.

Find and select the Domain button to get started.

domains

You have a few choices when making a domain name for your website. A built-in Squarespace domain is already provided as a space for you to host your website, test out new designs, and play around with the Squarespace interface without having to pay for anything.

The other options include the Get a Domain button and the option to Use A Domain I Own.

domains

Choose Use A Domain I Own to walk through the process of transferring over a domain from another provider.

When going through the Get a Domain option, you’ll see a list of suggested domains.

joesplants

Select a domain you like and click on the Checkout button.

checkout - Squarespace tutorial

Much like upgrading your website to a paid account, Squarespace asks for payment information and automatically applies the domain name to your active website.

9. Manage design aspects of your Squarespace site

The Design module in Squarespace has a myriad of tools for adjusting colors, sizes, and fonts.

To explore these features, click on the Design tab.

design

What can you expect to find in the Design module?

  • Fonts
  • Colors
  • Animations
  • Spacing
  • Buttons
  • Image blocks
  • Browser icons
  • Lock screens
  • Checkout pages

We recommend clicking on each of these tabs to see what editing options are available.

fonts

For the most part, a design edit renders in the live website preview.

As an example, modifying the default font family immediately swaps out the previous fonts for the new ones.

fonts

All design tools include several settings, allowing you to get to a fairly unique layout.

10. Add an online store to your website

Although not everyone will need an online store, Squarespace offers a store builder tool to incorporate online selling within any style of website.

Some themes are better than others, but in general, it’s possible to add a few products to even the simplest of business themes.

If you’re interested in adding a store, where customers come to your site and purchase products, click on the Commerce tab.

commerce

The store setup process takes four steps. Click the Start button to move forward.

start

The first course of action for a store is to add products for selling.

Select the Add Products For Sale button.

add products for sale - Squarespace tutorial

At some point, Squarespace requests that you choose a store layout. Themes vary but usually offer at least two layouts.

Click on the store layout of your choice.

add store

The majority of store-oriented themes have demo products already included with the design. Therefore, you can use those to either edit for future products or to get an idea of what products should look like on your website.

Otherwise, click the “+” button to add a new product to the catalog.

add

Choose from the following options to specify which type of product you’d like to sell:

  • Physical
  • Digital
  • Service
  • Gift Card

The type of product dictates the product settings available and how those sales get delivered to customers.

what to sell

The next section in our Squarespace tutorial is for the product page itself, showing a wide range of fields for uploading product images, setting the price, and configuring the inventory. Keep scrolling down on the product page to ensure you fill in all the important information.

product details

The very bottom of the product page asks if you’d like to add custom content or extra functionality to the product, such as custom forms or subscription features.

Click Done → Save when you’re satisfied with the design and content of your product page.

save

11. Add a way to get paid with your online store

Click the Add A Way To Get Paid button to incorporate a payment gateway that processes all sales.

add way to get paid - Squarespace tutorial

Squarespace supports several payment gateways, including Stripe, PayPal Business, and Square (for US point of sale transactions).

To move forward with the Squarespace tutorial, click on the one you’d like to use and walk through the steps to link your PayPal, Stripe, or Square account to the website.

payments - Squarespace tutorial

12. Specify shipping requirements

Click on the Choose How To Ship Your Products button.

ship - Squarespace tutorial

Decide shipping rates on this page.

You can choose a flat rate, to ship products based on weight, or to have the carriers calculate pricing for you.

flat rate - Squarespace tutorial

All shipping methods and rates appear under your list of shipping options, along with the regions in which these shipping methods are activated.

flat - Squarespace tutorial

Keep in mind that for most of the Commerce features to work, you must turn on a Business, Commerce Basic, or Commerce Advanced plan.

pricing - Squarespace tutorial

Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:

Layout and presentation by Chris Fitzgerald and Karol K.