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.
![Step 1 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400)
3 Next, select the font size for the Heading.
You can change its style from 'Heading Font font Style'.
![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400)
4 Now, select a color for the Sub Heading text.
![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400)
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.
![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400)
6 Next, select a color for general text.
It includes paragraphs, links, etc..
![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400)
7 Now, scroll down and select the background color for the step counter.
![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400)
8 Next, select the color for Step counter text.
![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400)
9 Next, select a font size for the Step counter text.
You can change its font style from Text Font Font size.
![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400)
10 Now, scroll down and click Select page.
This page will be displayed in case of no results found.
![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400)
11 Select a page.
If you select a page then the default subheading, step counter text, collections, etc.. will be hidden.
![Step 11 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=11&width=800&height=600&mobile_width=450&mobile_height=400)
12 Now scroll down and enter a Search Title.
Ex. "We can't find what you're looking for (sorry)..."
![Step 12 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=12&width=800&height=600&mobile_width=450&mobile_height=400)
13 Enter Search Sub Title.
Ex. 'BUT don't fret... Here are 4 tips for finding it...'
![Step 13 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=13&width=800&height=600&mobile_width=450&mobile_height=400)
14 Now, scroll down and click Display Search Form.
![Step 14 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=14&width=800&height=600&mobile_width=450&mobile_height=400)
15 Enter Search Form Heading Text.
Default is 'Search for it...'
![Step 15 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=15&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=16&width=800&height=600&mobile_width=450&mobile_height=400)
17 Scroll down and enter Speak To Help Text.
It will show in case of no result found.
![Step 17 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=17&width=800&height=600&mobile_width=450&mobile_height=400)
18 Next, Enable the Display Speak To Image if you would like to show it.
![Step 18 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=18&width=800&height=600&mobile_width=450&mobile_height=400)
19 Click Replace to change image.
![Step 19 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=19&width=800&height=600&mobile_width=450&mobile_height=400)
20 Enter a link URL for Speak To Image.
![Step 20 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=20&width=800&height=600&mobile_width=450&mobile_height=400)
21 Now click Display Collections.
It will show your collections in case no result found.
![Step 21 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=21&width=800&height=600&mobile_width=450&mobile_height=400)
22 Collections.
![Step 22 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=22&width=800&height=600&mobile_width=450&mobile_height=400)
23 Now, click save to save your theme config and preview your changes.
That's it. You're done.
![Step 23 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1584604&step_number=23&width=800&height=600&mobile_width=450&mobile_height=400)
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.