How to edit code on Squarespace

Knowing and having the ability to edit your Squarespace website, beyond what is provided, is a valuable asset. Not only can you provide the client much more custom website but it allows you to adjust even the little things on any website with ease. Squarespace already has a host of great features that allows any one client website to stand apart. But, adding and adjusting CSS and HTML elevates the website to another level.

Having a sense of how to code is essential, but depending on what you’re looking to do and target, we can learn quite easily. Going forward below I will assume you have a good idea on development.

First is knowing how to target code. For this example I will be using Firefox as my browser.

1. Login and open the Squarespace website you would love to edit

2. Navigate to Design → Custom CSS

Here is one area where you can edit and upload custom CSS to your website. They’re a few ways of adding custom code to Squarespace and this is one avenue.

3. Right click and navigate to Inspect Element (Q) on your website

4. Now you can click on the code in the box and it will highlight what element that is.

We want to target that specific id or class and it’s corresponding element. For example, h1.

Tip: any id that starts will “yui_” will change on page refresh. Do not use.

For this example I will find the block id and then target the h1

#block-yui_3_17_2_1_1595466780268_15835 h1

5. I will paste that code into my custom CSS panel and test it by adding a red border.

Tip: To see what you’re targeting, temporarily use a red border: border: 1px solid red;

That’s it! Now I know I’m targeting the correct element. I can take away that border and plug in the necessary code.