How to Add Custom Code to a Squarespace Website
There are three ways to add custom code to a Squarespace site: code blocks, the CSS Editor, and code injection. Each serves a different purpose, and knowing which to reach for saves time on every client project.
Select a section to begin.
How to add custom code to Squarespace
Code block
A Squarespace code block is a content block you can use to add HTML, CSS, or JavaScript to a specific location in your page layout, contained to that spot only. In Fluid Engine, code blocks sit on the section grid like any other content block, so you can place them precisely, resize by dragging, or layer them over images and text. It’s the right choice when a script or custom element only needs to run in one place, such as a third-party embed, custom animation, or widget. Learn more about Squarespace code blocks.
CSS Editor
The CSS Editor is where you apply custom CSS across the entire site from one place. Use it for global style changes that go beyond what site styles offer: color overrides, spacing adjustments, and hover states that need to stay consistent across every page. Unlike code blocks, it accepts CSS only (no HTML or JavaScript). Because every rule here applies site-wide, write specific selectors and test carefully to avoid unintended impacts on the site’s usability and aesthetic. Learn more about the CSS Editor.
Code injection
Code injection adds HTML, CSS, Markdown, and JavaScript directly to your site’s <head> or <body> tags, either site-wide or on a per-page basis. Use it for scripts that need to load across every page: analytics tracking, tag managers, or third-party chat widgets. Header injection runs before page content renders, making it the right place for performance-critical scripts. Footer injection runs after content loads, which suits scripts that interact with page elements after they’ve appeared.
Keep CSS in the CSS Editor rather than code injection. It’s more manageable and less likely to create conflicts. As a reminder, code injection is for functionality, not site content. Learn more about using code injection on Squarespace.
Pro tip: Code injection, JavaScript, and iframes in code blocks require a Core plan or higher. Basic and legacy Personal plans support plain text, HTML, Markdown, and CSS in code blocks.
When to use custom code on Squarespace
Custom code may be preferable when a client’s project needs something Squarespace’s built-in tools can’t deliver alone. Here are the most common use cases for professional designers.
Custom interactions
Use CSS and JavaScript to control how site elements respond to visitor interaction. Common examples include horizontal scrolling sections, custom cursor behavior, and scroll progress indicators that show visitors how far down a page they’ve scrolled.
Custom navigations
Squarespace’s native navigation tools cover most use cases, but custom code takes it further. For instance, you can add animated dropdown arrows that rotate when a visitor opens or closes a menu. You can also style dropdown menus with custom backgrounds, borders and shadows, or insert divider lines between dropdown links for cleaner visual hierarchy.
iframe embeds
Squarespace’s embed block handles content from oEmbed-supported services or manually set embed codes. When a service falls outside of that, an iframe is how you bring it in. Add an <iframe> tag to a code block to embed reservation systems, interactive maps, PDF viewers, or any web-based tool directly into a page.
Incorporating third-party tools and widgets
Squarespace supports a library of third-party extensions that cover many common business needs. When a tool falls outside it, custom code is how you bring it into Squarespace. Script-based tools like booking systems, chat widgets, and interactive calculators typically offer a JavaScript snippet you can add via code block or code injection. Check the third-party service’s documentation for specific information, as Squarespace Customer Support may not be able to assist with troubleshooting.
Pro tip: While Squarespace Customer Support may not be able to assist with troubleshooting complex custom code implementations, the Squarespace Help Center is a great reference. The Circle Forum also connects you with designers who’ve likely solved the same problem.
Create bespoke Squarespace sites with custom code
Use custom code to deliver clients Squarespace sites with richer functionality and more brand-aligned aesthetics. Between code blocks, the CSS Editor, and code injection, there’s a solution for whatever the project needs.
For more insights on how Circle partners are using custom code in their client projects, check out these articles:
How Chris Schwartz-Edmisten Uses Code to Push What’s Possible on Squarespace
Creating a Content-First Web Design Approach with Dave Hawkins
Self-Taught Developer Will Myers on Harnessing the Power of Code on Squarespace
For designers ready to pair custom code with AI tools:
This article was published on July 26, 2022. It has since been updated.
Want more?
Join Squarespace Circle, Squarespace’s program for professional designers and web design agencies. Along with exclusive content, discounts, and other perks, Circle brings professionals together from across the globe to exchange advice while connecting with new clients and collaborators.
