Live Search

You can integrate Live Search powered by AI into your PWA Studio Storefront.

Integration overview

Adobe's Live Search replaces Adobe Commerce's standard search capabilities. Once enabled and configured, it transforms your default search field into the enhanced Live Search interface. Beyond basic search, Live Search includes a Product Listing Page (PLP) widget that delivers powerful filtering options for search results.

Your Store architecture has two main components. The PWA storefront houses the event collector and Live Search layout template. Meanwhile, the backend provides GraphQL endpoints, the SaaS Export module, and Admin UI functionality.

Install the Live Search module

Install the Live Search Backend module

Next, install an additional backend dependency. This exposes the GraphQL queries for Live Search that your PWA frontend package needs.

Run the following commands to install the backend dependency:

Copy
composer require magento/module-live-search-graph-ql-pwa
Copied to your clipboard
composer require magento/module-live-search-graph-ql-pwa

Copy
bin/magento setup:di:compile
Copied to your clipboard
bin/magento setup:di:compile

Copy
bin/magento cache:flush
Copied to your clipboard
bin/magento cache:flush

Install the Live Search Frontend PWA package

To enable Live Search on your PWA, you'll need two components. Install the venia-pwa-live-search package and the Live Search module for Adobe Commerce.

1. You can install the PWA venia-pwa-live-search package from the NPM registry:

   • For projects cloned from GitHub run the following commands from the project root:

     Copy
     yarn venia add -D @magento/venia-pwa-live-search
     Copied to your clipboard
     yarn venia add -D @magento/venia-pwa-live-search

     OR

     Copy
     npm install @magento/venia-pwa-live-search
     Copied to your clipboard
     npm install @magento/venia-pwa-live-search

   • For scaffolded projects run the following commands from project root:

     Copy
     yarn add -D @magento/venia-pwa-live-search
     Copied to your clipboard
     yarn add -D @magento/venia-pwa-live-search

     OR

     Copy
     npm install @magento/venia-pwa-live-search
     Copied to your clipboard
     npm install @magento/venia-pwa-live-search

     This package provides all the storefront functionality for Live Search integration. It enables three key features:

   • Live Search powered Search Bar

   • Live Search powered Category pages

   • Live Search powered Search Results Landing page

2. The backend functionality is provided by the Live Search module for Adobe Commerce.

3. Additionally, you need to install the module-data-services-graphql module that expands the application's existing GraphQL coverage to include fields required for storefront behavioral data collection.

   Copy
   composer require magento/module-data-services-graphql
   Copied to your clipboard
   composer require magento/module-data-services-graphql

Render Live Search results

You can control where Live Search appears on your PWA storefront using the local-intercept file. Learn more in the extensibility framework documentation.

The location for local-intercept.js file may differ depending upon the method of initialization/setup of the project.

The location of the file for a cloned project is as follows:

• <pwa-root>/packages/venia-concept/local-intercept.js

In scaffolded projects, you'll find the file at the project root.

Use the following methods to render Live Search components on your PWA storefront.

Render Live Search popover component

To enable the Live Search Popover component, replace your existing PWA search bar with the LiveSearchPopoverLoader from the PWA module. For a vanilla PWA instance, configure your local-intercept.js file as shown below:

Copy
const { Targetables } = require('@magento/pwa-buildpack');

function localIntercept(targets) {
    
    const liveSearchTargetables = Targetables.using(targets);

    //Search Bar settings

    //Target the file where vanilla PWA Search Bar form component is present.
    const VeniaSearchBar = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/components/SearchBar/searchBar.js'
    );

    //import the LiveSearchPopoverLoader component in the searchBar component file targeted above. 
    const LiveSearchBar = VeniaSearchBar.addImport(
        "import LiveSearchPopoverLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchPopoverLoader'"
    );

    //Replace the existing Search Bar form component with Live search SearchBar component
    VeniaSearchBar.replaceJSX(
        '<Form autoComplete="off" className={classes.form} initialValues={initialValues} onSubmit={handleSubmit} >',
        `<${LiveSearchBar} />`
    );

}

module.exports = localIntercept;
Copied to your clipboard
const { Targetables } = require('@magento/pwa-buildpack');

function localIntercept(targets) {
    
    const liveSearchTargetables = Targetables.using(targets);

    //Search Bar settings

    //Target the file where vanilla PWA Search Bar form component is present.
    const VeniaSearchBar = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/components/SearchBar/searchBar.js'
    );

    //import the LiveSearchPopoverLoader component in the searchBar component file targeted above. 
    const LiveSearchBar = VeniaSearchBar.addImport(
        "import LiveSearchPopoverLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchPopoverLoader'"
    );

    //Replace the existing Search Bar form component with Live search SearchBar component
    VeniaSearchBar.replaceJSX(
        '<Form autoComplete="off" className={classes.form} initialValues={initialValues} onSubmit={handleSubmit} >',
        `<${LiveSearchBar} />`
    );

}

module.exports = localIntercept;

Render Live Search results page (LiveSearchSRLPLoader) component

To integrate the Live Search Results Page (LiveSearchSRLPLoader component), add the LiveSearchSRLPLoader to your desired page component. Then remove any unnecessary components from that page. For a vanilla PWA instance, configure your local-intercept.js file as shown below:

Copy
const { Targetables } = require('@magento/pwa-buildpack');

function localIntercept(targets) {

    const liveSearchTargetables = Targetables.using(targets);

    //searchPage settings

    //Target the Component where to integrate the LiveSearchSRLPLoader component.
    const VeniaSearchPage = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/components/SearchPage/searchPage.js'
    );

    //import the LiveSearchSRLPLoader component in the Component file targeted above.
    const LiveSearchPage = VeniaSearchPage.addImport(
        "import LiveSearchSRLPLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchSRLPLoader'"
    );

    //Placement of the LiveSearchSRLPLoader component at desired location in targeted searchPage component.
    VeniaSearchPage.insertBeforeJSX(
        'div className={classes.sidebar}',
        `<${LiveSearchPage} />`
    );

    //Removing the non-required components from the searchPage component.
    VeniaSearchPage.removeJSX('div className={classes.sidebar}');
    VeniaSearchPage.removeJSX('div className={classes.searchContent}');

}

module.exports = localIntercept;
Copied to your clipboard
const { Targetables } = require('@magento/pwa-buildpack');

function localIntercept(targets) {

    const liveSearchTargetables = Targetables.using(targets);

    //searchPage settings

    //Target the Component where to integrate the LiveSearchSRLPLoader component.
    const VeniaSearchPage = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/components/SearchPage/searchPage.js'
    );

    //import the LiveSearchSRLPLoader component in the Component file targeted above.
    const LiveSearchPage = VeniaSearchPage.addImport(
        "import LiveSearchSRLPLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchSRLPLoader'"
    );

    //Placement of the LiveSearchSRLPLoader component at desired location in targeted searchPage component.
    VeniaSearchPage.insertBeforeJSX(
        'div className={classes.sidebar}',
        `<${LiveSearchPage} />`
    );

    //Removing the non-required components from the searchPage component.
    VeniaSearchPage.removeJSX('div className={classes.sidebar}');
    VeniaSearchPage.removeJSX('div className={classes.searchContent}');

}

module.exports = localIntercept;

Render Live Search category page (LiveSearchPLPLoader) component

To integrate the Live Search Category Page (LiveSearchPLPLoader component), add the LiveSearchPLPLoader to your desired page component. Then remove any unnecessary components from that page. For a vanilla PWA instance, configure your local-intercept.js file as shown below:

Copy
const { Targetables } = require('@magento/pwa-buildpack');

function localIntercept(targets) {

    const liveSearchTargetables = Targetables.using(targets);

    //category page settings

    //Target the Component where to integrate the LiveSearchPLPLoader component.
    const VeniaCategoryPageRoot = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/RootComponents/Category/category.js'
    );

    //import the LiveSearchPLPLoader component in the Component file targeted above.
    const LiveCategoryContentRoot = VeniaCategoryPageRoot.addImport(
        "import LiveSearchPLPLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchPLPLoader'"
    );

    //Placement of the LiveSearchPLPLoader component at desired location in targeted category Page component.
    VeniaCategoryPageRoot.insertAfterJSX(
        'CategoryContent categoryId={uid} classes={classes} data={categoryData} isLoading={loading} pageControl={pageControl} sortProps={sortProps} pageSize={pageSize}',
        `<${LiveCategoryContentRoot} categoryId={uid} />`
    );

    //Target the CategoryContent component from where we would like to remove some elements on category page.
    const VeniaCategoryPage = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/RootComponents/Category/categoryContent.js'
    );

    //Removing the non-required components from the categoryContent component.
    VeniaCategoryPage.removeJSX('<StoreTitle />');
    VeniaCategoryPage.removeJSX('div className={classes.contentWrapper}');
}

module.exports = localIntercept;
Copied to your clipboard
const { Targetables } = require('@magento/pwa-buildpack');

function localIntercept(targets) {

    const liveSearchTargetables = Targetables.using(targets);

    //category page settings

    //Target the Component where to integrate the LiveSearchPLPLoader component.
    const VeniaCategoryPageRoot = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/RootComponents/Category/category.js'
    );

    //import the LiveSearchPLPLoader component in the Component file targeted above.
    const LiveCategoryContentRoot = VeniaCategoryPageRoot.addImport(
        "import LiveSearchPLPLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchPLPLoader'"
    );

    //Placement of the LiveSearchPLPLoader component at desired location in targeted category Page component.
    VeniaCategoryPageRoot.insertAfterJSX(
        'CategoryContent categoryId={uid} classes={classes} data={categoryData} isLoading={loading} pageControl={pageControl} sortProps={sortProps} pageSize={pageSize}',
        `<${LiveCategoryContentRoot} categoryId={uid} />`
    );

    //Target the CategoryContent component from where we would like to remove some elements on category page.
    const VeniaCategoryPage = liveSearchTargetables.reactComponent(
        '@magento/venia-ui/lib/RootComponents/Category/categoryContent.js'
    );

    //Removing the non-required components from the categoryContent component.
    VeniaCategoryPage.removeJSX('<StoreTitle />');
    VeniaCategoryPage.removeJSX('div className={classes.contentWrapper}');
}

module.exports = localIntercept;

Last updated 8/12/2025

Was this helpful?

Yes

No