A few weeks back, Squarespace made a ’subtle’ update, which fundamentally changes how we can code CSS and make changes to our sites.
Old way
Prior to the update, which I’m about to show you, everyone had to grab the collection ID, such as
#collection-64fcc068d64d4168438ad380 h2{font-size:3rem}The easiest way to do that was through the excellent Chrome extension ID Finder
The other way for the more technical amongst us was to use Dev Tools. But really, the ID finder is the best tool for this.
I’m about to show you a method that does away with writing these horrible IDs in our code, and it's very easy to do.
New Way
Squarespace is constantly updating its platform and how things work on your site. They have to - if they don’t innovate, they will be left behind by their competitors such as Wix, Weblog and Framer.
A few weeks back, they made an update, and if you found the ID method clumsy (and let's face it, every one of us Squarespace designers does), then there is a new way. When developing our Squarespace coffee site template, we found this way to have a lot of time and headaches, managing the CSS.
You can now add a custom ID to every section on your Squarespace sites. Now, it doesn’t mean you can do anything more, but it does mean your CSS will be cleaner and easier to apply. If you write a lot of custom CSS, then this is a game changer for you.
How do we do it?
Log into your Squarespace site and edit the page you want to change with your own CSS.
Then, hover over the section you want to edit and click “Edit Section”.
If you scroll to the bottom of this panel, you will see a magic box - anchor link! I’m calling it a magic box. This is a game changer if you use a lot of custom CSS.
Here, you can name the anchor anything but make it descriptive.
Let's keep things simple for now and call it home-page-feature
In our CSS, we can now target this section like so
#home-page-feature h2{ font-size:3rem }The hash tag is required at the beginning of the selector in our CSS; this says target the ID.
We can now target ANY element within that section.
This new way is genius compared to what we previously had to do with the long and arduous IDs.
Much cleaner code, easier to manage, and you can now get a better grasp of your CSS on a Squarespace website without those horrible long IDs.