Instant Search Widget

The Instant Search Widget builds itself into your existing search bar. If the theme you are using doesn’t have a search bar, the Sticky widget with similar functionality appears.

As soon as a customer starts typing a query in the search bar, the widget instantly drops down suggestions, dynamically changing with each keystroke.

You can configure the widget in the Searchanise control panel > Search & Navigation > Instant search widget section.

Template & colors

↑ Back to top

You can choose either a single-column or multi-column widget’s template in the Searchanise control panel > Search & Navigation > Instant search widget section > Template & Colors tab.

Single Column template:

Multi-Column template:

You can also change colors for the widget’s template to suit your store look and feel more. 

Changing colors

↑ Back to top

To change widget colors, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Template & Colors tab.
2. Enter a hex color in a Color palette field or use a color-picker next to the necessary element.
   

   

3. Type a search term in the preview area to check out how it will look.

   

4. Apply the changes.

Color palette description

The examples below show color highlights in red-pink for the widget elements that match a particular color option.

Color option	Description	Example
Main background	Changes the background color of the whole drop-down widget
Hover background	Changes the background color of a product or a suggestion on hover
Border	Changes the border color of the widget It is used in the “Classic” template and the “Classic” style only
Items separator	Changes the separator color It is used in the “Classic” template only
Suggestion text	Changes the text color of suggestions In the “Classic” template and the “Classic” style, it is also used for the text color of the search result product description
Item title	Changes the text color of product titles in the drop-down widget
Item description	Changes the text color of product descriptions in the widget It is used in the “Classic” template and the “Classic” style only
Price color	Changes the color of product prices
List price color	Changes the text color of retail product prices (before the discount) It is used only when the discount label isn’t enabled (Product labels tab > Discount label part > Show label option)
Hover text color	Changes the text color of a product or a suggestion on hover It is used in the “Classic” template and the “Classic” style only
‘View All’ link	Changes the text color of the View all link It is not used in the new “Single Column”, “Multi Column” templates
‘View All’ text	Changes the text color of the View all button It is not used in the new “Single Column”, “Multi Column” templates
‘View All’ background	Changes the background color of the View all button It is used in the new “Single Column”, “Multi Column” templates only
Recent searches	Changes the text color of the suggestions showing the queries that a customer has searched for recently It is used when the “Show recent customer searches” option is enabled (Content tab > Pro features part)
SKU color	Changes the color of product SKUs It is used when the Show SKU option is enabled (Content tab > Products part)
Label color	Changes the text color of labels of the search results groups It is not used in the “Classic” template and the “Classic” style
“See all” text	Changes the text color of the See all products button (it appears when no search results) It is used in the new templates only
“See all” background	Changes the background color of the See all products button (it appears when no search results) It is used in the new “Single Column”, “Multi Column” templates only

Resetting colors

↑ Back to top

To reset colors to the default values, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Template & Colors tab.
2. Click the Reset colors button under the chosen template. All color palettes of the current template will be changed to default values.

   

3. Apply the changes.

Content

↑ Back to top

In the Content tab it’s possible to customize what information, sections, widget elements to display to customers and how to show that in the widget.

Content settings description

↑ Back to top

Content setting	Description
Products
Show products	The widget won’t show the widget’s Products section if the setting is disabled.
Product qty.	Sets the maximum number of products displayed in the widget’s Products section.
Show price	Displays the product price in the product cards.
Show list price	Shows the original product price compared with the discounted product price if the product has a discount. The enabled Discount labels setting overrides this one.
Show SKU	Displays SKU (the product code) in the product cards.
Max description strings	Sets the maximum number of strings displayed in the product description in the product cards.
Zero price action	Sets the action if the product price is 0.
Zero price text	Sets the text displayed instead of the zero price. The setting is shown only if the Hide zero price, show text instead option is set in the Zero price action setting.
Additional product field	Shows the selected additional product field in the product cards. You can set the label for the field in the Translations & Texts section > Instant Search Widget tab > Additional product field text box.
Search Suggestions
Show suggestions	The widget won’t show the widget’s Suggestion section if the setting is disabled.
Suggestion qty.	Sets the maximum number of suggestions displayed in the widget. If you set the value to 0, the widget won’t show the Suggestions section.
Suggest single words	Shows the single-word suggestions
Suggest automatically generated terms	Creates suggestion terms in the Suggestion Dictionary based on successful customer searches from the found product titles and descriptions
Show popular suggestions on click	Shows suggestions as the customers click in the search bar before they start typing. The setting will work if there are at least 5 suggestions in the Suggestion Dictionary.
Show recent customer searches	Shows the search suggestions based on the recent customer searches if they match the current search query
Other
Highlight search term	Highlights the current search query in the widget’s Suggestions section.
Show the ‘View All Products’ link	Displays the View All Product link under the Products section for legacy templates, or the View All Items button for actual templates.
Show categories	The widget won’t show the widget’s Categories section if the setting is disabled.
Categories qty.	Sets the maximum number of categories displayed in the widget’s Categories section.
Show pages	The widget won’t show the widget’s Pages section if the setting is disabled.
Pages qty.	Sets the maximum number of pages displayed in the widget’s Pages section.
Search results order	Controls the order of the widget sections. To change the order, drag and drop the blocks.

