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>
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>
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>
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.
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>
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.
