Adding custom code injection to Squarespace

squarespace 101
Written By NL

This post will show the required steps to add custom code injection to your Squarespace website, note that the feature will be available for Business Plan or higher (except for custom CSS)

♯Adding custom css

From admin page, go to Design -> Custom CSS -> Copy and paste the given snippet in the text box

6 STEPS

1. The first step is to open Admin Dashboard and click Website

Step 1 image

2. Scroll and click Website Tools

Step 2 image

3. Click Custom CSS

Step 3 image

4. Place Custom css to the textbox

Step 4 image

5. Once done click Save

Step 5 image

6. That's it. You're done.

Step 6 image

Here's an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/2361835/Squarespace---How-to-add-custom-css-to-website



Next step

♯Adding custom code site-wide

Some time custom css is not enough, you may see I used html tags such as <script> or <style> in the answer, this is called html snippet and need to append to custom code injection
Method 1: From admin page -> Website / Pages / Website Tools (under Not Linked) / Code Injection / Footer,

Method 2: or you can use this Use this freebie tool Admin Quick Access for quickly access the Code Injection panel
There you can see 2 text boxes, header and footer, usually paste the code to end of footer textbox is suggested

Squarespace footer injection

From there you can see the 2 Header and Footer injection boxes.

It is recommended to place the injection code to Footer unless the provider say otherwise

Step-by-step tutorial included

Insert code injection to Squarespace Footer

6 STEPS

1. Access your Admin Dashboard, click Website

Step 1 image

2. Scroll and click Website Tools

Step 2 image

3. Click Code Injection

Step 3 image

4. Scroll to FOOTER and paste the snippet

Step 4 image

5. Click Save

Step 5 image

6. That's it. You're done.

Step 6 image

Here's an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/2361833/Squarespace---How-to-insert-code-to-Site-Footer-Injection



Next step

♯Adding custom code on one page only

Sometimes you just want the affect on 01 page only not the whole site. I suggest you use this method
From admin page -> Pages -> Gear Icon next to the page -> Advanced -> Paste the code in the end of the snippet

Step-by-step tutorial included

6 STEPS

1. The first step is to open Admin Dashboard and click Website

Step 1 image

2. Select the desired Page, Click Gear Icon

Step 2 image

3. Click Advanced

Step 3 image

4. Put the code in PAGE HEADER CODE INJECTION

Step 4 image

5. Click Save

Step 5 image

6. That's it. You're done.
Page Header Code Injection adds code to the <head> tag of that page.

Step 6 image

Here's an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/2361836/Squarespace---How-to-add-custom-to-single-page



Next step

♯Find the block/section id on squarespace

Sometimes custom code need to know specific block on squarespace via it's id, that is when you can use a chrome extension to allow inspect the name of the block

1. Install chrome extension Squarespace ID Finder
2. Open the page, click on the extension icon to get the correct id

NL

am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, such as:

- Connect Google Spreadsheet dataset to Squarespace Google Maps or Datatables

- Implement SVG, CSS animations

- Inject custom code to display currency conversion based on geolocation

- Edit squarespace template file in Developer mode

--- To Space And Beyond! ---

Previous

Compensate the lack of lightbox zoom function
Next

Tapfiliate and Squarespace Scheduling (Acuity) integration