HTML customization of Instant Search Widget

The Custom HTML feature consists of the settings that allow adding HTML blocks to the Instant Search Widget.

In this article, you’ll find instructions on how to adjust Custom HTML and what its settings mean.

The settings description

Show content on focus

This block is displayed when a user focuses on the search bar. Default settings:

<br><i>Start typing for instant search results</i><br><br>

Extra content

This block is displayed after the last block set in the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section > Content tab > Search results order setting.

Default value:

<div style="text-align: center;">
    <a href="#" title="Exclusive sale">
        <img src="https://www.searchanise.com/images/sale_sign.jpg" style="display: inline;" />
    </a>
</div>

“Nothing found” content

This block is displayed in the instant search results when the search query returns no results.

Default settings:

<p>Sorry, nothing found for [search_string].</p>

<p>Try some of our <a href="#" title="Bestsellers">bestsellers →</a>.</p>

Adjust Custom HTML

Steps:

1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section > Custom CSS & HTML tab.
2. Select one of the settings and change its default HTML if you need it.
3. Apply the changes.