Take your page not found to an eleven

So we’re rebuilding this client’s website and a critical component is their product spec sheets which are often used when designing buildings as their products are concerned with providing safe exits when power is lost

With Squarespace, we can’t match the exact file path of these spec sheets from the old site so I came up with the idea of taking the custom file not found page and creating an index of all the spec sheets in an easy to scan list

I used Squarespace’s JSON feature which is a crazy cool way to get just the information of any page on your site just by adding this to the end of any page url

I whipped up some JavaScript to get all the products, then I searched every link for pdf files and then I rebuilt the output with an easy to scan index - dropping in a little wrench icon to help make these spec sheets pop and wala

A custom page not found that gives you a full view of product info unlike anything you get normally which can actually make hitting a page not found an enjoyable experience :)

And it looks good on mobile!

The Code

Below is the code from Codepen. I use Codepen to stage all customizations first and then install into Squarespace as a code block.

See the Pen Squarespace Collection Index By Category Get PDFs by Gary Ricke (@garyricke) on CodePen.

Supplemental video on the code above

Below is a more detailed view on how we can get the data layer from any page in our Squarespace site and then put that data over on Codepen where we can then dance with it.

Speaking of dancing, you may have noticed that the theme for this topic is Stranger Things and in particular season 4 which features Kate Bush’s Running Up The Hill. I used to have the same synthesizer which was used in this 1985 song so I have a particular love for the 80s synth vibe in the Stranger Things show. The backing of the video below is a rendition by Luke Million.