How to Find Block ID in Squarespace in 2025
Squarespace makes building a website easy. But when it comes to customizing your site with code or styling a specific part of a page, you may need to find something called a block ID. In this post, you’ll learn what a block ID is, why it matters, and how to find it in the simplest way possible.
What is a Block ID in Squarespace?
A block in Squarespace is a part of your page — like a text box, image, button, or form. Each block has a unique ID, called the block ID. This ID helps you apply changes only to that block using custom code like CSS or JavaScript.
For example, let’s say you have two text boxes on a page. If you want to change the font size of only one text box, you’ll need the block ID to do that.
Why Do You Need a Block ID?
Here are some reasons you might need a block ID:
To apply custom CSS code
To add special animations or effects to a specific block
To troubleshoot a design issue
To test things on one section of the page
To change button color, text size, or spacing of one block only (change button color guide)
Knowing the block ID gives you more control over your design.
Step-by-Step: How to Find Block ID in Squarespace
You don’t need to be a developer to do this. Follow these steps:
Step 1: Open Your Website in a Browser
Open your Squarespace site in Google Chrome (or any browser with developer tools).
Step 2: Go to the Page Where the Block Is
Navigate to the page that has the block you want to find the ID for. Make sure you're viewing the live version, not the editor.
Step 3: Right Click on the Block > Click Inspect
Right-click directly on the block (e.g., a text or image block). Click on “Inspect” from the dropdown menu. This opens the developer tools.
Step 4: Look for the Block ID
Now you’ll see some code on the right side or bottom. Look for something like this:
<div data-block-id="123abc456">
Here, 123abc456 is your block ID. Copy it.
Step 5: Use That ID in Your Code
Let’s say you want to change the font size of a text block. You can add custom CSS like this in the Custom CSS area:
[data-block-id="123abc456"] { font-size: 20px; }
Other Ways to Find Block ID
If you don’t want to use the Inspect tool, here is a another way:
Use a Chrome Extension
There are Chrome tools like Squarespace ID finder that can help you find IDs more easily.
Frequently Asked Questions
How do I find my code block on Squarespace?
To find a code block, open your page in edit mode, click the pencil icon on each section until you see the “Code” block. You can also use the browser’s “Inspect” tool to locate the block's HTML by searching for <div> with custom code inside.
What is BlockID?
A BlockID is a unique code automatically assigned to each block in Squarespace, like text, image, or button blocks. It helps target that specific block for design or code customizations, especially when using CSS or JavaScript for styling or functionality changes on a specific part of your page.
How to find image ID on Squarespace?
To find an image ID, open your site in Chrome, right-click the image, then click “Inspect.” Look for a data-block-id or similar attribute in the HTML code. This is the unique image block ID you can use for CSS styling or tracking specific elements on the page.
Final Thoughts
Finding a block ID in Squarespace is simple once you know where to look. Whether you're adjusting fonts, fixing a layout, or adding SEO tweaks, block IDs give you more control. Now that you know how to find them, you can start making more personal and specific changes to your site.
If you're using Squarespace and care about SEO, try using a good SEO plugin for Squarespace. It makes your work easier and helps your site perform better in search engines.
