Customize parts of your site with code injection

false

Customize parts of your site with code injection

Last updated September 16, 2026 15:55

Use code injection to add custom HTML or scripts to your pages, or disable code that interferes with your site.

You can use code injection to add HTML and scripts to specific parts of your site. To add custom CSS for styles, use the Custom CSS Editor. If you’re having issues with editing your site, you may need to disable code on your site editor.

Note:

Custom code might break your site’s appearance or behavior, especially on mobile devices. Our support team can’t help you add custom code to your site or troubleshoot issues that arise from using it. We recommend these resources for more help:

  1. The Squarespace forum
  2. A Squarespace Expert

Also try: Add custom code to your site and Add custom CSS to your site.

Code injection is available in the Core, Plus, Advanced, and some legacy billing plans. Learn more about choosing the right Squarespace plan.

Checkout pages don’t support code.

Video on adding code injection to a site

This 3-minute video goes over how to add code injection on a site.

Add code to code injection panel

To add custom code to code injection:

  1. Open the Code Injection panel.
  2. Add valid HTML or scripts into the code Injection field. To add JavaScript to a code injection field, surround the code with <script></script> tags.
  3. After adding your code, click Save.

Each field in the Code Injection panel corresponds to a different area of your site. Add your code to the field that matches where you want it to appear:

Code added here is injected into the <head> tag on every page in your site.

The footer area is defined by your site's template and version. Code added here is injected before the closing </body> tag on every page in your site.

Inject code to a specific page

To inject code into a specific page:

  1. Hover over the page in the Pages panel.
  2. Click the gear icon.
  3. Click Advanced.

How does page-specific code injection appear on my site?

Page Header Code Injection adds code to the <head> tag of that page.

In blog page settings, Post Blog Item Code Injection adds code to every blog post.

It can also appear differently depending on your site's version.

  • Version 7.1

  • Version 7.0

  • Avoid adding HTML to Page Header Code Injection. Otherwise, the code disappears if you turn off header's transparency.

  • Post Blog Item Code Injection appears below the post content.

  • Code injection won't appear on Index landing pages.

  • Depending on your template, Post Blog Item Code Injection appears above or below the post content.
  • In templates with the Grid/list Blog Page, the code displays on the blog landing page and not on individual posts.

Add code to the Lock page

Code injected here displays above the lock screen's password field of a password-protected site or page. You can’t inject code to the lock screen during your site's trial period.

You can use the Lock Screen panel to design your lock page without using code.

Add code to the order confirmation and order status pages

Code you enter here runs on the order confirmation or order status page after checkout. Customers will see either the order confirmation page or the order status page depending on the product they buy.

The order confirmation page appears after a customer checks out with:

  • Gift cards
  • Memberships
  • Subscriptions

The order status page appears after a customer checks out with:

  • Physical products
  • Download products
  • Service products

Use these six tags to add customer-specific details. If a purchase splits across multiple fulfillment profiles, details appear for each order.

  • {orderId} – The order number of the confirmed order
  • {orderSubtotal} – The subtotal of the confirmed order
  • {orderSubtotalCents} – The subtotal of the confirmed order, in cents
  • {orderGrandTotal} – The grand total of the confirmed order
  • {orderGrandTotalCents} – The grand total of the confirmed order, in cents
  • {customerEmailAddress} – The customer's email address, as they enter it in the “Your Email” section at checkout

How do I avoid counting the same customer twice with tracking scripts?

Customers can revisit the order status page, which might trigger tracking scripts more than once. To run a script only on the first visit, place it between {.if firstPageView} and {.end} tags.

For example:

{.if firstPageView} Add the tracking scripts you want to run only after checkout here {.end}
  Add scripts you want to run on every visit here

Migrate your order confirmation page custom code

If you have code in the order confirmation field of the Code Injection panel, a banner appears where you can to migrate your code to the order status page. To do this, copy the code from the order confirmation page field and move it to the order status page field in the Code Injection panel.

Can I add code to checkout pages?

No. You can’t add custom code to checkout pages.

How do cookies impact third-party integrated code?

If you add third-party integrations like Google Ads using code injection, that code may add cookies on visitor browsers. If you enable your site's cookie banner, you can use code injection to adjust these integrations based on whether a visitor accepts cookies.

To enable:

  1. Open the Cookies & Visitor Data panel and switch on the toggle beside Cookie banner.
  2. Select the Opt in & out cookie banner type to displays buttons for customers to accept or decline your site’s cookies.
  3. Click Save.
  4. Add the necessary code in the Code Injection panel.

If you added Google Ads using code injection, see our forum post for example code to integrate it with your cookie banner. If you use built-in Google Analytics, don't add code here. Instead, save your measurement ID and enable your cookie banner.

Note: Consent mode is a Google feature. Contact Google Ads if you need help setting up or troubleshooting this feature.

Can I use code injection to add CSS?

Yes, but we recommend using the Custom CSS Editor instead of code injection. If you're adding CSS using code injection, surround the code with <style></style> tags.

On version 7.0, Ajax loading may prevent CSS added to code injection from loading correctly. Add CSS to the CSS Editor instead.

Disable code in the site editor

Custom code can sometimes prevent you from securely editing your site, so we might ask you to disable it while editing your site. It doesn't affect how your site looks to visitors.

This message appears at the bottom of your site if your code is interfering:

We detected an error loading your site preview. This is usually caused by injected code.

Click Disable Scripts in Preview at the bottom of your site. The message changes to “Scripts have been disabled on your site preview”. To view your site with custom code enabled, open your site URL in a private or incognito window.

To disable scripts manually:

  1. Type /safe directly after /config at the end of your secure editing URL, then press Enter.
  2. If this doesn't work, check any areas where you've added custom code to temporarily remove it while troubleshooting.

Re-enable code in the site editor

After disabling your code, a banner appears at the bottom of the site editor saying that your code is disabled. You can re-enable the code by clicking Enable Scripts in Preview.

You can’t hide this message, but it's only visible while you're logged in.

Was this article helpful?

Yes No

1226 out of 2722 found this helpful

Yes No

Customize parts of your site with code injection