Intermediate
How to add custom code injection on Squarespace
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.
Prerequisites
- Active Squarespace website
- Basic HTML/CSS knowledge
- Business plan or higher (for some advanced features)
- Admin access to your Squarespace site
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.
Tip
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.Tip
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>Tip
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.
Tip
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.
Tip
Clear your browser cache if you don't see changes immediately, as Squarespace may cache some elements.
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.
Ready to get started with Squarespace?
Put this tutorial into practice. Visit Squarespace and follow the steps above.
Visit Squarespace →