How to add custom code to Squarespace
Squarespace can do a lot of cool things, but when you want to push past those template limitations, custom code is the best way to make your site unique. You’ve got a few different ways to add code, and this guide will help you figure out the right method for your project.
CSS vs. JavaScript
CSS (Cascading Style Sheets): Changes how your site looks; fonts, colors, spacing, hover effects, all that good stuff. CSS can not break your website because it can’t change the way it works.
JavaScript: Changes how your site acts; things like animations, pop-ups, or third-party tools. Javascript can change the way your website works, so use it with caution!
Pro Tip: You can add CSS and HTML on any Squarespace plan, but JavaScript requires Core or higher.
Adding custom code to individual pages changes based on the page type.
-
Inside the page settings, you’ll find an advanced section where you can add code to the header via Page Header Code Injection.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script>*Available to anyone on the Core plan or higher.
-
Inside the blog settings, you’ll find an advanced section where you can add code to the header via Page Header Code Injection. This will add your custom code to every single post and the post list page.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script>*Available to anyone on the Core plan or higher.
-
Inside the blog post, add a code content block. This content block will only exist on the individual blog post, so it will not change any other page on your site.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script> -
Inside the online store settings, you’ll find an advanced section where you can add code to the header via Page Header Code Injection. This will add your custom code to every single product page and the product list page.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script>*Available to anyone on the Core plan or higher.
-
Inside the additional product details, you can add a code content block. This content block will only exist on the individual product page, so it will not change any other page on your site.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script> -
Inside the event list settings, you’ll find an advanced section where you can add code to the header via Page Header Code Injection. This will add your custom code to every single post and the post list page.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script>*Available to anyone on the Core plan or higher.
-
Inside the individual event page, you can add a code content block. This content block will only exist on the individual event page, so it will not change any other page on your site.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script> -
Inside the portfolio settings, you’ll find an advanced section where you can add code to the header via Page Header Code Injection. This will add your custom code to every single project and the project list page, aka the portfolio.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script>*Available to anyone on the Core plan or higher.
-
Inside an individual project, add a code content block. This content block will only exist on the individual project page, so it will not change any other page on your site.
When adding CSS code here, you’ll need to label it as CSS by placing it between style brackets like this:
<style> css code here </style>When adding javascript code here, you’ll need to label it as javascript by placing it between script brackets like this:
<script> javascript code here </script>