How to Find a Block ID in Squarespace (Easy Guide)

If you’re working with custom CSS in Squarespace, you’ll often need to target specific blocks, sections, or collections using their Block IDs. However, finding these IDs manually through the browser’s developer tools can be a hassle.

The good news? There’s a Chrome extension that makes this process effortless. In this guide, I’ll show you how to find a Block ID in Squarespace using the Squarespace ID Finder extension by Will Meyers.

Watch the video

Check out the YouTube video below. 👇🏼

Step 1: Install the Squarespace ID Finder Extension

Instead of using Chrome Developer Tools to dig through the site’s code, the Squarespace ID Finder Chrome extension makes the process much easier.

How to Install It

1. Open "Squarespace ID Finder" by Will Meyers by clicking this link.

2. Click "Add to Chrome" and install the extension.

3. Once installed, the extension icon will appear in your browser toolbar.

This extension allows you to quickly view Block, Section, and Collection IDs without inspecting code manually. I’m not an affiliate. It’s just an awesome tool that I use all of the time!

Step 2: How to Find a Block ID in Squarespace

Once you’ve installed the extension, here’s how to use it:

1. Open your Squarespace website in Google Chrome.

2. Click on the Squarespace ID Finder extension icon in the toolbar.

3. The extension will highlight collections, sections, and blocks on the page.

4. Click on any block you need to target. The Block ID will be copied automatically.

💡 Example: If you want to hide a text block with CSS, simply click on the text block to get its ID.

Step 3: Using Block IDs in Custom CSS

Once you have the Block ID, you can use it in Squarespace’s Custom CSS section.

How to Apply CSS to a Specific Block

1. Go to Website > Pages > Website Tools > Custom CSS in Squarespace.

2. Paste the Block ID and add your custom CSS.

For example, to hide a specific text block, use:

#block-id {
display: none;
}

Replace “block-id” with the block ID that you copy from the extension, and this CSS will make the targeted block disappear from the page.

Step 4: Hiding Entire Sections with CSS

The extension also lets you copy Section IDs if you want to apply CSS to an entire section.

Example: Hiding a Section

1. Click the extension and find the section you want to hide.

2. Copy the Section ID.

3. Paste the ID into Custom CSS and apply the following:
   
   #section-id {

   display: none;

   }

   Replace “section-id” with the section ID that you copy from the extension, and this CSS will make the targeted section disappear from the page.

Step 5: Toggling Block IDs On and Off

Once you’ve copied your block or section ID, simply click the extension again to turn off the highlights and return to normal view.

Final Thoughts

Using the Squarespace ID Finder Chrome extension is the easiest way to locate Block, Section, and Collection IDs without using developer tools. Whether you’re applying custom CSS, hiding blocks, or styling specific elements, this tool will save you time and frustration.

If you found this guide helpful, be sure to subscribe to my newsletter for more Squarespace tips and tricks. And if you’d rather have an expert handle your Squarespace design, feel free to reach out—I’d love to help!

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.