Nine Must-Have Free Chrome Extensions for Squarespace Designers
Table of Contents Show
Here are nine of the best Chrome extensions for Squarespace web designers - that also happen to be totally FREE! Whoop Whoop. They’re not in any particular order… well, they’re in the order that they appear in my Extension tab I guess, which is to say, no particular order 😆
There are two extensions in here that I recommend paying for *eventually* if you find them valuable, but even those have free options that are great when you’re just starting out.
01. Loom
Record quick, shareable video tutorials or walkthroughs to provide easy-to-use help for your clients.
I use Loom ALL THE TIME. It’s especially helpful for recording quick tutorials when a client has a tactical ‘how do I…?’ question, but I also use it extensively for longer trainings, for asynchronous Squarespace website audits, and tutorials on blog posts.
Client Communication: You can record personalized video messages to explain design concepts, provide feedback, or offer guidance. It’s a lot quicker than written emails back and forth, and easier for visual learners.
Design Walkthroughs: Instead of long emails or chats, you can walk your clients through website changes, features, or edits with screen recordings that visually illustrate your points.
Welcome Videos: Need a quick Welcome video for your website, digital products, or courses? Use Loom! Record a brief video welcoming your new clients or customers, and let them know what to expect.
Tutorials and Training: Loom is super useful for recording tutorials on how to maintain or update specific website sections, or find specific things that have moved (looking at you, Squarespace). Your clients can reference these videos to manage their own sites post-launch.
Loom has a robust free program if you’re just getting started, where you can record up to 5 minutes of video and have up to 25 videos. Their next tier is $12.50/month, when paid annually.
02. ColorZilla
A helpful eyedropper and color picker that lets you color sample from any webpage. It also lets you store a history of recently used colors.
You can see below how it works:
Click the color you want with your mouse, and it collects the color sample in RGB and Hex code for you to use.
When you select a color point sample on your screen, the rgb and hex code will appear, and it’ll automatically copy the hex code for you.
03. What Font
Another everyday-er. What Font Chrome extension is a lifesaver for quickly identifying fonts used on any website. It also tells you the color, size and weight of any particular font.
This is especially helpful when clients send over inspiration sites. I use this as a starting point to find similar fonts or font families.
WhatFont Chrome Extension: You can see what font, style, weight, color, size and line height this font is.
04. Color Buddy
Color Buddy is a handy Chrome extension that web designers love. I personally use it every day, and it has made my life SO MUCH EASIER. All the heart eye emojis to this extension 😍
It helps you manage your color palettes by letting you create custom profiles for different brands. You can save palettes, set up rules for each brand, and keep your favorite color combinations handy, making it super helpful if you work with multiple clients.
You can quickly switch between HEX, RGB, and CMYK formats for easy color code copying. Color Buddy simplifies finding those color codes you always access, and you can have multiple color palettes to choose from.
Color Buddy Chrome Extension - you can see some of the palettes I have here! You can also pin your brand, and view accessibility color contrasts in this extension.
05. GoFullPage
This extension is worth its weight in gold coin chocolates, I tell you what.
Squarespace designers swear by this extension. You can take full page screenshots of webpages, and use those to share with your clients, or use in your own marketing materials. One of my favorite things about the Go Full Page extension is this:
You’re able to to screenshots of Squarespace sites that aren’t even live yet!
you may be thinking, what is this sorcery??
Well I’ll tell ya how you can do it too!
Set your client’s site to private and set a password.
Open a browser where you’re NOT logged into Squarespace
Paste the URL, and remove everything after .com. For example, if the site isn’t published yet, you’ll have either the nonsense words and letters that Squarespace gives you, like: amethsyt-rhino-45454k.squarespace.com or if you’ve set up it’s own internal domain, paste that. It could look like: jpk-design-co.squarespace.com. You’ll want to remove the /config and anything after it.
You’ll see the locked page. Enter the password you just set.
Bam. You’re in! Now you can navigate around the site and take full page screenshots.
Since I don’t wireframe in Figma first, I love this for envisioning how the page looks all together while I’m designing.
You can see here how I mock up client sites and sample sites using the GoFullPage Extension:
06. Keywords Everywhere
A truly helpful SEO keyword research tool that provides SEO data directly within your Chrome browser. Keywords Everywhere is a freemium chrome extension.
Here’s an example of how the extension works:
Say you’re helping a client with SEO keyword research for ‘yoga websites Portland Oregon’. Keywords Everywhere will pop up on the right-hand of your Chrome browser. You’ll see information like:
SEO difficulty
Related keywords
Volume
Cost Per Click (CPC)
Trend
And more
this lovely chunky pink arrow shows where your Keywords Everywhere results pop up on a Google search.
Which gives you information on keywords that might work for you or your client.
The free version includes the following features:
Prompt Templates: 200+ optimized prompt templates to help you get the most out of ChatGPT, Gemini and Claude
Instagram Hashtag Generator: Generate the most popular hashtags for Instagram (no volume data).
Instagram Widgets: View Engagement metrics for Instagram Influencers
Pinterest Metrics: Pin Data, Search Insights, Trend Chat & Related Trends (no volume data).
Twitter Widgets: View Engagement metrics for Twitter Accounts
YouTube Summary Generator using ChatGPT, Gemini and Claude
The paid version includes everything in the free version and:
Search Volume for 20+ websites: Provides accurate monthly search volume, CPC, competition, and 12-month trend data.
Traffic Metrics: Estimates monthly traffic and shows the top 10,000 keywords for any URL or domain.
Moz Link Metrics: Displays Moz Domain Authority, DA Trend, Spam Score, total referring domains, backlinks, and more.
SEO Metrics: Offers SEO Difficulty, On-Page Difficulty, Off-Page Difficulty, Brand Queries, and other metrics.
YouTube Metrics: Shows search insights, SERP metrics, video insights, and YouTube tags.
Trend Charts: Provides historical volume data in trend charts dating back to 2004.
Import Keywords: Allows importing keywords to get monthly search volume, CPC, and competition data.
Bulk Trends Data: Retrieves historical volume data using the Bulk Trends feature.
Keyword Widgets: Displays related keywords, People Also Search For (PASF) keywords, and long-tail keywords.
On-Page Analysis: Analyzes any URL to find keywords in the page content and their keyword density.
Competitor Gap Analysis: Identifies keywords competitors rank for that you don't.
Multiple Google Properties: Works with Search, Search Console, Analytics, Keyword Planner, and Trends.
Multiple eCommerce Websites: Includes Amazon, eBay, and Etsy.
Multiple Search Engines: Covers YouTube, Bing, and DuckDuckGo.
They recently removed their most helpful free plan, so while there IS a free plan, I recommend splurging for their Bronze plan - it’s only $2.25/month or $27/year and offers everything most web designers need for SEO.
07. Confetti Cannon
OK! This is my favorite extension, bar none. 🥰
I used to use it for my corporate event clients. Now, I use it with my web design clients.
Here’s how I use it:
On our live launch call, once we get the site live and I’m sharing my screen, I hit the ‘Confetti Canon’ extension. Together, we have a mini Confetti Party Celebration to add a little fun to the launch! I just love this so much.
Here’s a little video (made in Loom!) to show you what it looks like:
It’s just so goofy and fun 😆 I love it!
08. Squarespace ID Finder
A favorite extension for building sites in Squarespace.
Quickly find Squarespace IDs with this extension. If you use any CSS when designing your clients’ sites, this extension is a must-have. You can identify & target a block, section or page and copy the code in just one click. Perfect for simplifying the customization of specific sections in Squarespace.
In this site I made for Rache’s Standout Squarespace* challenge a few months ago, you can see the different collection, section and block identifiers you can target in CSS using the Squarespace ID Finder.
09. Mobile Simulator Responsive Testing Tool
So that’s a mouthful. haha.
This tool lets you preview your site across multiple device sizes to ensure a great mobile or tablet experience.
Here’s a quick overview:
52 Devices for Testing: Choose from recent and older models, including Android phones (like Galaxy S22), iPhones (up to iPhone 15), tablets, and special devices like Apple Watch and MacBook.
Key Features:
Screencast in GIF: Easily create GIF screencasts.
Screenshots: Take transparent PNG screenshots of mobile screens for use in presentations, emails, or mockups.
Night Mode: Enable night mode to view mobile screens with a dark theme.
Premium Version: Some devices and features are exclusive to the paid version, which also removes ads.
simulate what your clients’ websites look like on mobile, and choose from both Apple and Android smartphones.
I use all of these at least every week, and most I use multiple times a day. If you’re a Chrome Browser user (and haven’t gone over the ARC side yet….) and a Squarespace designer, these free Chrome extensions can make your processes easier and your workflow more productive.
