Squarespace script & style resources

Straight out of the box you can achieve a lot while building a great Squarespace website. But there are often code  plugins, style tweaks or bits of additional functionality that you can't implement without donning your overalls and messing around under the hood. 

This page pulls together common, useful Squarespace plugins and customisations that don't require a lot of effort to implement on your site.

Current articles

Featured
How to embed an Iframe on Squarespace
How to embed an Iframe on Squarespace

How to embed Iframes on Squarespace using a Code block. Why your Squarespace Iframe might not work. Alternatives to Iframes on Squarespace.

How to swap site logo on specific pages on a Squarespace 7.1 site
How to swap site logo on specific pages on a Squarespace 7.1 site

Struggling to see the logo on your webpage because it blends into the background? You're not alone. Squarespace offers a simple fix to swap out your logo on specific pages, ensuring it always stands out.

Quick Tip - Grayscale to colour image rollovers in Squarespace
Quick Tip - Grayscale to colour image rollovers in Squarespace

Learn how to add a unique touch by transforming images from grayscale to vibrant color on hover. Enhance your site's visual appeal with this dynamic effect!

Squarespace ID Finder Chrome Extension simplifies custom styling and coding
Squarespace ID Finder Chrome Extension simplifies custom styling and coding

The Squarespace ID Finder Chrome extension is a must-have tool for Squarespace designers. This Chrome browser extension simplifies the process of applying custom CSS or JavaScript by easily identifying the unique IDs of site elements.

How to stop long words or urls breaking Squarespace blog comments
How to stop long words or urls breaking Squarespace blog comments

Long strings of characters with no spaces, such as urls, can break Squarespace comment layouts. Here's a quick fix.  

Reducing the number of Squarespace summary block images on mobile devices
Reducing the number of Squarespace summary block images on mobile devices

Squarespace automatically adapts your page layout for different screen widths but this can lead to some very long page lengths on mobile devices. 

This free css plugin optimises page lengths by reducing the number of summary block entries on mobile devices . 

How to create hide/show FAQs in Squarespace
How to create hide/show FAQs in Squarespace

Here's a concise solution for creating hide/show text in Squarespace pages, using a Markdown Block and a jQuery script.

From the archive

A lot of the articles below refer to older versions of Squarespace. As such they may not work or Squarespace may now have the feature that they were fixing.

Any articles that are still relevant are scheduled for an update, at which point they will move up the page.

Featured
Free Plugin - Tidying up grid galleries in Squarespace
Free Plugin - Tidying up grid galleries in Squarespace

If your Squarespace page is overloaded with hundreds of gallery images this free plugin is a great way to limit the number of gallery images in grid layout while having them all appear in lightbox view.

Free Plugin - Using a CSS3 animation to fix 'font flicker'
Free Plugin - Using a CSS3 animation to fix 'font flicker'

If you use custom fonts on your Squarespace website you might have noticed 'font flicker' - also known as FOUT (flash of unstyled text) - the page initially displays in the default font and then swaps to the custom font, causing a distracting flicker. 

Here's a fix that uses CSS3 animations to hide the flicker. 

Tidying up Squarespace search results
Tidying up Squarespace search results

Add the code in this article to Design > Custom CSS and your Squarespace search results will be a lot more useful to your site visitors. 

Free Plugin - Force PDFs to load in a new window in Squarespace
Free Plugin - Force PDFs to load in a new window in Squarespace

Here's a free code plugin that forces PDFs to open in a new window rather than hiding your site by taking over the current browser window. 

A Scroll hint that fades out when the page is scrolled down
A Scroll hint that fades out when the page is scrolled down

This is a quick solution I just programmed for a client that allows displays a down arrow "scroll hint" locked to the bottom of the browser window that slowly fades out as the page is scrolled down and  quickly fades back in if the page is scrolled back to the top. 

Squarespace CSS rollover effects triggered by character sequences in ALT tags
Squarespace CSS rollover effects triggered by character sequences in ALT tags

Zoom in. Zoom Out. Shake it all about - Free CSS code to add to your Squarespace website that allows you to easily add cool rollover effects to whichever images you want. 

Multiple languages in the same Squarespace site
Multiple languages in the same Squarespace site

Here's a video walkthrough of a project I just completed for Dream Big that makes their site multilingual.

When viewing the Spanish version of the site any interface content that is hard coded in English is automatically replaced with Spanish translations. 

Squarespace Cover Page Autoplay Video Backgrounds
Squarespace Cover Page Autoplay Video Backgrounds

Get this FREE addon that allows you to install looping video backgrounds on Squarespace Cover Pages. This solution uses a locally hosted video rather than a video from YouTube, Vimeo or other streaming video services.  

Using Google Analytics to Measure Visitor Engagement in Squarespace websites
Using Google Analytics to Measure Visitor Engagement in Squarespace websites

I wanted to understand how people are engaging with my Squarespace website so I performed a test to measure visitor engagement and to work out whether single page “bouncing” visitors are engaging with the site at any level.  

The test results revealed that the vast majority of visitors interact and engage with the site, with only 12% not interacting at all. 

How to fix Squarespace Index page tracking problems
How to fix Squarespace Index page tracking problems

Squarespace Index pages don't trigger Google Analytics tracking for subpages loaded via Ajax.  This means you can't tell whether users are interacting with Index pages or just abandoning them. 

This article explains the problem and then demonstrates a custom script that enables this valuable analytics data to be tracked.

Dynamic translation of Squarespace form error messages

A useful script that dynamically translates Squarespace form errors into the language of your choice. 

Getting Javascript charts working in Squarespace

How to adapt a realtime chart created using canvasjs to work inside Squarespace.

Adding autoplay video banners to a Squarespace website

A client recently asked for video banners to be added to their Squarespace website that would autoplay on page load. 

See how we did it after the link..

Making YouTube, Vimeo and Instagram IFRAMES responsive in Squarespace
Making YouTube, Vimeo and Instagram IFRAMES responsive in Squarespace

This jQuery script makes embedded YouTube, Vimeo and Instagram videos display correctly in responsive layouts. 

Tracking Squarespace form submissions in Google Analytics using JQuery
Tracking Squarespace form submissions in Google Analytics using JQuery

This article tells you how to easily track Squarespace form submissions in Google Analytics by adding a few lines of Javascript/JQuery to relevant pages. 

How to embed a Twitter Widget into a Squarespace website
How to embed a Twitter Widget into a Squarespace website

Find out how to embed the official Twitter feed widget into a Squarespace page to give a better user experience.