Squarespace Custom Code Library

These are snippets from our own library, the ones we reach for on most builds. All tested on Squarespace 7.1. Where a snippet goes matters, so each one says. A quick primer first.

Where code goes

Design, then Custom CSS. For all CSS. Loads with the site stylesheet, applies everywhere, editable by anyone with design access. Use this for styling.

Settings, then Developer Tools, then Code Injection. Header for scripts that must run early (analytics, fonts, structured data), footer for everything else. Core plan and above. Not for CSS, though it works; CSS here loads later and flashes.

Page settings, then Advanced, then Page Header Code Injection. Per-page scripts and schema.

Code block on a page. For embeds and page-specific HTML.

Two rules. Keep a copy of everything in a file outside Squarespace; the CSS panel has no history. And comment every snippet with what it does and which page it was for, because in eight months nobody will remember.

1. Liquid glass effect

A frosted, refractive panel with a highlight edge, the look Apple made current. Works on any block or section; here it's applied to a section's content wrapper over an image background.

/* Liquid glass panel — apply to a section via its data-section-id */
section[data-section-id="YOUR_SECTION_ID"] .content-wrapper {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px rgba(0, 0, 0, 0.18);
  padding: 3rem;
}

/* Subtle moving highlight; respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  section[data-section-id="YOUR_SECTION_ID"] .content-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0.22) 50%,
      rgba(255,255,255,0) 70%);
    background-size: 250% 100%;
    animation: glass-sheen 9s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes glass-sheen {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0 0; }
  }
}

Find the section ID by right-clicking the section, inspecting, and copying data-section-id. Needs position: relative on the wrapper for the sheen; Squarespace usually sets it. Keep text inside at high contrast; glass over a busy photo fails WCAG fast.

2. The fade-in fix (Core Web Vitals)

Squarespace's site-wide animations hold content at opacity zero until a script runs, which delays Largest Contentful Paint. Turn animations off in Site Styles, and if the classes persist, force them visible:

/* Neutralise pre-animation classes so LCP registers on first paint */
.preFade, .preSlide, .preScale, .preClip, .preFlex,
.preFade.fadeIn, .preSlide.slideIn, .preScale.scaleIn, .preClip.clipIn {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}

We've written up why this matters and what it does to scores in a separate post.

3. Transparent header that becomes solid on scroll

/* Header starts transparent, gains background after scrolling */
#header { transition: background-color .3s ease; }
body:not(.header--menu-open) #header.shrink,
#header.scrolled { background-color: rgba(255,255,255,0.96) !important; }

