23 STEPS
1 The first step is to open the theme settings area of your Shopify theme config and go into the Search Result 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 the Heading.
You can change its style from 'Heading Font font Style'.
4 Now, select a color for the Sub Heading text.
5 Now, select the font size for the Sub Heading text.
Below you can change the font style of the Sub Heading Font font Style.
6 Next, select a color for 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 Step counter text.
9 Next, select a font size for the Step counter text.
You can change its font style from Text Font Font size.
10 Now, scroll down and click Select page.
This page will be displayed in case of no results found.
11 Select a page.
If you select a page then the default subheading, step counter text, collections, etc.. will be hidden.
12 Now scroll down and enter a Search Title.
Ex. "We can't find what you're looking for (sorry)..."
13 Enter Search Sub Title.
Ex. 'BUT don't fret... Here are 4 tips for finding it...'
14 Now, scroll down and click Display Search Form.
15 Enter 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 result found.
18 Next, Enable the Display Speak To Image if you would like to show it.
19 Click Replace to change image.
20 Enter a link URL for Speak To Image.
21 Now click Display Collections.
It will show your 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/1584604/DemoStore---Search-Result-Page
The Search Results Page is a secondary error page, populated by improper search terms or unavailable ones. You can change the language to fit yours or keep it as is.
NOTE: If no results are found, a default “No Results Found” message will display.
Look And Feel
Heading – Changes the heading color of the Search 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.
Search Title – Changes the title of the 404 Error Page. The default is: “Whoops! We can’t find the page you requested (sorry)…”
Search 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.
