Storefront Popover

When Live Search is installed, a popover appears in the storefront when shoppers type in the Search box. With each character typed, the popover is updated with suggested products and thumbnail images of the top search results.

Live Search returns results for a query of two characters or more. For a partial match, the maximum number of characters per word is 20. The number of characters in a “search as you type” query is not configurable.

Searchable attributes

To produce highly-targeted results, review the set of searchable (searchable=true) product attributes. To ensure relevancy, make attributes searchable only if they contain content that has a clear and concise meaning. Avoid using attributes that contain less precise, lengthy text such as description, which although search-enabled by default, can reduce the precision of search results. For example, if a person searches for “shorts” and there are shirts with a description that includes the term “short sleeves”, then the shirts will be included in the search results.

The following attributes are always searchable:

  • sku
  • name
  • categories

Live Search popover

Popover page size

The page size of the popover determines how many lines of autocompleted products can be returned. Previously, the page size was hardcoded as six lines. However, the page_size value is now a setting that can be configured from the Admin. During the Live Search installation, the page_size value changes to the current value of the Catalog Search - Autocomplete Limit setting.

By default, the Catalog Search - Autocomplete Limit value is set to eight lines (or rows). To change the page size of the popover, do the following:

  1. On the Admin sidebar, go to Stores > Settings > Configuration.
  2. In the left panel, expand Catalog and choose Catalog from the list of settings.
  3. Expand the Catalog Search section.
  4. Set the Autocomplete Limit to the number of lines that you want to allow in the popover.
  5. When complete, click Save Config.

Catalog Service

The Catalog Service for Adobe Commerce extension provides rich view-model catalog data to quickly and fully render product-related storefront experiences. Catalog Service can be used in conjunction with Live Search to provide functionality that is not currently supported by the native extension:

  • Color swatches
  • Extended attributes
  • Other product information can be brought in

Merchants may customize and extend widgets or storefront elements by using Catalog Service, but this is out of scope for Adobe’s support team.

Headless implementations

For those with headless implementations, it is possible to install the Live Search popover with an npm package.

Limitations

  • The Live Search storefront popover is available only for stores that use the Luma theme, or a customized theme that is based on Luma. Breadcrumbs on the search results page will not have Luma styling.
  • The popover does not support the Blank theme. See Styling Popover Elements to learn more.
  • The popover is not supported on the Quick Order form.
  • Wishlists and product comparisons are not supported.

On this page