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.

NOTE

The Live Search storefront popover is available only for stores that use the Luma theme, or a customized theme that is based on Luma. The Luma theme is included in the Commerce sample data. The popover does not support the Blank theme. See Styling Popover Elements to learn more.

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.

On this page