3 Amazing FREE Chrome Extensions for Squarespace Designers

Every Squarespace web designer has their own bag of tricks. Over the years I’ve tried out lots of tools to simplify my work and make my life easier. Here are 3 FREE Chrome extensions I use almost every day to speed up my workflow. If you are a web designer or someone who is working on their own website, chances are these will help you too.

1. Squarespace ID Finder for block IDs, section IDs, and collection IDs.

This extension by Heather Tovey lets me quickly see the collection or block-id from the back-end Squarespace code. This is incredibly helpful if I want to target a specific page, section, or block to apply Custom CSS. This is particularly useful for Squarespace 7.1 sites! This plugin saves me having to inspect the code and search for a specific block. I just click the extension, then click on a displayed block to copy the id so I can paste it into my Custom CSS.

 
 

2. WhatFont

My favorite way to see what fonts a website is using. This is super useful when I’m looking for font-pairing inspiration on other sites. I also use this when clients send me their inspiration sites - I find that they often have fonts in common, so I have a good idea of what fonts the client would like on their new website.

 
 

3. Eye Dropper

This does for colors what WhatFont does for fonts. Use the eye dropper tool on any color and get the hex code, rgb code, and hsl code. I use this whenever I see a color I love and want to save it for inspiration. I also use this when I’m too lazy to look at my notes and see what colors I’m using on a site build - this is faster! It saves a default palette for you too.

 
 

» Like this post? Check out my Resources page for more helpful tools.


Previous
Previous

How to Fix Google Search Console and Mobile Usability Issues in Squarespace

Next
Next

How to Add an Icon to an Image Card in Squarespace