Knapsack Creative Co.

View Original

How to Upgrade Your Website to Squarespace 7.1

First, let’s cover the basics of Squarespace 7.1

Before we dive in, let’s make sure our bases are covered. Squarespace 7.1 came out in 2020 with a focus on making website building and editing an even smoother experience. Since it’s launch, Squarespace has continued to roll out new and awesome feature updates in 7.1. Unsure of what version your site is on? Here’s how to check.

If you’re curious about some of the feature updates, here’s a few resources:

You may want to consider upgrading if:

  • You’re already considering the next version of your site

  • You’d like to access Squarespace’s newest features

  • The mobile version of your site needs an upgrade

  • You’d like to take your site’s design to the next level

  • You’re tired of index pages (aren’t we all!)

Before you get started

There’s a few things you should be aware of before you begin:

  1. The upgrade tool is still in beta
    We’ll teach you how to use Squarespace’s migration tool, which is currently in beta, meaning their team is still developing it. It’s not perfect and there are a few kinks.

  2. This is a permanent change
    Once you hit publish, you cannot revert back to the previous version of your site.

  3. The interface and editor will change, other parts of your site will not

    When you click publish, you will notice the interface will be different along with the editing experience in the Pages tab. Here’s what stays the same:

  • Your site’s structure and pages

  • Information like analytics, orders, sales, customer data, and members

  • Your domain and subscriptions

Okay now, let’s dive in!

Step 1. Prep your site

We’ve learned the hard way how important this step is. Preparing your site for the upgrade ensures you don’t loose content or styling, and helps the process go smoother.

Here are the steps we recommend taking:

  1. Create a simple under construction page
    This will be used after you click publish when you add the finishing touches. You cannot add new pages in Preview mode, so it’s nice to have this ready beforehand.

  2. Duplicate your site to have as backup (if possible)
    If your site is more than 300 pages, Squarespace does not allow you to duplicate it. Try deleting unused pages to get your page count down, then duplicate.

  3. If you can’t duplicate your site, reference live site and/or take screenshots
    We like to have the live site up (which will remain the 7.0 version until you click “publish”) to cross-reference design/styling. If you’d like to go an extra step, you can also take a few screenshots of priority pages to have as backup.

Step 2. Upgrade to 7.1

Now it’s time to click upgrade! This can be scary, but the nice thing is you will be in Preview mode until you publish. In other words, the site’s 7.0 version remains live and you can make styling and layout updates before publishing.

Here’s how to upgrade:

  1. In your site on the menu, click on Website > Design > Update to Version 7.1

  2. Click Get Started, then Preview in 7.1

At this stage, I like to make as many updates to the design and styling as I can. Here’s what I would suggest doing at this point:

  • Update the color palette in Site Styles
    Usually the color have changed to grayscale and need updating, so you’ll need to reference your previous site’s color palette and update accordingly. This is done under Website > Site Styles. There’s several options and themes in 7.1 so this step may take some trial and error. Here’s a video from Squarespace to help.

  • Update the fonts in Site Styles
    Similarly, since there are more font options, you usually need to go in a tweak the fonts. This is also done under Website > Site Styles. Reference your backup site or live domain to match the fonts.

  • Clean up design of specific pages
    Most of the page’s design should translate well, however, we’ve found that some content like image blocks often need some extra design attention. It’s good to go through your priority pages to make sure the content’s design looks up to par.

  • Address missing content
    I would recommend going through each page to see if any content appears missing. The most common instance is a gallery page, which does not exist in 7.1. Use your backup or live site to track down this content and add it into the site, if possible. Otherwise, you’ll have to wait until publishing.

  • Tweak formatting as needed (optional)
    I find that the upgrade adjusts the spacing throughout the site, so I like to adjust the site-wide spacing (under Site Styles > Accessories) to match the previous site as well as individual section spacing.

  • Make note of plugins or CSS'
    If your site was using any custom code or third-party plugins, make note of what is working or not working. CSS cannot be edited in Preview Mode, but it’s good to reference and make a plan for after publishing.

Before you hit publish, need a hand? ✋

Alright, it’s just about time to hit publish! Before you do, if any of the above steps felt daunting, it may be worth getting outside assistance. You may want professional help if:

  • Your site uses third-party plugins

  • Your site uses custom code (CSS)

  • You site requires a lot of rework for content or design

  • You don’t have time

  • You’re out of your wheelhouse and feel stressed

We’re here to help

If you’re stuck, we can upgrade your site for you. Set up a meeting with us below and let’s chat!

Step 3: Publish your new site

At this point your site should be almost to the finish line. The styling and pages should look pretty similar to the previous version. Here are the steps to publish:

  1. Click publish
    When you’re ready, click “Publish” in the top right.

  2. Put a cover page up (optional)

    When we’re working on client sites, we like to put the under construction page up while we ensure the site is ready to go. To do this, find your cover page you created in the Not Linked section, click the gear icon, scroll down, and click “set as homepage”.

  3. Address CSS and missing content
    If you needed to adjust CSS, now is the time to do so. Additionally, if you weren’t able to populate missing content in Preview mode, you can do so now.

  4. Make any finishing touches
    I recommend going through each page to make sure everything is looking good

  5. Remove cover page
    When you’re ready, find your homepage, click on the gear icon, and click “set as homepage” to remove your cover page.

You did it! Your site is now in 7.1. High five 🖐️

Here’s a few helpful training resources for 7.1


We’re here to help!

Our team of designers have upgraded dozens of 7.0 sites using this tool, so if you’re stuck, we’ve got your back! Reach out to us below to discuss your site.