No Results | Yext Hitchhikers Platform

When a user can’t find a result in a Search experience, they are presented with a “no results” screen. This feature is common across search engines, both third party and first party.

This is the behavior for Universal Results screen by default.

Display All Results on No Results

On vertical search only, you can choose to display all results for a vertical when no results are found. It would look like this:

The NoResults feature is part of VerticalResults and is a unique sub-component since other components have settings for it. Most other components are self-contained.

In the Theme, page templates will have the No Results feature specified by default.

"VerticalResults": {
  "noResults": {
  "displayAllResults": true
}

To enable the advanced No Results UI you’ll need to do a few things in the config > [vertical].json file:

Enable it in VerticalResults in ComponentSettings
Specify how you want each component impacted by No Results to behave when there are no results. This includes:
- Pagination
- Map Configuration

Here’s what this could look like on a Vertical page with a Map and with Pagination:

{
  "verticalKey": "Locations",
  "pageTitle": "Location Search",
  "componentSettings": {
    "SearchBar": {
      "placeholderText": "Search",
      "title": "What are you looking for today?"
    },
    "VerticalResults": {
      "noResults": {
        "displayAllResults": true
      }
    },
    "Pagination": {
      "noResults": {
        "visible": true
      }
    }
  },
  "verticalsToConfig": {
    "Locations": {
      "cardType": "location-standard",
      "icon": "pin",
      "mapConfig": {
        "mapProvider": "MapBox",
        "noResults": {
          "visible": true,
          "displayAllResults": true
        }
      }
    }
  }
}

You can customize the no results banner on vertical search using the template property. In the example below, we added HTML to create a results banner. You can add CSS to target the HTML classes you add to create your own styling.

"VerticalResults": {
  "noResults": {
    "displayAllResults": true, // Optional, whether to display all results in the vertical when no results are found.
    "template": "<div class=\"Answers-noResultsBanner\">No results found in FAQs. <a href=\"url_here\">Submit your question here or view all FAQs below!</a></div>"
  },
  "hideResultsHeader": true
}

For a more complex example, see the Search UI SDK Results Pages component doc.

Back

< Search Bar

Pagination >

<% elem.innerText %>

No Results | Yext Hitchhikers Platform

Display All Results on No Results

Customize No Results Banner