Squarespace Custom CSS vs Code Injection: Where Each One Goes

Two things to know before you paste anything. Squarespace's support team can't help you add custom code or fix problems it causes, and Squarespace warns that custom code can break how your site looks or behaves, especially on mobile. And checkout pages don't support code at all, whichever panel you use.

Custom CSS or code injection: which one you need

	Custom CSS	Code injection
What it's for	Styling fonts, colors and backgrounds	Adding HTML and scripts to specific parts of the site
Where it applies	Site-wide styles	Header, footer, single pages, blog posts, the lock page and order pages
Extra tools	Custom Files for uploading images and fonts	Order tags and a first-visit condition for tracking scripts
Can it hold the other?	No	Yes, CSS wrapped in style tags, though Squarespace recommends the CSS editor

Squarespace's line on CSS is stricter than most people expect. It says other CSS changes could harm your site, and it keeps a Custom code FAQ listing what you should and shouldn't change. If you want to restyle layout or hide sections, that's the warning to read first.

Adding code in the Custom CSS panel

1. Open the Custom CSS panel.
2. If you want more room, click Open in New Window. The window closes if you navigate away from the panel.
3. Add your code.
4. Click Save to publish your changes.

If the editor flags a syntax error, don't assume it's wrong just because a CSS validator passed it. Squarespace's checker is a parser that tests what will work across browsers, and it flags any line it thinks won't behave as intended. Check the formatting and look for anything missing.

On a version 7.0 site, custom CSS doesn't transfer when you switch templates. If you switch back to the earlier template, the CSS you added there is still waiting for you.

Uploading images and fonts for your CSS

The CSS editor has a Custom Files area for assets your code refers to (in version 7.0 the button is called Manage Custom Files). It accepts .jpg, .png, .gif, .webp, .ttf, .otf and .woff files. Write your code up to the point where you need the file's address, leave the cursor there and click the file, and the editor pastes its direct URL for you. For fonts, Squarespace suggests its font upload tool instead. If the upload area won't open, allow pop-ups in your browser.

There's one housekeeping job people forget. A file's URL is saved as secure or insecure depending on whether SSL is on, so if you change your SSL setting, open the file and change the URL to start with https.

Where code injection puts your code

Open the Code Injection panel and paste valid HTML or scripts into the field that matches where you want them. JavaScript needs to sit inside script tags. The Header field injects code into the <head> tag on every page. The Footer field injects it before the closing </body> tag on every page, and where that footer sits depends on your template and version.

For a single page, hover over it in the Pages panel, open its settings and click Advanced. Page Header Code Injection adds code to that page's <head>. In blog settings, Post Blog Item Code Injection adds code to every blog post. On version 7.1 it appears below the post content and won't appear on Index landing pages. Squarespace also says to avoid HTML in Page Header Code Injection on 7.1, because it disappears if you turn off the header's transparency.

The lock page and the pages after checkout

Code injected into the Lock page appears above the password field of a password-protected site or page. You can't add it during your site's trial, and the Lock Screen panel lets you design that page without code.

Checkout itself is off limits, but the pages after it aren't. Customers who buy gift cards, memberships or subscriptions see the order confirmation page. Customers who buy physical, download or service products see the order status page. Squarespace gives you six tags to pull in order details, such as the order number, subtotal, grand total and the customer's email address.

The order status page can be revisited, which means a tracking script can fire twice for one sale. To run a script only on the first visit, wrap it in the firstPageView condition Squarespace documents. If you still have code in the old order confirmation field, a banner offers to help you move it to the order status page.

Cookies, Google tags and the cookie banner

Third-party integrations added through code injection, such as Google Ads, may set cookies in visitors' browsers. If you turn on the cookie banner and choose the Opt in and out type, you can adjust those integrations depending on whether a visitor accepts. If you use Squarespace's built-in Google Analytics, don't add its code here. Save your measurement ID and enable the cookie banner instead. Consent mode itself is a Google feature, so Google Ads is the place to ask about it.

When your code breaks the editor

If injected code stops the editor loading, you'll see a message saying Squarespace detected an error loading your site preview. Click Disable Scripts in Preview at the bottom of the site. It doesn't change what visitors see, and you can view the live site with your code by opening it in a private or incognito window. If that button doesn't appear, type /safe straight after /config at the end of your editing URL and press Enter. When you're done, click Enable Scripts in Preview. The banner can't be hidden, but only you see it while logged in.

Keep going with Squarespace Domain Transfer.

My verdict on Squarespace custom code

I'd use custom CSS for small style tweaks to fonts, colors and backgrounds that the built-in options can't reach, and code injection for tracking scripts and third-party tools. I'd skip both if you're not comfortable fixing things yourself, because Squarespace support won't help. If it's only a font you're after, try my guide to how to change fonts in Squarespace first, and if you're hitting these limits often, read my take on Squarespace or WordPress.

Tracking scripts are where a lot of reporting automation starts, and setting that up end to end is part of what I do. I run AI training and workshops for teams, and help businesses with AI enablement and workflow automation, so the busywork runs itself and people get time back. Most of that work is with SaaS marketing teams and small businesses. Here's how we can work together.

Frequently asked questions

Can I add custom code to Squarespace checkout pages?

No. Checkout pages don't support code, so you can't add custom code to them.

Which Squarespace plans include code injection?

Code injection is available on the Core, Plus and Advanced plans and some legacy billing plans.

Will my custom CSS carry over if I switch Squarespace templates?

On a version 7.0 site, no. Custom CSS doesn't transfer when you switch templates, but if you switch back, the CSS you added is still there.

Why does Squarespace flag my CSS when a validator says it's fine?

The CSS editor's checker is a parser that tests what will work in different browsers, so it flags any line it thinks may not work as intended.

Does disabling scripts in preview change my live site?

No. It only affects the editor preview and doesn't change how your site looks to visitors.