Shopify App: Search

The Shopify App allows you to activate Relewise Search with a few simple clicks. Within the app, search is divided into two parts: The Search Overlay, which offers results as you type, and the Search Results Component, which serves up your search results as a Block in your Shopify Sections.

Ideally, you will want to activate both parts of the Search functionality, to ensure the best user experience.

Shopify App: Search Overlay

To activate the Search Overlay, ensure that the API Key has the correct permissions, and then activate the Search Overlay on the same page where you set up the UI Components above.

When activated, the Relewise Search Overlay replaces your theme's existing search interface.

By default it targets elements with the <predictive-search> or <search-form> HTML tags that most Shopify themes use.

If your theme uses something else, enter a CSS selector in the Custom Search Overlay Selector setting to point directly at your search element.

If you're unsure which selector to use, refer to guidance such as the CSS selector reference on W3Schools.

For example, the selector .header-search, #search-mobile targets both a desktop input with the class header-search and a mobile element with the ID search-mobile.

Use a selector that matches only the element(s) you want replaced; the overlay swaps out every element that matches the selector you provide.

Here, you will also find two options for customization: Color and Accent Color. These settings define the color of both the Search Overlay and the Search Component described below. Use them to match your search components to the rest of your store theme. We also provide several CSS hooks for additional customization. Read more here.