S Squarespace

How to add custom code injection on Squarespace

intermediate 8 min read Updated 2026-03-18
Quick Answer

Custom code injection in Squarespace allows you to add HTML, CSS, or JavaScript to your site through Settings > Advanced > Code Injection. You can inject code site-wide in headers/footers or on specific pages for tracking, styling, or functionality enhancements.

Try Squarespace Full Squarespace Review

Prerequisites

  • Active Squarespace website
  • Basic HTML/CSS knowledge
  • Business plan or higher (for some advanced features)
  • Admin access to your Squarespace site

Step-by-Step Instructions

1

Access your Squarespace admin panel

Log into your Squarespace account and navigate to your website dashboard. Click on the site you want to edit to enter the admin interface.
Make sure you have admin privileges for the site you're trying to modify.
2

Navigate to Code Injection settings

In the left sidebar, click Settings, then select Advanced from the dropdown menu. Click on Code Injection to access the code injection interface.
3

Choose injection location

You'll see three main sections: Header, Footer, and Order Confirmation Page. The Header section loads code in the <head> tag, Footer loads before the closing </body> tag, and Order Confirmation is for e-commerce tracking.
Use Header for CSS styles and meta tags, Footer for JavaScript that doesn't need to load immediately.
4

Add your custom code

Click in the appropriate text box and paste or type your custom code. For CSS, wrap it in <style> tags. For JavaScript, use <script> tags. For example:
<style>
.custom-class {
  color: #ff6b6b;
}
</style>
Always test your code on a staging site first to avoid breaking your live website.
5

Save your changes

After adding your code, click Save at the top of the Code Injection page. Your custom code will now be applied site-wide to all pages.
6

Add page-specific code (optional)

To add code to specific pages, go to Pages in the main menu, click the gear icon next to a page, select Advanced, then Page Header Code Injection. Add your page-specific code here and click Save.
Page-specific code overrides site-wide code, so use this for targeted customizations.
7

Test and verify your code

Visit your website in a new browser tab or incognito mode to see your changes. Use browser developer tools (F12) to inspect the page source and verify your code is loading correctly in the intended location.
Clear your browser cache if you don't see changes immediately, as Squarespace may cache some elements.

Common Issues & Troubleshooting

Code injection option is not available

Code injection requires a paid Squarespace plan. Upgrade from the Personal plan to Business or higher to access this feature. Some advanced code injection features may require Commerce plans.

Custom CSS or JavaScript not working

Ensure your code is properly wrapped in <style> or <script> tags. Check for syntax errors and verify the code works in a separate HTML file first. Use browser developer tools to check for console errors.

Code appears as text on the website

This usually means the code wasn't properly wrapped in HTML tags. Make sure CSS is within <style></style> tags and JavaScript is within <script></script> tags.

Changes not visible after saving

Clear your browser cache and try viewing in an incognito/private browsing window. Squarespace may take a few minutes to propagate changes. Also check that you saved the changes and didn't just close the code injection panel.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Squarespace website before purchasing.
Visit Squarespace View Squarespace Pricing