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. Set the Show “sticky” widget 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
   • Never – the widget won’t be shown in your store at all
3. 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 Widget position on the storefront setting.
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:
   • Sticky widget icon – changes the icon color
   • Sticky widget background – changes the icon background color
   • Color – changes the icon color for a Legacy template 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 tab.
2. Switch on the Use custom CSS setting if it is disabled.
3. Enter your CSS code for the widget 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.