Adjusting Sticky Widget

This article is general for Shopify, BigCommerce, WooCommerce, Magento 1, Magento 2. If your store is on Wix, you should look for the appropriate instructions here. In CS-Cart the widget is absent.

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.

Adjusting Sticky Widget

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.

Adjusting Sticky Widget

Widget’s configuration

Enabling/Disabling the widget

Important info

The Sticky Widget works only if the Search Results Widget is enabled.

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

Enjoying your experience with Searchanise?

We’d appreciate it if you could take some time to leave a review. To do so, follow the link to your respective platform below:

Updated on March 1, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Back to top