Search Results Page

Search Results Page
Written by Jonathan Diaz
Updated 8 months ago

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

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 the Heading.

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

Step 3 image

4 Now, select a color for the Sub Heading text.

Step 4 image

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

6 Next, select a color for 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 Step counter text.

Step 8 image

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

10 Now, scroll down and click Select page.

This page will be displayed in case of no results found.

Step 10 image

11 Select a page.

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

Step 11 image

12 Now scroll down and enter a Search Title.

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

Step 12 image

13 Enter Search 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.

Step 14 image

15 Enter 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 result found.

Step 17 image

18 Next, Enable the Display Speak To Image if you would like to show it.

Step 18 image

19 Click Replace to change image.

Step 19 image

20 Enter a link URL for Speak To Image.

Step 20 image

21 Now click Display Collections.

It will show your 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/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.

Did this answer your question?