Adding Custom Code to Squarespace
Looking to add custom CSS to your Squarespace website?
Squarespace is a great platform for making stylish websites, but you might want more than its standard features. Adding custom code can help you personalise and improve your site's functionality. You can embed widgets, add custom CSS for distinct designs, or connect third-party tools. Squarespace makes it easy to adjust your site, and really make it your own.
So why add custom code?
Squarespace provides a lot of flexibility with its templates and tools, but custom code allows you to:
Add third-party integrations (like chat widgets or interactive forms).
Enhance your website’s design with CSS.
Track advanced analytics using custom scripts.
Create unique user experiences, such as dynamic elements or custom animations.
Squarespace allows custom code but use it carefully to prevent design issues or slow site performance.
Methods for adding custom code to Squarespace:
1. Use the code injection feature
Squarespace’s Code Injection tool is ideal for adding code site-wide or to specific pages.
1. Go to Site Settings: Navigate to Settings > Advanced > Code Injection.
2. Add Header or Footer Code:
Place custom scripts (e.g., Google Analytics, Meta Tags) in the Header section.
Add footer code for scripts that don’t need to load immediately, such as tracking pixels.
3. Save Your Changes: Click Save and preview your site to ensure the code works as intended.
Pro Tip: Keep your scripts lightweight to maintain your site’s loading speed.
2. Add code blocks to specific pages
If you want custom code on just one page, Code Blocks are your best bet.
1. Edit the page where you want the custom code.
2. Click the ‘+’ button to add a content block, then select Code.
3. Paste your HTML, CSS, or JavaScript into the block.
4. Save and preview to confirm everything looks as expected.
Use Cases:
Embedding forms or maps.
Adding interactive widgets like countdown timers or testimonials.
3. Customise with CSS
To style your site beyond what Squarespace’s built-in tools allow, add custom CSS.
Steps:
1. Go to Design Settings: Navigate to Design > Custom CSS.
2. Enter your custom CSS code in the provided editor.
3. Preview your changes live and save them when you’re satisfied.
Pro Tip: Use the browser’s Inspect tool to find specific element classes to target.
4. Add code to buttons & links
If you need to add custom JavaScript or tracking parameters to links, you can do so with link-specific code.
1. Edit the link or button block.
2. Add custom HTML or JavaScript in the link field, like:
<a href="https://example.com" onclick="yourFunction()">Click Me</a>
3. Save and test the interaction.
Things to keep in mind:
1. Backup your code
Always keep a copy of any custom code you add. Squarespace doesn’t provide a rollback feature for code changes.
2. Check compatibility
Make sure the code you’re adding is compatible with Squarespace. Some third-party scripts may not work correctly.
3. Optimise for performance
Test your site’s speed after adding custom code. Avoid excessive or poorly written code, as it can slow your site down.
4. Mobile responsiveness
Ensure that any custom code works well on both desktop and mobile views.
5. Squarespace plan limitations
Code Injection is only available for Squarespace Business and Commerce plans. If you’re using a Personal plan, consider upgrading to unlock this feature.
Adding custom code to your Squarespace site helps create a one-of-a-kind online presence for your brand or business. You can improve design, connect with other tools, or add new features. It's important to test your changes, optimise for loading speed, and keep backups to prevent losing your work.
