Free Squarespace Code Snippets

A growing library of Squarespace CSS snippets and JavaScript customizations I actually use on client builds: hide-on-scroll headers, button effects, gallery tweaks, animations, and layout fixes for Squarespace 7.1. Every snippet is free to copy, comes with step-by-step install instructions, and is honestly labeled with the plan it needs.

Last updated: August 2026 · By Abdullah Sajjad, Senior Web Application Engineer

14 free snippets

Copy-paste install steps

By Abdullah Sajjad, Senior Web Application Engineer, Top 3% on Toptal

This is a free library of 14 Squarespace code snippets: CSS and JavaScript customizations for Squarespace 7.1, written and used on real client builds by Abdullah Sajjad, a senior web application engineer and Top 3% Toptal developer.

CSS-only snippets work on any Squarespace plan through the Custom CSS panel (Website, then Website Tools, then Custom CSS). JavaScript snippets require the Business plan or higher, because Squarespace gates code injection behind it. Every snippet is labeled with the plan it needs and includes step-by-step install instructions.

The library covers navigation, buttons, images, animations, and layout utilities, including hide-on-scroll headers, transparent headers, gradient text, image hover zoom, scroll fade-ins, and countdown timers. Everything is free to copy, modify, and ship on personal or client sites, no attribution required.

Navigation & Header

JS: Business Plan+

Hide Header on Scroll

Slides the header out of view while visitors scroll down and brings it back the moment they scroll up.

CSS Only: Any Plan

Transparent Header

Removes the header background and overlays the navigation on your first section, with an optional solid state on scroll.

CSS Only: Any Plan

Announcement Bar Styling

Restyles the default announcement bar with a gradient background, refined typography, and a subtle close button.

Buttons & Text Effects

CSS Only: Any Plan

Button Hover Effects

Three standalone hover styles for Squarespace buttons: a lift with shadow, a color wipe, and a letter spacing expansion.

CSS Only: Any Plan

Gradient Text Headings

Paints H1 and H2 headings with a CSS gradient, with a solid color fallback for browsers that cannot clip backgrounds to text.

JS: Business Plan+

Typewriter Text Effect

Types and deletes a rotating list of words inside a heading, with a blinking caret, in plain vanilla JavaScript.

Images & Galleries

CSS Only: Any Plan

Image Hover Zoom

Applies a smooth scale-on-hover effect to image blocks and gallery items, cropped cleanly inside their frames.

CSS Only: Any Plan

Scrolling Logo Marquee

An infinite scrolling strip of client logos built with HTML and CSS only: seamless loop, faded edges, no JavaScript.

Animations & Effects

JS: Business Plan+

Scroll Fade-In Sections

Fades each page section up into view the first time it enters the viewport, using the IntersectionObserver API.

JS: Business Plan+

Custom Cursor

Replaces the default cursor with a dot and a trailing ring that grows over links, disabled automatically on touch devices.

Layout & Utilities

JS: Business Plan+

Back to Top Button

Injects a floating back to top button that fades in after scrolling and smooth scrolls to the top when clicked.

CSS Only: Any Plan

Custom Scrollbar

A slim, recolored scrollbar that matches your palette, covering WebKit browsers and Firefox with pure CSS.

JS: Business Plan+

Reading Progress Bar

A thin gradient bar fixed to the top of the viewport that fills up as the visitor scrolls down the page.

JS: Business Plan+

Countdown Timer

A date-configurable countdown showing days, hours, minutes, and seconds, in one self-contained code block.

Getting Started

How to Add Custom Code to Squarespace

Squarespace gives you two main channels for custom code, and which one you need depends on whether a snippet is CSS or JavaScript. Every snippet page here tells you which channel to use.

Custom CSS Panel

Works on any Squarespace plan

For CSS-only snippets, open the Custom CSS editor: in the Squarespace dashboard go to Website, then Website Tools, then Custom CSS. On older dashboards the same editor lives under Design, then Custom CSS. Paste the snippet at the bottom of the editor and click Save. Changes preview live, and deleting the snippet undoes them completely.

This panel is available on every plan, including Personal, so most snippets in this library cost you nothing extra.

Code Injection

Requires Business plan or higher

JavaScript snippets go into code injection: go to Website, then Website Tools, then Code Injection, and paste the script into the Footer field. On older dashboards the path is Settings, then Advanced, then Code Injection. Per-page scripts can also go into a page's own Advanced settings.

Squarespace gates code injection, and JavaScript inside code blocks, behind the Business plan or higher. That is a platform rule, not mine, so JS snippets here are clearly labeled.

These snippets come straight out of my day-to-day Squarespace development services, where I build custom widgets, search and filter tools, and full sites on 7.1 for clients worldwide.

FAQ

Squarespace Custom Code Questions

Is it safe to add custom code to a Squarespace site?

Yes, within reason. Custom CSS and code injection are official Squarespace features built for exactly this purpose, and none of the snippets here touch your content or data. The honest caveat: Squarespace support does not troubleshoot custom code, so add one snippet at a time and keep a copy of what you added. If anything ever looks wrong, removing the snippet returns your site to its previous state.

Do I need the Squarespace Business plan to use these snippets?

Only for the JavaScript ones. Pure CSS snippets work on any Squarespace plan through the Custom CSS panel. JavaScript requires code injection or a code block that runs scripts, and Squarespace gates both behind the Business plan or higher. Every snippet on this page is labeled so you know before you click.

Will Squarespace updates break these snippets?

Usually not, but it can happen. These snippets target stable Squarespace 7.1 selectors, and each snippet page includes an honest compatibility note. Squarespace occasionally renames classes or restructures blocks between template versions, so if a snippet stops working after a platform update, check the selector names first. That fixes the large majority of breakages.

Can I use these snippets on client sites or commercial projects?

Yes. Everything in this library is free to copy, modify, and ship on personal or client Squarespace sites, no attribution required. If you get stuck adapting one to a specific template, reach out through the contact page.

Need Something Custom Built?

Snippets cover the common tweaks. When you need a custom widget, a search and filter tool, an API integration, or a full Squarespace site built from your design files, that is what I do for clients every week.

Squarespace Development Services Get in Touch