HTML customization of Instant Search Widget

The Custom HTML feature consists of 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 resultsi><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

The steps depend on which version of the Searchanise control panel you use. Learn how to identify your control panel version.

New control panel (Shopify only)

1. Go to Search & Navigation > Instant search widget > Custom CSS & HTML.
2. Turn on Custom HTML.
3. Select the content block you want to display.
4. Edit the HTML in the corresponding field.
5. Click Save.

Previous control panel:

1. Go to Search & Navigation > Instant search widget > Custom CSS & HTML.
2. Turn on the content block you want to display.
3. Edit the HTML in the corresponding field.
4. Click Apply changes.