How to add custom css, html and javascript to squarespace

I recently wrote an article on Coveloping to help out users struggling to get custom CSS and HTML for a pricing table into a squarespace site. I've documented the steps below for anyone else looking to achieve this for other code including HTML, CSS and Javascript.

How custom code is added to Squarespace

As a quick introduction, here are the options for adding different types of code to a Squarespace site:

HTML

HTML is added in squarespace using 'Code Blocks', which are added to pages. We'll look at how to achieve this with step by step instructions in the next section.

CSS

Squarespace provides a 'Custom CSS' block that can be used to provide site-wide styling to your theme.

Javascript

Javascript can be added site-wide, or to specific pages. Under advanced in the settings section you can inject javascript code into the header or footer, there are also some specific areas for the lock out page, and the order confirmation page if you are using this on your site. 

To inject code on a per page basis, you can add it specifically to a head tag for an individual page.

Step-by-step adding custom code to squarespace

In this section we'll look at adding custom css, html and javascript with step-by-step instructions. To get started, login to your squarespace account and load up the edit screen for the site you want to add custom code to.

Add custom CSS to Squarespace

If you're in the editing section you should a menu like the following, choose 'DESIGN' from the menu.

Next select 'Custom CSS' in the design sub-menu:

Paste in the custom CSS code and click 'SAVE'. This CSS will now be available site-wide for any of your pages to use.

Add custom HTML to Squarespace

There's a few different ways to add HTML to Squarespace so it depends on where you want to put it, and if you want it to be repeated on all pages. 

Add custom HTML code to a page

To add custom code to a page, start by selecting the 'PAGES' section from the main menu. From here, choose the page you wish to add the custom HTML to, select the section you wish to add it to and then click the 'EDIT' tab.

If you now hover over the content area you'll see some small droplets appearing, clicking one of these will allow you to add a content block to the page. 

On the content block option, select code to add in some HTML.

On the next screen simply paste in your code and click save.

Add custom Javascript to Squarespace

Adding custom code to all pages

To add some custom code to all pages (either in the header or footer), go to the 'SETTINGS' section from the main menu. At the bottom you'll see an option 'ADVANCED' and then on the next screen is the option for 'Code Injection'. Here you will find a block where you can copy in code that will be output to the header or footer tags. 

Note the 'header' section isn't the correct place to put HTML as it will reside inside the header tag of your source code, not the body, whereas this would be a good place for your javascript.

Adding custom code to a specific page

To add custom code to a specific page, go to 'PAGES', hover over the page you wish to add custom code to, and click on the 'COG' icon. On the new window, select the 'Advanced' tab. Here you can copy in and save your custom code that will be added to the 'header' tag in your source code.

Sign Up

NEXT: Build an HTML5 responsive contact form

In this tutorial we'll be using the latest HTML5 form attributes with modern CSS responsive techniques to create a flexible, cross-platform contact form.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.