404 Error Page

Explanations for all of the settings for the 404 error page, allowing you to customize the look and feel.
Written by Jonathan Diaz
Updated 8 months ago

The 404 error page is a standard web page, informing visitors they have reached a webpage that does not exist, encouraging them to take the next steps forward or simply press the back button. This is another customer service related page. You can change the language to fit yours or keep it as is.

23 STEPS


1 The first step is to open the theme settings area of your Shopify theme config and go into the 404 Error Page section.

Step 1 image

2 Now click Heading and select a color for it.

Heading, Sub Heading, Step Counter, Collection, etc.. will show when no result found.

Step 2 image

3 Next, select the font size for your Heading.

You can change its style from 'Heading Font font Style'.

Step 3 image

4 Now, select a color for Sub Heading text.

Step 4 image

5 Now, select the font size for the Sub Heading text.

You can also change the font style of from Sub Heading Font font Style.

Step 5 image

6 Next, select a color for the general text.

It includes paragraphs, links, etc..

Step 6 image

7 Now, scroll down and select the background color for the Step counter.

Step 7 image

8 Next, select the color for the Step counter numbers.

Step 8 image

9 Next, select the font size for the Step counter text.


You can change its font style from Text Font Font size.

Step 9 image

10 You can also display custom content on the 404 page, 

This page will be displayed if no 

Step 10 image

11 Select Page.

If you select a page then default subheading, step counter text, collections, etc.. will be hidden.

Step 11 image

12 Now scroll down and enter a 404 Title.

Ex. "We can't find what you're looking for (sorry)..."

Step 12 image

13 Enter a 404 Sub Title.

Ex. 'BUT don't fret... Here are 4 tips for finding it...'

Step 13 image

14 Now, scroll down and click Display Search Form to show the search form.

Step 14 image

15 Enter a Search Form Heading Text.

Default is 'Search for it...'

Step 15 image

16 Next, enter the URL Type Help Text

you can add some tips here.

This will help a customer if he is searching through the URL.

Step 16 image

17 Scroll down and enter Speak To Help Text.

It will show in case of no search result found.

Step 17 image

18 You can also display a contact image if you so wish.

Step 18 image

19 Click Replace to change image.

Step 19 image

20 Enter link URL for the Speak To Image.

Step 20 image

21 Now click Display Collections.

It will show collections in case no result found.

Step 21 image

22 Collections.

Step 22 image

23 Now, click save to save your theme config and preview your changes.

That's it. You're done.

Step 23 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1584606/DemoStore---404-Error-Page

NOTE: If no page is selected, a default “404 Page Custom Settings” will display.

Look And Feel

Heading – Changes the heading color of the 404 Error Page.

Heading Font Font Size – Changes the font size of the header.

Heading Font Font Style – Changes the style of the heading. Lighter, Normal, Bold, and Bolder.

Sub Heading – Changes the color of the sub-heading.

Sub Heading Font Font Size – Changes the font size of the sub-heading.

Sub Heading Font Font Style– Changes the style of the sub-heading. Lighter, Normal, Bold, and Bolder.

Text Color– Changes the text color of body text.

Step Counter Background – Changes the background color of the step counter circles.

Step Counter Text – Changes the text color of the numbers within the step counter.

Text Font Font Size – Changes the font size of body text.

Text Font Font Style – Changes the style of the body text. Lighter, Normal, Bold, and Bolder.

404 Title – Changes the title of the 404 Error Page. The default is: “Whoops! “We can’t find the page you requested. (Sorry)…”

404 Subtitle – Changes the subtitle of the 404 Error Page. The default is: “BUT don’t fret… Here are 4 tips for finding it…”

Search Form – Toggles search form on or off.

URL Help– Displays text after the step counter numbers providing suggestions on how to solve the 404 issue. You may use basic CSS in the boxes as well. Ex: <strong>, </strong> for bold.

Display Speak To Image – Displays a stock customer service image we’ve provided. You can use this or create and upload your own.

Display Collections – Displays a collection of your choice. This helps visitors get back to the main site and shows them what’s available.

Did this answer your question?