Squarespace ID Finder Chrome Extension simplifies custom styling and coding

More in Plugins, Scripting and Styling

Struggling with Squarespace customization? The Squarespace ID Finder Chrome extension, originally coded by Heather Tovey and now maintained by Will Myers is an essential free tool for Squarespace designers and developers.

This free tool makes it easy to find unique element IDs, simplifying custom CSS or JavaScript applications.

Add Squarespace ID Finder to your toolkit today.

Quick Start Guide

Installing the Squarespace ID Finder Chrome extension

• Go to the Squarespace ID Finder on the Chrome Web Store.

• Click "Add to Chrome" and confirm by selecting "Add extension".

Using the Squarespace ID finder

• Open your Squarespace site and activate the extension by clicking its icon in your Chrome toolbar.

• Hover over your site's elements to see their IDs highlighted.

• Click an element to copy its ID for use in your custom codes.

Watch how to install and use the ID Finder

• Video transcript

  So today we're going to have a look at the Squarespace ID finder, which is a Chrome extension that's very useful if you want to customize your CSS or implement scripts on your Squarespace website. We'll start off with quickly getting it installed. As you can see, I'm on this page on my site, and if you're watching this on YouTube, then I will put the link to this article underneath the video. Within the article, if you go down past the picture, there is a link to the Squarespace ID finder in the Chrome Store, and all you need to do is add it to Chrome. It'll ask you to add the extension, and then what you should do to make it easy to access is, if you see this little jigsaw puzzle piece here, it manages your extensions, and what you can do is pin the ID finder to your browser so now it's here, now it's ready to use.

  So if I go to a Squarespace website like mine and I click on the ID finder, you'll see that it's giving you section IDs, it's giving you block IDs, and these are all things that you need if you want to specifically target elements of your page. So now, I'm going to set up demos and we'll have a look at them.

  Let's look at an example of how the ID finder can be used when writing custom CSS for your Squarespace website. This is one of my client sites, Sophie Cooney, she sells these Kilim stair runners, and there are four different types: the wool runners, raw cotton, and jute; those ones are sold by the meter and they're manufactured to order, and then the last one, unique runners, where it says available stock, these are lengths that they've got pre-made that are ready to sell. So there are two different experiences needed.

  On the left is the ones that are sold by length, and as you see, this is straight out of the box pretty much, except for this measuring stairs link here, but basically, it's telling you what the thing is, you need to choose a length, and you can choose one of it, and then you're ready to purchase. On the right-hand side, this is the customized experience, so you'll see that instead of just having this price here, we have £395 and I've added per meter, and if you look down here, we've got a minimum length of 3 meters. Let's have a look and see how it's put together. Here in the custom CSS, you can see we have a piece of code that goes down to here, and that piece of code is what's controlling what happens on the product collections for the stair runners that need the customization.

  And if you look at these numbers here, these are the three product collections, so it's the wool runners, the raw cotton, and the jute runners, that's what their section ID is, and I found that section ID using the ID finder extension, and it's this one here. So basically, clicked it, copied it, posted it into my code, and that makes my job a lot easier.

  And now, we'll very briefly look at how the same principle applies when you're writing custom JavaScript. So, turn on the Chrome extension, and again, same section IDs we were looking at before. And over on the left-hand side here, you can see my custom code that I've got, and it's the same kind of idea. What it's doing is it's saying if we're on one of these pages, basically a page that has a main section ID of the three relevant product categories, then we need to do some stuff.

  And the first thing we're doing, just to show, is we are setting this input field so that its minimum value is three and its initial value is three, so that basically people can only select three or more meters. So that shows how it happens at a section level, but you know you can use it on a particular item if you go to a page, you can use it on a particular block, so if you want to do something with this text or that headline or you want to do some rollover effects to these images, all of this sort of stuff is very helpful, and rather than delving around in the code, you have it at your fingertips.

  So, I hope this was useful to you. Certainly, I find that using the ID finder speeds up my work. I do a lot of customization and I use it many times every day.

• AI Video Summary

  Introduction to Squarespace ID Finder

  Customizing your Squarespace website with CSS or JavaScript often requires pinpointing specific elements within your site’s structure. The Squarespace ID Finder is a Chrome extension that simplifies this process by identifying section and block IDs with a simple click.

  Installation Guide

  Getting Started:

  To install the Squarespace ID Finder:

  1. Access the Tool: The link to the Squarespace ID Finder is available beneath this video on YouTube and within the accompanying article on our website.

  2. Add to Chrome: Visit the Chrome Store via the link, and add the ID Finder to your Chrome browser.

  3. Pin for Convenience: Use the extensions manager, represented by a jigsaw puzzle icon in Chrome, to pin the ID Finder to your browser toolbar for easy access.

  Utilizing the Extension

  Finding IDs:

  Once installed, navigate to your site and activate the ID Finder:

  1. Click on the pinned ID Finder icon.

  2. Immediately view section and block IDs, crucial for targeting specific page elements.

  Practical Applications

  Custom CSS Example:

  For a more in-depth understanding, let’s consider a real-world scenario. One of my clients, Sophie Cooney, offers unique Kilim stair runners. To enhance the shopping experience:

  1. Identify Product Sections: We used the ID Finder to identify the sections for different runner categories like wool, raw cotton, and jute.

  2. Customize the Buying Experience: With CSS adjustments, we transformed the product pages to include essential information, like pricing per meter and minimum order lengths.

  Leveraging Custom JavaScript

  Enhancing User Input:

  Custom JavaScript can also be applied effectively using the ID Finder:

  1. Set Conditions: We set conditions for the minimum and initial quantity input to ensure customers order the correct amount. 2. Apply to Specific Sections: Using the IDs found with the extension, we targeted the relevant product categories to apply these changes.

  Conclusion

  Whether you're adjusting a single element or overhauling entire sections, the ID Finder provides the IDs you need right at your fingertips. It's a powerful extension that I personally use daily, significantly speeding up the customization process. Try it out for your site, and experience the efficiency of the Squarespace ID Finder.