Open Search

Description

The openSearch action opens the native product search screen within the Superfans app.
It allows users to explore your catalog using Shopify’s built-in search, including autocomplete and filtering features, all without leaving the app environment.

Function Signature

Superfans.actions.openSearch()

Response of Status

Example Usage

document.getElementById('searchButton').addEventListener('click', () => {
    Superfans.actions.openSearch();
});

<div class="search-container">
<button class="search-btn" id="searchButton">Search</button>
</div>

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.search-btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.search-btn:hover {
  background-color: #0056b3;
}
.search-image {
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.3s;
}
.search-image:hover {
  transform: scale(1.1);
}

Best Practices

1. Use for global search triggers: Bind to header search icons or floating buttons.
2. Pre-fill relevant terms: Use query to guide users toward specific product lines or promotions.
3. Combine with analytics: Track which search queries are triggered programmatically.
4. Provide search access points: Add it in home pages, banners, or “Explore” CTAs for better discovery.
5. Avoid blocking actions: Allow users to return easily after completing a search.

Caveats

1. App-only context: Works exclusively within the Superfans mobile app.
2. Search scope: Results are limited to products and collections indexed in Shopify.
3. No event return: The SDK does not return search results to JavaScript; it only opens the search view.
4. Async behavior: Handle the Promise response to ensure UI consistency.