How and Where to Add Custom Code in Squarespace (CSS, HTML, and JavaScript)

Squarespace provides 6 places where custom CSS, HTML, and or JS can be added to your site, including page header code injection, site header code injection, site footer code injection, code blocks, custom CSS editor, and embed blocks.


Before reading this article, it’s important to know that instructions for adding code to each of these places may differ slightly, especially if you are adding code from a third-party plugin. If you are adding code from a third-party plugin, please follow the instructions specifically provided to you.

1. Page Header Code Injection

Page Header Code Injection allows you to add JS and CSS code snippets to a single page without affecting any other page on your site. Code that is placed here will always be executed before code added in the footer.

You can access this by navigating to Website > Page Settings (gear icon that appears on each page) > Advanced > Page Header Code Injection.

  • CSS Snippets

If you want to paste CSS code directly here, you will need to wrap the plain CSS in surrounding “style” tags as follows (if it is not already wrapped in the appropriate tags):

<style> … </style>

  • CSS Files

If you are looking to add external or internal CSS files from third-party plugins or other libraries, you would need to use a “link” tag, which is used for adding custom CSS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<link rel="stylesheet" href="{THE NAME OF YOUR CSS FILE GOES HERE}">

  • JS Snippets

If you want to paste a JavaScript (JS) code snippet here, you will need to wrap the plain JS code in surrounding “script” tags as follows (if it is not already wrapped in the appropriate tags):

<script> … </script>

  • JS Files

If you are looking to add external or internal JS files from third-party plugins or other libraries, you would generally use a “script” tag, which is used for adding custom JS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<script src="{THE NAME OF YOUR JS FILE GOES HERE}"></script>

You can add custom CSS and JavaScript code to your Squarespace site using page header code injection.

2. Site Header Code Injection

Code Header Injection allows you to add JavaScript (JS) and CSS code snippets to the header of every page on your site. Code that is placed here will always be executed before code added in the footer.

You can access this by navigating to Settings > Developer Tools > Code Injection > Header or Website > Website Tools > Code Injection.

  • CSS Snippets

If you want to paste CSS code directly here, you will need to wrap the plain CSS in surrounding “style” tags as follows (if it is not already wrapped in the appropriate tags):

<style> … </style>

  • CSS Files

If you are looking to add external or internal CSS files from third-party plugins or other libraries, you would need to use a “link” tag, which is used for adding custom CSS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<link rel="stylesheet" href="{THE NAME OF YOUR CSS FILE GOES HERE}">

  • JS Snippets

If you want to paste a JavaScript (JS) code snippet here, you will need to wrap the plain JS code in surrounding “script” tags as follows (if it is not already wrapped in the appropriate tags):

<script> … </script>

  • JS Files

If you are looking to add external or internal JS files from third-party plugins or other libraries, you would need to use a “script” tag, which is used for adding custom JS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<script src="{THE NAME OF YOUR JS FILE GOES HERE}"></script>

You can add JavaScript and CSS code snippets in your Squarespace website header.



3. Site Footer Code Injection

Code Footer Injection allows you to add JavaScript (JS) and CSS snippets to the footer of every page on your site. Code that is placed here will always be executed after the page has loaded.

You can access this by navigating to Settings > Developer Tools > Code Injection > Header or Website > Website Tools > Code Injection.

  • CSS Snippets

If you want to paste CSS code directly here, you will need to wrap the plain CSS in surrounding “style” tags as follows (if it is not already wrapped in the appropriate tags):

<style> … </style>

  • CSS Files

If you are looking to add external or internal CSS files from third-party plugins or other libraries, you would need to use a “link” tag, which is used for adding custom CSS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<link rel="stylesheet" href="{THE NAME OF YOUR CSS FILE GOES HERE}">

  • JS Snippets

If you want to paste a JavaScript (JS) code snippet here, you will need to wrap the plain JS code in surrounding “script” tags as follows (if it is not already wrapped in the appropriate tags):

<script> … </script>

  • JS Files

If you are looking to add external or internal JS files from third-party plugins or other libraries, you would generally use a “script” tag, which is used for adding custom JS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<script src="{THE NAME OF YOUR JS FILE GOES HERE}"></script>

You can add custom CSS and JS code snippets in your Squarespace site's footer code injection.



4. Custom CSS

Custom CSS allows you to add various styling rules that will apply to every page of your site. As the name suggests, only CSS code is allowed here.

You can access this by navigating to Website > Website Tools > Custom CSS.

Unlike in the header and footer code injections, you do not need to wrap the plain CSS in surrounding “style” tags here.

You can add custom CSS to your Squarespace site using using the Custom CSS section in Squarespace.

5. Code Blocks

Code blocks allow you to add HTML, CSS styles, and JS scripts to your page. Similarly to the Page header code injection covered earlier in this article, code added here will only affect the current page it is on - it will not affect the entire site like code placed in the site header or footer would.

To Use a code block, you will need to add it to your page via the blue “+” button that shows up within page sections. Then, you can paste your HTML, CSS, or JS code here. If the “Display Source Code” option is toggled to “off”, the code will be rendered as HTML. If the “Display Source Code” option is toggled to “on”, the code will be displayed as formatted plain text (this option is generally for web designers or developers who want to provide a code snippet that readers can easily copy and paste).

  • CSS Snippets

If you want to paste CSS code directly here, you will need to wrap the plain CSS in surrounding “style” tags as follows (if it is not already wrapped in the appropriate tags):

<style> … </style>

  • CSS Files

If you are looking to add external or internal CSS files from third-party plugins, you would need to use a “link” tag, which is used for adding custom CSS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<link rel="stylesheet" href="{THE NAME OF YOUR CSS FILE GOES HERE}">

  • JS Snippets

If you want to paste a JavaScript (JS) code snippet here, you will need to wrap the plain JS code in surrounding “script” tags as follows (if it is not already wrapped in the appropriate tags):

<script> … </script>

  • JS Files

If you are looking to add external or internal JS files from third-party plugins, you would generally use a “script” tag, which is used for adding custom JS files to websites. It will look something like the following format, except the placeholders will contain your unique file data:

<script src="{THE NAME OF YOUR JS FILE GOES HERE}"></script>

You can add HTML and CSS to your Squarespace site using a code block.

6. Embed Blocks

Embed blocks are used to add external content to your site, including links to tweets, Facebook posts, Spotify playlists or songs, and much more.

To Use an embed block, you will need to add it to your page via the blue “+” button that shows up within page sections. There are 2 ways to add embed codes: 1. Using the third-party oEmbed-formatted URL, or 2. Pasting the embed data directly by clicking on the icon in the URL input field “</>”. Most third-party services will have a way to copy both options so that you can easily paste them on your Squarespace site.

For example, apple music has a “Share” option for songs and albums that lets you copy the embed codes that you can paste onto your Squarespace site.

An embed block in Squarespace
Apple music's embed link
Caroline Smith

Caroline Smith is a solopreneur and front-end web developer with 5+ years of experience in web development.

https://launchhubstudio.com
Previous
Previous

How to Find Squarespace Page Section IDs in Any Browser (Chrome, Safari, Firefox, and more)

Next
Next

The 4 Features That Make an Exceptional Squarespace Mobile Menu