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:
Header Code Injection
Footer Code Injection
Page Header Code Injection
Custom CSS
Code Block
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!