How to Easily Find Section IDs in Squarespace

If you’ve ever tried to customize a specific section of your Squarespace website using CSS, you’ve probably run into this question: “How do I find the section ID?”

In this quick tutorial, I’ll walk you through the easiest and most efficient way to locate section IDs using a free Chrome extension. Whether you're styling a background, hiding elements, or adding custom spacing, this trick will save you time—and frustration.

Watch the video

Check out the YouTube video below. 👇🏼

Why You Need a Section ID in Squarespace

When applying CSS in Squarespace, section IDs act like labels that tell your custom code exactly where to go. Without the correct ID, your styles may not apply—or worse, they might affect the wrong part of your site.

The Manual Way (And Why It's a Pain)

You can use Chrome’s inspect tool to search through the HTML and locate the section ID manually. But let’s be honest—that’s a slow and sometimes confusing process.

The Fast and Easy Way: Use the Squarespace ID Finder

There’s a Chrome extension that makes this incredibly simple. It’s called Squarespace ID Finder, created by Will Myers. I’ve used his plugins for years, and they’ve always worked flawlessly.

Here’s how to get started:

1. Open the Chrome Web Store
   Search for “Squarespace ID Finder by Will Myers.”

2. Install the Extension
   Click “Add to Chrome” (mine says “Remove” because it’s already installed).

3. Open Your Website in Chrome
   Go to the page where you want to find the section ID.

4. Click the Extension
   You’ll see a list of block IDs, collection IDs, and section IDs.

5. Click to Copy
   Click on the section ID you need—it automatically copies to your clipboard.

6. Paste into Squarespace Custom CSS
   Go to Design > Custom CSS and paste the ID. Then add your CSS targeting that section.

Example:

section[data-section-id="672e5a8b0cbbed5cd9d0ecc3"]

{ background-color: #f4f4f4;
padding-top: 60px; }

Wrapping Up

Finding section IDs in Squarespace doesn’t have to be a hassle. This free Chrome extension simplifies the process, so you can focus more on the design and less on digging through code.

Want more Squarespace tips like this one? Plug in your info below to join my mailing list.

Need help styling your site or adding advanced customizations? Get in touch with me here—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.