How to install code on a single page in Squarespace

This information is for both versions of Squarespace, 7.1 and older versions built with 7.

Customizing Squarespace with code is kind of my favorite thing to talk about, if this website didn’t make that obvious 😉 Squarespace makes it super easy to add custom code to your site.

In fact - there are three different ways you can do it, and this tutorial covers the two ways you can add code to a single page in your site.

When do you need to use site wide CSS?

For things you want to change on every page, like adding a custom font, or giving all your buttons a hover effect, or making sure that every time you use a form it matches your brand style, that’s when you need to use the custom CSS file. To access this, click on website and then select website tools. Your first option here will be Custom CSS.

Your custom CSS file will load with every page everytime so you’ll see those customizations no matter what part of your site you are looking at.

Why would you want to add code to just one page?

When you want to change something about just one page, post, product, project, or event, you can use page header code injection or a code block to make sure that code only works on that specific part of your site. A great example is making a landing page in Squarespace. You need to hide the header and footer of that page, but you need the header and footer on the rest of your site!

You said there are two ways - does it matter which one I use?

Absolutely!! I always recommend using page header code injection if you are on a business or commerce plan. The header of your page loads before your content, so if that’s where you tell the browser “display all the images on this page like this” it will load the content with your style. However, on page code blocks are the only way to do single page CSS on a personal plan, and the only way to customize an individual blog post, product, project, or event. This code block will load with everything else so there is a chance that you won’t see your custom code changes for a second or two.

Anything else I need to know?

Yup! Both of these options are places where you can add different types of code, so you have to let the browser know this is a custom CSS code that will change the style by literally labeling it style. I call these nested style brackets but I have no idea if that is the actual lingo 😅 Place your custom code between these style brackets so the browser knows “this is style code” otherwise it will just consider it random text. Here is an example for changing a font color on a single page. The part in bold below is the custom CSS code.

<style> h4 {color: purple} </style>

Ready to give it a try?

Check out this tutorial video to see the step-by-step process you need to take to install your code on a single page, either with page header code injection or a code block.