Adjusting Sticky Widget

What is Sticky Widget?

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

Enabling/Disabling the widget

1. Go to the Searchanise (Smart Search & Filter) control panel > 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 (Smart Search & Filter) control panel > 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 (Smart Search & Filter) control panel > Translations section > Instant Search Widget tab > Sticky widget part.
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 (Smart Search & Filter) control panel > 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 (Smart Search & Filter) control panel > 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

If you have any questions, or you need help with the widget’s configuration, feel free to contact us. We will be happy to help you.