Smart Search & Instant Search by Searchanise

About Smart Search & Instant Search by by Searchanise link The Most Reviewed Search App for Shopify and Shopify Plus – a complete site search, navigation & merchandising solution to convert your visitors into paying customers. link plus Smart Search & Instant Search by Searchanise powers 12,000 eCommerce businesses worldwide and is trusted by top-performing brands including Philips, Boeing, Levi's, Durex, Mediamarkt, National Geographic, Sennheiser, and many more.

step 1:

Add the below code in App embeds => Additional integration code => Additional HTML

<!-- Wishlist Hero - Custom serchnise  -->
<script src="https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js"></script>

<script type="text/javascript" id="wishlisthero-searchnise">
  document.arrive(".snize-search-results-main-content .snize-product",function(sp){
      if (sp.getAttribute("id")) {
        var productId = sp.getAttribute("id").replace(/[^0-9\.]+/g, "");
        var productUrl = sp
          .querySelector("a.snize-view-link")
          .getAttribute("href");
        var productImage = sp
          .querySelector("img.snize-item-image")
          .getAttribute("src");
        var productTitle = sp.querySelector(".snize-title").innerText;
        var productPrice = 0;
        try {
          productPrice = sp.querySelector(".snize-price").innerText;
          productPrice = parseFloat(productPrice.replace(/[^0-9\.]+/g, ""));
        } catch (ex) {
          console.log(ex);
        }

        var button = document.createElement("div");
        button.setAttribute("data-wlh-id", productId);
        button.setAttribute("data-wlh-variantid", productId);
        button.setAttribute("data-wlh-price", productPrice);
        button.setAttribute("data-wlh-link", productUrl);
        button.setAttribute("data-wlh-name", productTitle);
        button.setAttribute("data-wlh-image", productImage);
        button.setAttribute("data-wlh-mode", "icon_only");
        button.classList.add("wishlist-hero-custom-button");
        button.classList.add("wishlisthero-floating");
        sp.insertBefore(button, sp.querySelector(".snize-view-link"));
        // now
        var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
          detail: button,
        });
        document.dispatchEvent(ev);
      }
    });
</script>

step 2:

Then adjusting our css selectors to include also prefix ( so .wishlisthero-floating { ... } .. becomes .wishlisthero-floating , div.snize .wishlisthero-floating { ... }

step 3:

added min-width:auto to the button css style in wishlisthero-floating

step 4:

Hiding the tooltip by adding this CSS customization:

.__react_component_tooltip{
visibility: hidden !important;
}