Universal Search with Web Components

Universal Search is a configurable search dialog that searches Products, Product Categories, and Content from one input. It can combine result tabs with suggestions, Search Redirects, facets, Product sorting, and recommendations.

Use Universal Search when you want to provide a single search entry point while keeping control over the button or other interface that opens it.

Capabilities

Universal Search supports:

• Product, Product Category, and Content result tabs.
• Popular search terms and Search Term Predictions.
• Search Redirects from Product Search.
• Entity-specific filters and facets, plus Product sorting.
• Recommendations before a search and after a search returns no results.
• Localization, responsive layouts, and styling through CSS custom properties and CSS parts.
• Keyboard navigation and modal focus management.

The component reuses the Search configuration supplied when initializing Relewise UI, including filters, facets, relevance modifiers, selected properties, sorting, templates, and targeted Product Search configurations.

Add Universal Search

Install the Web Components package and its Relewise client peer dependency:

npm install @relewise/web-components @relewise/client

Initialize Relewise UI and pass a universalSearch configuration to useSearch():

import { UserFactory } from '@relewise/client';
import { initializeRelewiseUI } from '@relewise/web-components';

initializeRelewiseUI({
    datasetId: 'RELEWISE_DATASET_ID',
    apiKey: 'RELEWISE_API_KEY',
    contextSettings: {
        getUser: () => UserFactory.anonymous(),
        language: 'en-US',
        currency: 'USD',
    },
    clientOptions: {
        serverUrl: 'RELEWISE_SERVER_URL',
    },
}).useSearch({
    universalSearch: {
        entities: {
            products: {},
            productCategories: {},
            content: {},
        },
        suggestions: {
            popularSearchTerms: {},
            searchTermPredictions: {},
        },
    },
});

When entities is omitted, Universal Search enables Products with its default settings. When entities is provided, each key adds its corresponding result tab.

Place the component once on the page and use your own trigger to open it:

<button type="button" id="open-search">Search</button>

<relewise-universal-search
    displayed-at-location="Header Search">
</relewise-universal-search>

const searchButton = document.querySelector('#open-search');
const universalSearch = document.querySelector('relewise-universal-search');

searchButton?.addEventListener('click', () => universalSearch?.open());

The component manages the dialog, focus, keyboard interaction, and responsive result layout. Its default design is neutral and can be adapted to your storefront.

Technical reference

The Web Components repository is the source of truth for Universal Search's complete technical surface. See the Universal Search section of the Web Components README for:

• All configuration options and recommendation types.
• Attributes, properties, and methods.
• Localization keys.
• URL-state and request behavior.
• CSS parts and custom properties.
• Responsive behavior and accessibility details.

Related documentation:

• Configure Search Redirects under My Relewise: Search.
• Learn about the available recommendation types.
• Review the guidance for server-side rendering frameworks.