<!-- Footer code injection -->
<script>
(function () {
  var h = document.getElementById('header');
  if (!h) return;
  function onScroll() { h.classList.toggle('scrolled', window.scrollY > 40); }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
</script>

Set the header to transparent in Site Styles first; this only adds the solid state.

4. Buttons with a proper hover

Squarespace's default hover is opacity. Better:

.sqs-block-button-element,
.sqs-button-element--primary {
  transition: transform .15s ease, box-shadow .15s ease;
}
.sqs-block-button-element:hover,
.sqs-button-element--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  opacity: 1;
}
.sqs-block-button-element:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

The focus rule matters. Don't ship a site without visible focus.

5. Tighter section padding on mobile

Fluid Engine sections carry desktop padding onto phones, which leaves a lot of empty scroll.

@media (max-width: 767px) {
  .page-section .content-wrapper {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

6. Underlined links in body text only

Squarespace styles links site-wide; you usually want underlines in paragraphs and not on buttons or nav.

.sqs-block-html p a,
.sqs-block-html li a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

7. Hide the header on one page (landing pages)

/* Replace with the page's body class, found in the page's <body> tag */
body.landing-page-slug #header,
body.landing-page-slug #footer-sections { display: none; }

Squarespace adds a body class matching the page slug on 7.1 for many templates; if not, use per-page header injection to add one:

<script>document.body.classList.add('landing-page-slug');</script>

8. Self-hosted font via @font-face

Upload the font files under Design, then Custom CSS, then Manage Custom Files, copy the URL, and:

@font-face {
  font-family: "YourFont";
  src: url("https://static1.squarespace.com/static/.../YourFont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
h1, h2, h3 { font-family: "YourFont", Georgia, serif; }

Check the licence allows web embedding. Squarespace's built-in Google and Adobe fonts are licensed for you; a font you upload is your responsibility.

9. Back-to-top button

<!-- Footer code injection -->
<a href="#" id="to-top" aria-label="Back to top">↑</a>
<script>
(function () {
  var b = document.getElementById('to-top');
  window.addEventListener('scroll', function () {
    b.classList.toggle('show', window.scrollY > 600);
  }, { passive: true });
  b.addEventListener('click', function (e) {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
  });
})();
</script>

#to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 999;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: #111; color: #fff; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#to-top.show { opacity: 1; pointer-events: auto; }

10. Open external links in a new tab, with rel

Squarespace lets you set this per link. For every external link at once:

<script>
document.querySelectorAll('a[href^="http"]:not([href*="' + location.hostname + '"])')
  .forEach(function (a) { a.target = '_blank'; a.rel = 'noopener'; });
</script>

Footer injection. Skip this if your site is bilingual on subdomains, or the switcher will open a new tab.

11. Announcement bar that stays closed

Squarespace's announcement bar reappears on every page. This remembers the close for a week.

<script>
(function () {
  var KEY = 'ab-closed', bar = document.querySelector('.sqs-announcement-bar');
  if (!bar) return;
  try {
    if (Date.now() - (+localStorage.getItem(KEY) || 0) < 7*24*3600*1000) { bar.style.display = 'none'; return; }
    bar.querySelector('.sqs-announcement-bar-close').addEventListener('click', function () {
      localStorage.setItem(KEY, Date.now());
    });
  } catch (e) {}
})();
</script>

12. Equal-height cards in a Fluid Engine grid

Fluid Engine blocks don't stretch to match siblings. When you've built cards from image and text blocks in a row, give them a shared minimum height rather than fighting the grid:

section[data-section-id="YOUR_SECTION_ID"] .sqs-block-html {
  min-height: 220px;
}

Crude, and better than mismatched cards.

The accessibility toolbar

We built a small toolbar for clients who want visitor controls: text size, high contrast, reduced motion, wider letter spacing, and a reading guide. It's a single script in footer injection, styled to the site, with no vendor branding and no claims. It does not make a site compliant and no widget does; the compliance work is contrast, alt text, headings, focus and forms, which we've written about. It's available to clients on a build or support plan; ask and we'll add it.

Three things not to do

Don't paste CSS you don't understand into a live site without testing it on the mobile view first; Fluid Engine mobile layouts are where !important rules do the most damage.

Don't load jQuery. Squarespace used to include it and no longer does on 7.1; if a snippet from 2018 needs $, rewrite it or find a newer one.

Don't put twelve scripts in the header. Move everything that doesn't need to run before render to the footer, and remove what you can't explain. Every script in the header costs you Core Web Vitals, and Squarespace's own bundle already costs enough.

Questions we get

Which plan do I need for these? Custom CSS works on every plan. Code injection (the JavaScript snippets) needs Core or above.

Why did a snippet stop working after a Squarespace update? Squarespace occasionally changes class names or markup. Most snippets here target stable selectors, but nothing is guaranteed. Keep a copy of your code, and check the site after platform updates; it's on our monthly maintenance list.

Can I use these on 7.0? Some. Class names differ between 7.0 templates and 7.1. The fade-in fix and the font snippet work broadly; the header and section snippets are 7.1-specific.

Where do I find a section's ID? Right-click the section in the live site, choose Inspect, and look for data-section-id on the <section> element. Or use a browser extension that shows Squarespace IDs.

Is there a risk in pasting code? CSS can only affect the look. JavaScript in injection runs on your site with full access to the page, so only paste scripts you understand or trust the source of. Never paste a script someone emailed you.

Do you write custom snippets on request? For clients on a build or support plan, yes. Most requests are an hour or two.