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.
2 Now click Heading and select a color for it.
Heading, Sub Heading, Step Counter, Collection, etc.. will show when no result found.
3 Next, select the font size for your Heading.
You can change its style from 'Heading Font font Style'.
4 Now, select a color for Sub Heading text.
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.
6 Next, select a color for the general text.
It includes paragraphs, links, etc..
7 Now, scroll down and select the background color for the Step counter.
8 Next, select the color for the Step counter numbers.
9 Next, select the font size for the Step counter text.
You can change its font style from Text Font Font size.
10 You can also display custom content on the 404 page,
This page will be displayed if no
11 Select Page.
If you select a page then default subheading, step counter text, collections, etc.. will be hidden.
12 Now scroll down and enter a 404 Title.
Ex. "We can't find what you're looking for (sorry)..."
13 Enter a 404 Sub Title.
Ex. 'BUT don't fret... Here are 4 tips for finding it...'
14 Now, scroll down and click Display Search Form to show the search form.
15 Enter a Search Form Heading Text.
Default is 'Search for it...'
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.
17 Scroll down and enter Speak To Help Text.
It will show in case of no search result found.
18 You can also display a contact image if you so wish.
19 Click Replace to change image.
20 Enter link URL for the Speak To Image.
21 Now click Display Collections.
It will show collections in case no result found.
22 Collections.
23 Now, click save to save your theme config and preview your changes.
That's it. You're done.
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.
