Squarespace ID Finder: How to Find Block ID in Squarespace & Why It Matters
Ever wished you could tweak a tiny little detail on your Squarespace website? Change the color of one specific button, or make the caption for a specific image a unique font. That kind of magic is totally possible thanks to the Squarespace ID Finder!
This handy Chrome extension helps you pinpoint specific elements on your Squarespace site so you can customize them with custom CSS. This article is about how to use this Chrome extension and why you should. I want to mention InsideTheSquare.co is not affiliated with this Chrome extension or it’s creator; I’m just a really big fan and avid user!
First things first - what is a Squarespace ID?
Before we dive into the ID finder, let's quickly break down what a Squarespace ID is. It's a unique code assigned to different parts of your website. Block ID’s are unique numbers given to individual blocks of content. A data section ID is a unique number given to every page section, and a collection ID is a unique number given to an individual page on your Squarespace website. Pro tip: Global elements (like your site title and mobile menu) don’t have unique ids.
The Squarespace ID Finder is a Chrome extension that reveals these IDs, making it a game-changer for anyone looking to customize their Squarespace site.
Why is the block ID so important to know for your custom code?
The ID acts like a label for the container. When you know the ID of something specific that you want to change on your site, you can tell the computer browser to only make changes to things inside that container. Here’s the tricky part: these block ID’s work best when you combine them with a selector class. Stick with me here; I’ve got an example for you:
Imagine that you want to change the color of a specific button on your website. If you want to change the background color of a specific button using a block id, the whole block gets the new background color! If you use the block id and the selector, you’re telling the computer browser to change the background of the button inside the block.
Without the ID Finder, you might spend hours trying to figure out the right code. But with the ID Finder, you can quickly locate the button's ID, add a few lines of custom CSS, and voila! Your button is transformed.
Before you get started with the Squarespace ID finder, there is some important info you need to keep in mind:
This is a Chrome extension and it isn’t designed to work with other browsers like Safari or Firefox.
Not all elements have unique IDs. Global elements like your site title or mobile menu typically don't.
You can combine IDs and selectors for more specific targeting.
The Squarespace ID Finder is a valuable tool, but it's just the beginning. Understanding Squarespace CSS is essential for making the most of it. If you wanna learn the basics for free, check out my class, available at insidethesquare.co/learn
Ready to unlock the full potential of your Squarespace website? I’ve got a link to the Chrome extension below, but take a minute to check out this tutorial video with a little more information about how to use it.
To be honest, this video a bit outdated because Squarespace recently changed our menu layout! 😅 To add custom code to Squarespace, navigate to pages, then website tools, then custom css. But the rest of this tutorial is pure gold, and i hope you find it helpful.
