How to add custom code to Squarespace

In this blog, you'll learn various methods to add custom code to your Squarespace website. 

Watch the video

Check out the YouTube video below 👇

The first way to add custom code is by going to Pages → Website Tools → Custom CSS. Here, you can add custom CSS to style your site—like adjusting layouts, customizing fonts, tweaking spacing, and making the design better reflect your brand. With custom CSS, you can basically change almost anything visually on your site, giving you full control over how everything looks.

The second way is by going to Pages → Website Tools → Code Injection. From here, you can insert code into either the header or footer of your site. This is useful when you need to add things like tracking scripts (e.g. Google Analytics or Meta Pixel), third-party integrations, or custom JavaScript that affects your entire site.

The third option is to inject code into an individual page—like the homepage, in my case. To do this, click the Settings icon on the specific page, then go to Advanced. From there, you can add code to the page header, and it will only affect that particular page. This is useful for adding page-specific scripts, custom styling, or functionality that shouldn’t apply to the rest of the site.

The fourth option is to add custom code blocks directly to sections. This is done by entering the editor in Squarespace and selecting the Code Block from the block menu. It’s useful if you want to create something with code directly on the page - such as a unique button, custom third-party code from Elfsight, and more. There are countless ways you can use this block to customize your website.

Your designer

I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.