Squarespace Code Snippets

CSS Snippets for Squarespace

Hide the Site Title

Remove the site title text from the header while keeping the logo: .header-title-text { display: none; }

Add Smooth Scrolling

Enable smooth scroll animation for all anchor links: html { scroll-behavior: smooth; }

Custom Button Hover Effect

Add a lift and shadow effect when visitors hover over buttons: .sqs-block-button-element { transition: all 0.3s ease; } .sqs-block-button-element:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

Full-Width Section Override

Force a section to span the full browser width regardless of template content width: .page-section .content-wrapper { max-width: 100% !important; padding: 0 !important; }

Hide Footer Credit

Remove the "Powered by Squarespace" text from the footer: .footer-block .sqs-block-content p:last-child { display: none; }

Custom Link Underline Animation

Replace default link underlines with an animated bottom border: a { text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.3s ease; } a:hover { border-bottom-color: currentColor; }

All CSS snippets go in Design > Custom CSS. For a complete CSS guide, our article on Squarespace custom CSS covers selectors, properties, and responsive techniques.

JavaScript Snippets for Squarespace

Back-to-Top Button

Add a floating button that scrolls the page to the top when clicked. Paste this in Settings > Advanced > Code Injection > Footer:

<button id="backToTop" style="position:fixed;bottom:30px;right:30px;z-index:999;display:none;padding:12px 16px;border:none;border-radius:50%;cursor:pointer;background:#333;color:#fff;font-size:18px;">↑</button><script>const btn=document.getElementById('backToTop');window.onscroll=()=>{btn.style.display=window.scrollY>300?'block':'none'};btn.onclick=()=>window.scrollTo({top:0,behavior:'smooth'});</script>

Dynamic Copyright Year

Automatically display the current year in your footer copyright text. Add a Code Block in your footer with: <p>© <script>document.write(new Date().getFullYear())</script> Your Company Name. All rights reserved.</p>

External Links Open in New Tab

Automatically add target="_blank" to all external links on your site. Paste in Footer Code Injection: <script>document.querySelectorAll('a').forEach(a=>{if(!a.href.includes(window.location.hostname))a.target='_blank'});</script>

JavaScript snippets go in Code Injection (Footer) for site-wide functionality or in Code Blocks for page-specific features. For script implementation details, our guide to adding custom code to Squarespace covers injection points and best practices.

HTML Snippets for Squarespace

Custom Alert/Notice Box

Add a styled notice box for important announcements. Place in a Code Block: <div style="background:#fff3cd;border-left:4px solid #ffc107;padding:16px 20px;margin:20px 0;border-radius:4px;"><strong>Important:</strong> Your notice text here.</div>

Two-Column Text Layout

Create side-by-side text columns in a Code Block: <div style="display:grid;grid-template-columns:1fr 1fr;gap:30px;"><div>Left column content</div><div>Right column content</div></div>

Styled Blockquote

Add a visually distinct quote section: <blockquote style="border-left:4px solid #333;padding:20px 30px;margin:30px 0;font-style:italic;font-size:1.2em;color:#555;">Your quote text here.<footer style="font-size:0.8em;margin-top:10px;font-style:normal;">- Attribution</footer></blockquote>

HTML snippets go in Code Blocks at the specific position where you want them on the page. For more HTML techniques, our guide to Squarespace custom HTML covers building custom page elements.

Where to Add Each Type of Snippet

CSS snippets → Design > Custom CSS. Available on all plans. Affects every page unless you use section-specific selectors.

JavaScript snippets → Settings > Advanced > Code Injection (Header or Footer). Available on Business plans and above. Runs on every page.

HTML snippets → Code Blocks on individual pages. Available on Business plans and above. Renders at a specific position on one page.

Page-specific scripts → Page Settings > Advanced > Page Header Code Injection. Runs only on that specific page.

How to Customize Snippets for Your Site

Change colors. Replace hex color codes (#333, #fff, #ffc107) with your brand colors. Use your site's exact hex values from the Site Styles panel for consistency.

Adjust sizes. Change pixel values for padding, font-size, margin, and border-radius to match your template's visual style. Inspect your template's existing elements to find the sizes it uses and match them.

Target specific elements. Add section IDs or page-specific classes as parent selectors to limit a snippet's effect to one section or page instead of the entire site. For selector techniques, our guide to adding custom CSS to Squarespace covers finding and using the right selectors.

Code Snippet Best Practices

Test before publishing. Preview your site after adding any snippet. Check both desktop and mobile. Open the browser console to look for JavaScript errors.

Add one snippet at a time. If you add multiple snippets at once and something breaks, you cannot tell which one caused the problem. Add, test, then add the next.

Comment your snippets. Add a comment above each snippet explaining what it does: /* Hide site title - added March 2026 */ or <!-- Back to top button -->. This makes your code manageable over time.

Keep a backup. Copy your Custom CSS and Code Injection contents to a text file periodically. If you accidentally delete something, you can restore it from the backup.

Check for conflicts. Some snippets may conflict with each other or with your template's built-in styles. If a snippet does not work as expected, check the browser console for errors and inspect the element to see if another CSS rule is overriding yours. For design consistency, our Squarespace design tips guide covers visual testing and troubleshooting.

Start Adding Snippets That Make a Difference

Code snippets are the fastest way to customize your Squarespace site beyond what the visual editor offers. A few lines of CSS, a small JavaScript function, or a custom HTML block can add functionality and polish that would otherwise require hiring a developer.

Start with the snippets that solve your most pressing design or functionality problems. Add them one at a time, test thoroughly, and comment your code so you can manage it over time. The best Squarespace sites are built in layers - and snippets are one of the most efficient layers you can add.