How to Add Custom CSS HTML and JS on Squarespace

Last updated on June 23rd, 2020 at 01:51 pm.

Introduction

In this video /post I’m going to show you how to add custom CSS, HTML and Javascript on your Squarespace website.

I will use a sample website for this demonstration.

So if you want to add custom CSS HTML or JS, you need to decide if it’s something that you want to add for all the pages or it’s something you want to add for a specific page.

Watch the full Squarespace Tutorial on a YouTube Playlist.

Add CSS on Squarespace – On All Pages

First of all let’s see how you can add CSS for your entire Squarespace website. If you want to add custom CSS code that will affect multiple pages, the best way to do it is, to use the custom CSS option under the Design settings. You can only add CSS code here. No other code type is supported.

1. Click on Design
2. Then under design, click on Custom CSS.
3. Then add your CSS code.
4. Then save, and once you save, the changes will take effect.

The code added will affect all pages on your website.

If you want to preview the website in your free trial mode, make sure you go to your settings and you change the availability settings.

Under availability settings you’re going to see that you can add a password that you can use to preview your website.

To watch the demonstration of this, play the video embedded above.

Add CSS on individual pages

Let’s see how to add CSS for a single page.

1. Go to your pages.
2. If you want to add CSS on an individual page , what you’ll need to is you’ll need to go into the settings of that page. Click the gear icon (settings)
3. Then come into Advanced settings for that page.
4. Any code that you add here will be injected at the very top of the page. Note that this is HTML code. So to add CSS you must use <style> tags as illustrated below.

<style>
/*Your CSS goes here */
p { margin-bottom: 10px;
   background-color: #000 
}
</style>

Once you add the code, save.

So, that’s how you can add CSS on a specific page.

Code Injection only accepts HTML, but you can add CSS or JavaScript by surrounding the code with the <style> or <script> HTML tags:

<!--Add CSS -->
 <style>
   /*Your CSS code Goes here*/
 </style>

<!--Add JavaScript Code -->
 <script> 
    //Your JS code goes here
 </script>

Add HTML or JS to a Page

If you want to add HTML on any page , you’ll need to go into editing the page. Click to add content. If you want to add HTML content you can use the HTML code block.

Watch the video above if you are unsure of what to do here.

May be you want to embed something or add any HTML code.

If you want to embed Mailchimp, Getresponse, or any Form that you usually get embed code for, you can embed it just like this:

• Get the embed code,
• Then choose the code block and then you can paste in the code.
• Then save .

Let’s say you want to add JavaScript within the page.

Add the HTML code block.

Then add JS using the HTML <script> tags as shown below

<!--Add JavaScript Code -->
 <script> 
    //Your JS code goes here
 </script>

You can also add JavaScript in the advanced settings section of your page or under Code Injection.

To add JS for a single page, you should probably add it under the advanced settings of your page.

To add JS for the entire website, use Code Injection. Code Injection can be found in , Settings > Advanced Settings > Code Injection.

Add Jquery / external Javascript

If you want to add external Javascript you’ll add it via code Injection or the advanced settings of the page.

If you want to add external JS on a specific page, just do it the same way we did it with CSS . However, with JS you’ll need to use the <script> tags.

Got to the advanced settings option of your page and add the jquery code as follows:

//Link to jquery Version can be changed at https://code.jquery.com/
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script>
 //The custom code to use your Jquery goes here
</script>

You Can choose the jquery versions here. (just click on the version you want to use and copy the code)

If you want to add the external JavaScript or jquery on all your pages, Go into Code Injection under Settings >> Advanced.

To add jquery / external JS on all Pages

1. Go to settings
2. And then you are going to go into Advanced
3. Then you’ll go into code injection. Code injection is only available on business and commerce plans .
4. You’ll then choose to add the code under header or footer sections of code injection. Add the JS code as follows

//Link to jquery Version can be changed at https://code.jquery.com/
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script>
 //The custom code to use your Jquery goes here
</script>

So that’s the job of the code injection feature, if you want to add any code that will be on every page, you can use it .