Improving your Shopify 404 page

Cover image by Hans Braxmeier

Unless something has gone drastically wrong, your Shopify 404 page should not be getting a lot of traffic. Most sites shout the number 404 at the user and perhaps splash out on a nice illustration, to commemorate the site's failure to deliver content. But what if we could do more for your customers?

Search

Adding a search box to your 404 page is pretty simple, but what if that search box took your broken URL and added it automagically to the search box?

Unfortunately, Shopify doesn't give us a reliable way to grab the URL, so we'll need to pinch it using Liquid's older brother, JavaScript.

Finetune Partner's Mannequin 404 template takes the wonky URL and adds it to the search box, first formatting this string, so that all the hyphens, underscores and slashes are removed.

News update

How about we pull in (say) the last three news posts? The next section of the code allows you to pull in as many news posts as you like (starting with the most recent).

Update the current_blog variable with the name of the blog which you'd like to pull in (Shopify stores can have more than one blog on them), then update the article_count variable, to set how many articles will appear.

View 404 template on GitHub

Get in touch to find out more     We turn casual browsers into committed buyers