The Squarespace ID Finder Chrome extension is probably my most used free Squarespace tool as a Squarespace Website Designer!

Not familiar?

In short it’s a free chrome browser extension made especially for Squarespace users that allows us to find the id for any Squarespace block, section or page. This is a must-know for when you’re making customizations with CSS on your Squarespace website as it allows you to target the code to just one block, section or page & not everywhere (something we commonly need when designing sites).

Without the Squarespace ID finder chrome extension you’ll need to use the inspect tool to look at your site’s code to find the ID… it’s not rocket science, but it’s fiddly and confusing if you’re not used to it. The Squarespace ID Finder Chrome extension makes it super quick n simple, even if you’re allergic to code!

In case it wasn’t clear I absolutely love it (so huge thanks to the creator Heather Tovey for the many many hours she’s saved me with this tool!!)

Oh and although I highly recommend using Chrome when working on Squarespace, the Squarespace ID finder is now available for firefox too!

So now let’s get to how to actually use the thing!

How to Use the Squarespace ID Finder Chrome Extension - the step by step guide

Make sure you’re using google chrome.
Download the chrome extension from the chrome web store (you can either head straight to the web store and search “squarespace id finder” or click this link to go to the squarespace id finder chrome extension directly).
Click the “add to chrome button” to install it.

Add Squarespace ID finder from chrome store

Confirm by clicking “add extension”

You’ll then be able to find it in your chrome browser bar with the rest of your extensions.

Don’t see it? Click on the jigsaw puzzle button and you’ll see a list of all of your chrome extensions - you can then click the pin button to pin it to be visible (trust me, you’re gonna want it to be easily accessible!)

Add and pin squarespace id finder chrome extension

Now we’re going to use the Squarespace ID finder chrome extension to actually find some ids on your Squarespace site

To do this, head to your Squarespace site.
You can look at it via the edit version on Squarespace, or head straight across to your actual site in the wild using any url on your website.
Once you’re on your site, simply click on the icon for the Squarespace ID finder chrome extension & you”ll see a bunch of IDs pop up on your page.

Pro tip - the colour code is super handy - Squarespace Block IDs (those for an individual block like an image, button or text block) are red, section IDs are blue and page/ collection IDs are in yellow. The actual ids also start either with “Collection/ Section or Block” which defs helps too!
Now’s time to copy the ID. Get out a pen and paper… jk!
Simply click on the ID you want to copy & it’ll be saved to your clipboard - wahoo!
Now you have your ID you can go ahead and use it however you want (usually you’ll be using it to direct a specific bit of CSS to one section, or block only on your site, so you’ll be combining your block, section or page ID with a CSS snippet and pasting it into your CSS panel.

Why use the Squarespace ID Finder Chrome Extension?

Save time!
Without the Squarespace ID finder chrome extension you’ll need to open up the inspect tab and manually find the ID for the Squarespace block, section or page - as I said earlier, it’s time consuming, can be confusing & you have much more likelihood of making an error which can be super annoying when you can’t figure out why your code isn’t working!
Target your code
There are some bits of code or styling that you want to apply to your whole site (for example a particular font style), but often you only want to apply a style to one block, section or page only. The Squarespace ID finder allows you to easily find the ID for the thing you’d like to add your code or styling to to make targeting your code easy!
Support a badass female entrepreneur!
I’ve legit never met or spoken to Heather Tovey but I’m an absolute fan girl! Her plugin is awesome, and by using it I get to also show support to an awesome female entrepreneur - what’s not to love!
Pro tip - combine the Squarespace ID finder with these Free Squarespace plugins for a fully customized & very much not DIY looking site 🙂