Have you ever been frustrated with the dull and uninteresting 404 pages that appear when links go dead or users type in an invalid URL? Today, we’re going to transform that experience by adding a unique and charming 404 page to your Shopify store. More often than not, dead links are an unavoidable reality, and our goal is to make the 404 page stand out compared to the default, simple text provided by most themes.
In this blog post, we’ll be implementing a delightful 404 page inspired by an awesome CodePen creation. If you prefer a video tutorial, you can check it out here.
If you prefer video then check out the video.
Getting Started:
Before we dive in, make sure you are using a 2.0 theme with JSON templates. If not, don’t worry; you can still follow along by copying and pasting the provided code between the and tags.
To get started, head over to the GitHub repository for this project: https://github.com/ndrishinski/blogs/tree/master/404-page
This repository contains the necessary files, including the 404.json template, toaster.liquid section file, toaster.liquid snippet file, and the toaster-css.css stylesheet.
Adding the Toaster Section:
Inside your Shopify theme’s sections folder, add a file called toaster.liquid. Copy and paste the content from the GitHub repository into this file. This file references a snippet file that we’ll create shortly and defines schema settings for customization in the customizer.
Adding the Toaster Snippet:
Add a new snippet file also called toaster.liquid. Copy and paste the bulk of the HTML code from the GitHub repository into this file. This HTML code, combined with the CSS we’ll add later, will give your 404 page a stylish appearance.
Adding CSS Styling:
Add a new CSS file into the assets folder and name it toaster-css.css. Copy and paste the CSS code from the GitHub repository into this file. This CSS will be responsible for styling the HTML structure and making it visually appealing.
*Within the Dawn theme, we also need to comment out line 628 in base.css
h6:empty {
/* display: none; */
}Integrating Files into Theme Preview:
Update 404.json File:
Navigate to your 404.json file, and add a reference to the newly created toaster.liquid section. Remember, in the hierarchy, your templates reference sections, and our snippet will be referenced within our section. See my json file here.
Preview and Customization:
Preview Theme:
Save your changes and open your theme preview. Navigate to a non-existent URL, and you should witness your new and improved 404 page in action.
Customize in the Customizer:
Explore the customization options for the button and heading in the Shopify customizer. You’ll find configurable settings that allow you to tailor the appearance of your 404 page.
Conclusion:
Congratulations! You’ve successfully spiced up your Shopify 404 page with a unique Toaster page. This quick and easy tutorial has added a touch of creativity to an otherwise mundane aspect of your online store. Stay tuned for more Shopify tricks and customizations to enhance your e-commerce experience.