Our ultimate Squarespace time-saving tips
Building a website can feel like a time-consuming process, but with the right tools and strategies, you can build a website with Squarespace more efficiently while maintaining a professional, cohesive design. Whether you’re launching a brand-new site or refining an existing one, these Squarespace tips and hacks will help you work smarter, not harder.
From setting up style guides to leveraging Squarespace features like saved sections and asset folders, these strategies will speed up your workflow and help you create a site that looks polished and professional in less time.
Setup ‘Style Guide’ pages
Before you start designing, take a moment to set up a style guide page in Squarespace. This ensures consistency across your site and helps you quickly reference brand elements like fonts, colours, and button styles.
Setting these styles up first will save time as you design or update your site.
Some elements, such as text or background colours, can be manually changed within the page editor. Still, for the most part, one thing that a newbie to Squarespace might not realise is that, while you can tweak each element as you create, creating your Style themes first ensures you have enough flexibility between each theme’s colour palette. Resulting in the styles of your site being consistent throughout, giving it that professionally designed look.
Within Squarespace, you can choose your fonts (or upload your own brand fonts), designate (up to 5 core colours) from your brand colours and assign them to ‘themes’. This allows you to automatically apply colours to headings, buttons, accordions, background colours, forms and more just by switching the theme.
It’s for this reason that when we design a website, we always begin with pre-built ‘Style Guide’ pages. These pages have each of the core 7.1 elements applied to them, and each page is edited to represent each of the in-built Squarespace colour themes (Lightest 1, Lightest 2, Light 1, Light 2, etc.). Not only does this allow us to ensure that we’ve got a diverse but complementary set of themes to work with. It also acts as a design simulator (also known as a visual workspace or preview hub) for our clients, allowing them to experiment with style settings and see how they affect other areas of their site, especially if they plan on making major design updates.
Once we’ve set the font and colour styles and updated the Style Guide template pages, we’ll export them to view on a Canva Whiteboard to ensure they all come together nicely.
Want these Style Guide templates added to your Squarespace 7.1 site? Click here to get them for $49.
Having a dedicated style guide page allows you to create consistent style throughout your site, making your design process much faster.
Bonus Hack: Use the Color Buddy Extension
Juggling more than five brand colours? Or just want a simpler way to keep your palette consistent across everything—from Canva to email marketing to Google Drive? Enter the Color Buddy Chrome Extension. Add your brand colour codes once, and they’ll be right at your fingertips on any webpage. No more copy-pasting hex codes or second-guessing shades — just seamless, on-brand design wherever you work online.
Squarespace's saved sections for cohesiveness & quickly add main sections across pages (max 20)
Need to add your eMail opt-in offer across multiple pages, but want to keep the same styling? There’s no need to recreate the whole section on each page. Squarespace allows you to save sections so you can reuse them across multiple pages. This is a game-changer for maintaining a cohesive design while saving time on layout and formatting. Once we’ve created a client website, we’ll often save the most important reused sections, such as page headers, team profiles, testimonial sections, pricing tables, newsletter opt-in sections, to their saved library so they’re ready to add in to any page should our client need them.
How to Save & Reuse Sections in Squarespace:
Design a section (be sure to check the mobile version of it too, before saving!).
Hover over the section, click the Heart ♡ icon.
To reuse, simply hover between the two sections you’d like to add it to, and click ‘add section’.
From the left-hand menu in the pop-up, click Saved Sections, and insert the one you need by clicking on it.
Tip for Saved Sections:
You can store up to 20 saved sections, so prioritise frequently used elements like headers, testimonials, and service highlights. If you need more than 20 sections, create a private page (remember to mark it as not enabled, so it doesn’t appear to the public). You can then add your most frequently used sections in there and rotate them through the 20 allowed in the ‘saved section.
Upload assets to library
Doing a major update of products to your Squarespace shop? Just had a new brand photoshoot and ready to get those snaps on your site? There’s no need to upload them one-by-one. Head to the Assets Library to bulk upload. They’ll be there to use when you’re ready to add them to your site.
Bonus Tips: Compress and rename your images before uploading them. Compressing them will help your site load your images faster, and renaming your images not only allows you to add key search terms (for SEO purposes) but can help you find them in the Image Library easier when adding them to a page.
Make life even easier on yourself by organising your content into folders, to help you find content quicker. As your website grows, organising your assets becomes crucial in saving you time and frustration when designing your site.
Add image alt text, page titles & meta descriptions using Squarespace’s SEO AI tool
No idea where to start when it comes to SEO for your Squarespace site? One of the easiest ways to help your content start ranking within Google Searches, is to construct SEO-optimised page titles and meta descriptions for each page, and add alt text to your images.
This can often be an overlooked task for those launching their site, in the excitement of it all, filling in these backend details seems cumbersome, and let’s be honest – boring!
With Squarespace’s new SEO AI tool, they’ve taken some of the hard work out of updating your site’s SEO for you.
Want more SEO tips for Squarespace?
Checkout our SEO resources created specifically for Squarespace websites.
Start with a professionally designed Squarespace template
Want the ultimate time-saving hack? Whether you’re a seasoned Squarespace user, or just starting out, there’s no denying that one of the fastest ways to build a website with Squarespace is to start with a pre-designed Squarespace template. Templates provide:
A professional layout that’s already optimised for user experience.
Built-in responsiveness for mobile and desktop.
Pre-styled typography, colour schemes, and page structures.
Utilising a professionally-designed Squarespace template cuts down design time significantly while ensuring a polished, professional look. Our Squarespace templates are specifically designed for the health and well being industries, with strategic pages that not only help you convey your message, but engage customers in the journey of discovering how to work with you.
Keep image sizes consistent with Canva
Inconsistent image sizes can make your site look unpolished and give it a haphazard feel. To save time and maintain a clean, cohesive aesthetic, create image templates in Canva to ensure uniformity across your site. If you’re working with one of our Squarespace Templates, you’ll already have access to a library of Canva templates specific to your template’s design. If you’re not working with a template however, here are some things to consider:
Determine the key image sizes needed (e.g., hero banner, product image, testimonial image, team profile).
Use Canva to create pre-sized templates that match your website’s design.
Upload your brand images into the templates and download them in high-resolution but optimised file sizes (e.g., under 500 KB for web).
Keep these templates saved so you can quickly update images without resizing from scratch.
When uploading to Squarespace, keep things such as borders, overlays, shape and rounded edges consistent.
Want to learn how to update and add extra design functionality to your Squarespace site’s images?
Upgrade from Squarespace 7.0 to 7.1 tool
If you're still using Squarespace 7.0, upgrading to Squarespace 7.1 is one of the best time-saving moves you can make.
Why Upgrade?
More Flexible Design Options: Sections and layouts are much easier to edit.
Unified Design System: Global styles ensure that changes to colours and fonts apply across the entire site instantly.
Better Performance: 7.1 is optimised for faster load speeds and mobile responsiveness.
In 2023, Squarespace brought out their 7.0 to 7.1 migration tool, that for certain Squarespace 7.0 templates, you can upgrade your site to 7.1 functionality without having to completely recreate the site.
Want to migrate to 7.1, or start fresh with a Squarespace 7.1 site for maximum efficiency? Get in touch with us to see if your site is suitable.
Hot tip: When you migrate to 7.1, the editing ability of your Squarespace website becomes incredibly easy. Why? Squarespace Fluid Engine. Squarespace has levelled-up their editor to now offer you complete control over your site design—with precise block placement, content arrangement and resizing. Allowing you to create custom layouts and even overlap elements to perfect your individualised look. Plus, it’s built for mobile, so your site looks excellent and edits easily on any device.
Install the Squarespace ID finder
Want more styling functionality for your site? Then you’ll likely need to become familiar with some basics of Custom CSS (which we teach you all about in Style School). Once you begin your Custom CSS journey, you’ll find that you may want to apply this custom styling to just certain sections, blocks of text or specific pages. That’s where the Squarespace ID Finder Chrome extension comes in. This tool makes it easier to identify the code ID of particular pages, sections, or elements on your site, allowing you to target them for use in CSS styling.
How to Install & Use:
Install the Squarespace ID Finder Chrome Extension
Open your Squarespace editor.
Click on the Squarespace ID Finder from your Chrome extension bar.
The extension will display the unique block ID for that section.
Click on the block ID, section ID, or collection (page) ID to copy it.
You can then use this ID in Custom CSS to modify styling without affecting other parts of your site.
Remember: you’ll need to add the block/section/collection ID followed by { } brackets and your Custom CSS within those brackets, to apply it to only that ID.
By leveraging these Squarespace features and time-saving hacks, you can create a professional, well-structured website in less time, allowing you to focus on growing your business instead of getting lost in design edits.
Want more tips to build a better website?
Join us inside Style School for step-by-step video tutorials on how to use Squarespace’s inbuilt features, plus access to our exclusive custom CSS snippets that will make your website look like you paid a pro to create it.
Ready to take centre stage on Google and skyrocket your website to the top-spots in search results? Buckle up, and enjoy the ride, with our 5 simple SEO strategies to get your website in the spotlight.