SQUARESPACE GUIDES

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.

Before we dive into the how, lets’s talk about the what. There are three types of code commonly added to a Squarespace website: HTML, CSS, and Javascript.

  • HTML stands for HyperText Markup Language and it’s the most basic form of code to create content of a website.

  • CSS stands for Cascading Style Sheet. CSS tells a computer browser 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 - sometimes referred to as JS - is the code that tells a computer broswer 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.

Three main ways to add code to Squarespace

Access to these options depends on your Squarespace subscription level

  • Add styles in the Custom CSS panel and they’ll apply everywhere on your site. Super handy for global changes.

  • Basic subscription plans do not have individual page header access; only available on a core plan or higher can use this technique.

    This code runs in the header of an individual page or collection. That means you can add styles or scripts that only affect that one page—without touching the rest of your site.

    Refer to the following section for more info about this technique.

  • Drop snippets of HTML, CSS, or JavaScript right into your content. Since code blocks load with your content, there can be a tiny delay before you see changes kick in. But they’re the only way to add code to a single collection item—like one blog post, event, or product page—because those items don’t have their own header.

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>

Next

Changing One Page with Code