Three Ways to Add Custom Code to Squarespace
Squarespace custom code works through three separate channels, each with a different scope and purpose. Code Injection affects your entire site globally. Code Blocks let you place code inside specific pages or sections. Custom CSS gives you design-level control over every visual element. Understanding the difference is the foundation of everything that follows.
Method 1: Squarespace Code Injection
Code Injection is the most powerful method for adding global scripts to your Squarespace site. You will find it under Settings > Advanced > Code Injection. It gives you four injection points: Header, Footer, Lock Page, and Order Confirmation Page.
The Header injection field loads code inside the <head> tag on every page of your site. This is where you paste Google Analytics tracking codes, Facebook Pixel scripts, Google Tag Manager snippets, and any other tool that needs to fire site-wide before the page renders. Most third-party analytics and ad platforms will direct you here.
The Footer injection field loads code just before the closing </body> tag. This is the better location for scripts that do not need to block page rendering - things like chat widgets, heatmap tools, and non-critical JavaScript. Loading scripts in the footer keeps your site faster and improves Core Web Vitals scores, which matters for Squarespace SEO.
The Order Confirmation Page injection is specifically for e-commerce conversion tracking. If you are running Google Ads or Meta ads and need to fire a purchase event when a customer completes checkout, this is where that code goes. It only fires on confirmed orders, making it ideal for accurate conversion attribution.
Method 2: Squarespace Code Blocks
Code Blocks give you page-level and section-level control. Rather than injecting code globally, you add a Code Block as a content block inside the Squarespace editor - just like you would add an image or a text block.
To add a Squarespace Code Block, open any page in the editor, click the plus icon to add a new block, scroll to "More" and select "Code." A text editor will appear where you can write or paste HTML, JavaScript, or embed code. Unlike Code Injection, Code Blocks render inline within your page layout, so they are the right choice for things like embedded forms, custom widgets, interactive calculators, or any third-party embed that needs to appear in a specific location on the page.
One important caveat: Squarespace Code Blocks display code as rendered HTML in Preview mode, but some JavaScript may not execute in the editor. Always check the live published page to confirm your code is working as intended. For deeper control over how individual pages look and feel, see our guide to how to customize your Squarespace website.
Method 3: Squarespace Custom CSS
Custom CSS is for visual customization. It lives under Design > Custom CSS and applies to your entire site. This is where you go when Squarespace's style editor does not give you the precise control you need - adjusting font sizes, changing button border-radius, hiding specific elements, or overriding default spacing.
Custom CSS in Squarespace follows standard CSS syntax. You target elements by their class names, IDs, or element types, then write declarations as you normally would. Squarespace provides a built-in CSS editor with a live preview panel, so you can see your changes in real time before saving.
A few practical tips: use the browser inspector to find the exact class names Squarespace assigns to elements, since they are not always intuitive. Prefix your selectors with a parent class when possible to avoid unintentionally affecting elements across the whole site. And if you are removing or hiding elements, use display: none rather than deleting them - it is easier to reverse. Our full guide to adding custom CSS to Squarespace covers advanced techniques in detail.
Which Method Should You Use?
The right tool depends on what you are trying to do. Use Code Injection for anything that needs to be present on every page - analytics, tag managers, advertising pixels, and global scripts. Use Code Blocks when the code needs to appear in a specific location within a page's content layout. Use Custom CSS when you want to change how something looks without touching its structure or function.
In practice, most Squarespace customization projects use all three. You might inject Google Tag Manager in the header, drop an embedded form via a Code Block on your contact page, and use Custom CSS to fine-tune the form's appearance to match your brand. Understanding the layered nature of these tools is what separates a well-built Squarespace site from one that fights itself. For a broader look at what is possible, our Squarespace design tips guide covers the full customization picture.
Squarespace Code Injection: Plan Requirements
It is worth noting that Code Injection is available on Business, Commerce, and higher Squarespace plans. Personal plan users do not have access to Code Injection or Custom CSS. If you are on a Personal plan and find yourself needing these features, upgrading to Business is the most straightforward path. Code Blocks, however, are available on all plans.
Common Squarespace Custom Code Use Cases
To make this concrete, here are the most common reasons Squarespace users add custom code and the method each one requires.
Google Analytics 4 goes in Header Code Injection - paste your GA4 measurement script directly into the Header field. Google Tag Manager also goes in the Header, with its secondary noscript snippet in the Footer field. Facebook Pixel and TikTok Pixel scripts both belong in the Header. Live chat widgets like Intercom or Tidio can go in the Footer since they do not need to block rendering. Calendly embeds and other booking tools are best placed via Code Blocks on the specific pages where scheduling should appear. Font overrides, button style changes, and spacing tweaks all belong in Custom CSS.
Tips for Managing Custom Code Safely
Always back up your existing code before making changes. Copy the contents of each injection field into a text file before editing. If something breaks after adding new code, you will want to know exactly what was there before. This is especially important in the Header injection field, where a single syntax error in one script can prevent other scripts from loading.
Keep your Code Injection fields organized. Add comments using HTML comment syntax - <!-- Google Analytics --> before each script - so you know what each block does when you return to it months later. Remove scripts for tools you no longer use. Unused scripts still load on every page and slow your site down without providing any value.
Test on mobile after every change. Custom CSS in particular can look perfect on desktop and break layouts on smaller screens. Squarespace's live preview does not always reflect how mobile will render, so always check the published page on an actual device.
Frequently Asked Questions
How do I add custom code to Squarespace?
Where is Code Injection in Squarespace?
What is the difference between Squarespace header and footer code injection?
Can I add JavaScript to Squarespace?
How do I add custom CSS to Squarespace?
What Squarespace plan do I need for custom code?
Why is my Squarespace custom code not working?
Conclusion: Custom Code Is Your Squarespace Superpower
Most Squarespace users never look past the visual editor. That means the moment you learn to use Code Injection, Code Blocks, and Custom CSS, you have access to a layer of capability that most of your competitors are leaving untouched. You can connect any analytics platform, embed any third-party tool, and override any design constraint the default editor imposes.
The tools are already built into your dashboard. All it takes is knowing which one to use and where to put the code. Start with one script, test it on the live site, and build from there. The gap between a standard Squarespace site and one that is truly dialed in almost always comes down to a few well-placed lines of code.
* Read the rest of the post and open up an offer