Adjust content of the widget

↑ Back to top

To adjust the content of the widget, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Content tab.
2. Adjust the settings.
3. To check out the changes, type a search term in the preview area.
4. If you like the results, click the Apply changes button.

That’s it. The settings are now applied on the storefront of your store.

Sticky widget

↑ Back to top

What is Sticky Widget?

↑ Back to top

The Sticky Widget looks like a magnifying glass icon locked in one place, so it doesn’t disappear when a customer scrolls down or up the page.

The Sticky Widget appears by default if there is no search bar in your store.

As soon as you start typing, the Instant Search Widget opens.

Widget’s configuration

↑ Back to top

Enable/Disable the widget

To enable or disable the widget, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Sticky widget tab.
2. Switch on / switch off the Enable Sticky Widget setting
3. Set the Appearance conditions option to one of the values:
   • Auto – the widget will be shown only when there is no search bar in your store
   • Always – the widget will always be shown in your store
4. Apply the changes.

Widget’s position

To change the widget’s position, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Sticky widget tab.
2. Select one of the available values of the Position option.
3. Apply the changes.

Widget’s customization

1. Changing the input placeholder for the search bar

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Sticky widget tab.
2. Enter your text into the Search input placeholder field.
3. Apply the changes.

2. Changing colors of a magnifying glass icon

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Sticky widget tab.
2. Enter a hex color in a Color palette field or use a color-picker next to the necessary element:
   • Icon color – changes the icon color
   • Background color – changes the icon background color (only for new up-to-date templates selected in the Colors tab)
3. Apply the changes.

3. CSS customization (for modifying the widget’s appearance)

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Custom CSS & HTML tab.
2. Switch on the Custom CSS setting if it is disabled.
3. Enter your CSS code for the widget’s appearance.
   CSS selectors:
   • .snize-sticky-searchbox – the Sticky Widget floating search button
   • .snize-search-magnifier – the Sticky Widget search icon (magnifying glass)
   • .snize-sticky-searchbox.snize-sticky-searchbox-opened – the Sticky Widget floating closing button, appears when the Searchanise search widget is open
   • .snize-search-close – the Searchanise search widget’s closing icon
   • #snize-modal-sticky-searchbox – the pop-up window with the Searchanise widgets
4. Apply the changes

Product Labels

↑ Back to top

The Product Labels allows adding eye-catching labels to products in search results. You can add Discount Labels to products sold with discounts or In-stock Labels to display the product availability.

Below is an example of Product Labels and In-stock Labels in the Instant Search Widget:

You can adjust the Product Labels in the Searchanise control panel > Search & Navigation > Instant search widget section > Product Labels tab.

Discount Labels

↑ Back to top

To set up Discount Labels, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Product Labels tab > Discount label part.
2. Switch on the Discount Label setting.
3. Optionally, change the background color and the icon color (text color) of the discount label.
4. Optionally, change the text of the Discount Label. If you enter the [discount] parameter in the text box, it will be replaced with the actual product discount.
5. Apply the changes.

To show Discount Labels in the Search Results Widget, you’ll need to apply the same settings in the Search & Navigation > Search results widget section > Product Labels tab.

In-stock Labels

↑ Back to top

You can add In-stock Labels to products in the Instant Search Widget to show their availability to customers:

• in-stock
• pre-order (the plugin v. 1.0.12 or later) – products where allowed backorders (Product > Inventory > Allow backorders?)
• out-of-stock

To do so, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Product Labels tab > In-stock label part.
2. Switch on the In-stock Label setting.
3. Optionally, change the background color and the icon color (text color) of the labels.
4. Optionally, change the text of the labels.
5. Apply the changes.

To show In-stock Labels in the Search Results Widget, you’ll need to apply the same settings in the Search & Navigation > Search results widget section > Product Labels tab.

Custom CSS & HTML

↑ Back to top

In the Custom CSS & HTML tab, you can adjust the HTML blocks or paste your CSS code to customize the Instant Search Widget in the more advanced way.

Custom HTML

↑ Back to top

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

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

Custom CSS

↑ Back to top

Using the Custom CSS feature, you can change widget styles if the settings are not enough.

Custom CSS examples

How to add text to product prices?

1. The text before the product price:

   .snize-price:before {    content: "from "; } 

2. The text after the product price:

   .snize-price:after {
      content: " inc tax";
   }

How to hide the price of a certain product?

Add the following CSS rule and replace <ID> with the ID of the necessary product:

#snize-ac-product-<ID> .snize-price-list {
    visibility: hidden;
}

Adjust Custom CSS

Steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Custom CSS & HTML tab.
2. Switch on the Custom CSS toggle if it is switched off.
3. Paste your CSS rules into the text area.
4. Apply the changes.

If the applied CSS rules didn’t affect the widget appearance well, it’s always possible to switch off the Use custom CSS setting and apply the changes.