Easy Tech TutsHow to View, Add Code injection in header, footer, order page in Squarespace 2026
By Impran M N
Code Injection is the one place in Squarespace where you can drop raw HTML and JavaScript into your site without touching a single page or block. It is how analytics tags, advertising pixels, chat widgets, and conversion tracking get installed, and it is also the feature most people can't find, because it doesn't sit in an obvious menu.
This guide shows exactly where the panel lives, what belongs in the header box versus the footer box, and how the separate Commerce fields let you fire a script only after someone has actually bought something. It also covers the two things that catch people out: the plan requirement, and the order variables Squarespace hands you for passing purchase data to a third party.
01Log in and open the site you want to edit
Start at squarespace.com and use the Log In link in the top-right corner. If your Squarespace account is tied to a Google profile, Continue with Google is the fastest route — just make sure you pick the right account, since agencies and side projects often end up under a second email.
Once you're through, you land on the dashboard listing every site you own; open the one you're editing so the left-hand admin panel loads. Everything from here happens in that panel, not on the live page preview beside it.
02Search for "code" instead of hunting through menus
Code Injection is buried several levels deep under Settings, and the quickest way in is the magnifying-glass search icon in the admin sidebar. Type "code" and Squarespace surfaces every code-related setting, with Code Injection at the top of the list.
Click it and you get the panel shown here: a short warning that custom code isn't covered by Squarespace's compatibility guarantee, then a HEADER box and, below it, a FOOTER box. Note the small UPGRADE lock badge at the top of the panel — Code Injection is a premium-plan feature, so on a Personal plan you can view the page but not save anything into it.
03Put early-loading scripts in the header box
The header field injects whatever you paste into the <head> tag of every page on your site — Squarespace says as much in the helper text right above the box. That makes it the correct home for anything that has to run before the page paints: analytics libraries, Google Tag Manager, verification meta tags, custom fonts, and SEO tags.
It also accepts plain HTML, which is how the site-wide announcement bar in the example gets built: a single styled div with a line of welcome text, injected once and rendered on every page. Paste the full snippet including its script or style tags, then use SAVE at the top-left of the panel — CANCEL sits right beside it, and it is easy to hit the wrong one.
04Use the footer box for anything that can wait
The footer field injects into the template-defined footer on every page, which means it runs late — after the visible content has already loaded. That is exactly what you want for live chat widgets, retargeting tags, cookie-consent banners, review popups, and any third-party embed that would otherwise slow down first paint.
If a vendor's install instructions say "paste this immediately before the closing body tag," the footer box is the field they mean. When in doubt, start in the footer: a script that loads late still works, while a heavy script in the header makes every page feel slower.
05Add post-purchase scripts on the order confirmation page
Site-wide injection isn't enough for conversion tracking, because you only want the tag to fire once, after a real order. Scroll further down the same Code Injection panel to the Commerce area and you'll find separate fields for the order confirmation page and the ORDER STATUS PAGE.
This is where a Meta Pixel purchase event or a Google Ads conversion tag belongs. Squarespace also exposes order variables you can drop straight into your code — {orderId}, {orderSubtotal} and {orderSubtotalCents}, {orderGrandTotal} and {orderGrandTotalCents}, and {customerEmailAddress} — so the tag can report the actual order number and value rather than a flat event. The Cents variants exist because most ad platforms expect integer minor units, so pick the pair your platform's documentation asks for.
06Test the code before you rely on it
Injected code runs on your live site, and a stray unclosed tag can break a page's layout for every visitor. Save, then load your site in a private window and check both a normal page and, if you added Commerce code, a real test order end to end — the confirmation page only renders after checkout, so it can't be previewed any other way.
Use your browser's developer console to confirm the script actually loaded and threw no errors, and verify in the destination platform (Google Analytics real-time, Meta Events Manager) that the event arrived. Keep a copy of each snippet somewhere outside Squarespace before you edit it, so you can roll back instantly. Squarespace's own warning is worth taking seriously: custom code is outside their support scope, so if something breaks, restoring it is on you.
Frequently asked questions
Is Code Injection available on all Squarespace plans?
No. It's a premium-plan feature — the panel shows an UPGRADE lock on lower plans, so you can open it but not save code until you upgrade.
Where do I add a tracking pixel for the order confirmation page?
Scroll down the Code Injection panel to the Commerce fields, which include a dedicated order confirmation page box and a separate order status page box for post-purchase scripts.
What's the difference between header and footer code injection?
Header code is injected into the <head> tag and loads before the page renders, which suits analytics and SEO tags. Footer code loads after the content, which suits chat widgets, retargeting tags, and anything non-critical.
Can I pass the order total to a third-party service?
Yes. Squarespace exposes variables like {orderId}, {orderGrandTotal}, {orderGrandTotalCents}, and {customerEmailAddress} that you can place inside your confirmation-page code; most ad platforms want the Cents version.
Will custom code break my site?
It can. Squarespace states that compatibility isn't guaranteed with custom code, so test every snippet in a private window, keep a backup of what you paste, and remove anything that misbehaves.
About the author
Impran M N
I've been hooked on technology for as long as I can remember — especially the new tools and AI apps that seem to land every other week. Easy Tech Tuts is where I write up whatever I've just worked out: I do the task in the real product, record the screen, and turn it into the guide I wish I'd found first.
