6 Ways to Add Code on Squarespace

Squarespace is a special web builder that primarily focuses on visually pleasing elements, e-commerce functionality, and third-party embeds. While there are many tools offered, you may need more than what’s available. Through Squarespace plugins, site owners are able to add features to their sites by using custom codes. We have compiled a list of ways to add code to your Squarespace site.

If you have a code that you want to use on your Squarespace site, there are six ways that you can add it:

1. Header Code Injection

2. Footer Code Injection

3. Page Header Code Injection

4. Custom CSS

5. Code Block

6. Embed Block

1. Header Code Injection

Find this section by going to Settings > Advanced > Code Injection > Header

Then, you may enter code that will be injected into the ‘head’ tag on every page of your site. With this option, you must be well aware that any code entered here will apply to the entire site. This means if something is incompatible with another code, you may run into site issues.

2. Footer Code Injection

Find this section by going to Settings > Advanced > Code Injection > Footer

Then, you may enter code that will be injected into the template-defined footer on every page of your site. With this option, the same warning applies as above, any code entered here will apply to the entire site.

3. Page Header Code Injection

Find this section by going to Page Settings > Advanced > Page Header Code Injection

Here, you may inject custom code or scripts to enhance specific parts of your page. We specifically prefer this method, as it limits the code to one page only. Typically, when installing a plugin, it’s specialty is only needed for one page rather than the entire site.

4. Custom CSS

Find this section by going to Design > Custom CSS

This area will allow you to inject custom CSS rules into your site. If you’re new to coding, adding code with this option will only apply to the style of your site.

5. Code Block

On your page, add a Code Block

A Code Block is used to add custom code to a page. On all plans, Code Blocks support plain text, HTML, Markdown, and CSS code. Adding JavaScript or iframes to Code Blocks is a Premium feature available in Business and Commerce plans.

6. Embed Block

On your page, add an Embed Block

An Embed Block is used to embed third-party tools to a page. However, it works just the same as a Code Block if the code is wrapped in tags. Even better, adding JavaScript to an Embed Block is available in Personal plans.

Overall, adding code to your Squarespace site is totally up to you. These options provide possibilities to customize your site on any plan and minimize compatibility issues. Happy coding!