Going Deeper into Live Search and Facets

Have you ever found yourself in that annoying place where you’re clicking through irrelevant search results like a crazy person when shopping online? If yes, you’re a victim of the downside of traditional search. And guess what, that’s exactly what can happen with your customers if you turn to Adobe Commerce’s Live Search! It’s a much-needed upgrade to the traditional search functionality from Magento, which delivers faster, smarter, and AI-driven search results.

While it’s easy to consider Adobe Live Search as an Elasticsearch makeover, it’s much more – it’s a tool to deliver unmatched user engagement and satisfaction through search.

In today’s blog, we’ll decode Adobe Live Search, how it works, why it’s important, and how you can leverage this to deliver personalized search results without keeping your development team on their toes. We’ll cover everything, from installation to customization, client-side rendering, and SEO impact.

Enough talk; let’s jump in.

What is Adobe Live Search?

Built into Adobe Commerce, Adobe Live Search is a cloud-native search service that allows you to push your catalog into the platform, powered by Adobe Sensei. This ensures that you don’t have to host and tune an Elasticsearch cluster yourself.

With the pushed catalog, you can index your products, attributes, categories, and prices in real time, which helps with synonym matching, typo tolerance, dynamic result ranking, and auto-complete suggestions.

Why It Replaces Magento’s Default Search (Elasticsearch-Based)

While merchants have surely benefited from Magento’s built-in Elasticsearch engine, they also had to put effort into failover handling, capacity planning, and ongoing upgrades. Stores have to rely on outdated code or migrate when Elasticsearch 7 reaches end-of-support.

With Adobe Live Search, merchants can avoid all that with a single Composer-installable module (magento/module-live-search-adobe), which offers a seamless connection with Adobe’s managed service. You don’t need to maintain a single server as the infrastructure scaling, software patches, failover, and index updates happen in the background.

Benefits of Adobe Live Search for Your Store

• AI-Driven Relevance: Sensei’s machine learning models are designed to analyze and recognize click and purchase patterns to ensure better rankings, which leads to keeping the high-margin and best-selling products at the top.
• Reduced Latency: It leverages global CDNs to cache your index shards, which leads to query responses under 100 milliseconds even during peak traffic. So, you don’t need to put any additional caching layers on your end.
• Enhanced UX: With faceted PLP updates without reloading entire pages and instant search-as-you-type popovers, it offers unparalleled user engagement. Thanks to real-time filter counts, zero-result suggestions, and contextual synonyms, the shopping experience is elevated.

Technical Integration

As you have a fair understanding of Adobe Live Search, let’s see how you can integrate it into your Magento store.

How to Integrate Live Search Into Magento

1. Use Composer to install the module:
2. composer require magento/module-live-search-adobe
3. Activate the Live Search adapters and execute the setup process:
4. bin/magento module:enable Magento_LiveSearchAdapter Magento_LiveSearchStorefrontPopover Magento_LiveSearchProductListing  
5. bin/magento setup:upgrade

This replaces Magento’s default search providers with Adobe’s search service.

7. Sync your catalog:
8. Make sure that your cron jobs are fully active (run bin/magento cron:run) to keep your products, categories, attributes, and pricing pushed smoothly into Adobe’s Catalog Service. This will ensure that all data is properly indexed and ready for shoppers.

If you really need help to integrate Live Search into Magento, find the best Magento (Adobe) experts.

Storefront JS Injection via <script> and <div id=”searchspring-container”>

The Live Search modules automatically add Adobe’s search SDK script tag and a container element to the layout, without manual theme updates, when a page loads. A RequireJS mixin hooks into the Magento_Search block to insert:

<script src=”https://live-search.adobe.io/sdk.js”></script>

<div id=”searchspring-container”></div>

After loading is complete, the SDK pinpoints the containers, initializes the type-ahead popover, and connects to the PLP container to enable instant faceting.

How Facets Work in Live Search

What are facets?

Facets are stacked filters (attributes such as color, size, price, and brand) that allow shoppers to narrow down result sets without going through keyword guesswork. When it comes to Live Search, the Facets are part of the productSearch GraphQL response, along with product hits.

Configurable in Live Search Admin UI (Adobe Console)

Under Commerce Admin, navigate to Marketing → SEO & Search → Live Search → Facets. You will be able to add, delete, or rename facets, toggle visibility, and preview how they will be displayed on the front-end, all without writing a single line of code. 

How facet priority, label, and order are managed

Every facet is assigned a priority (from 1 to 99) that determines its position in the sidebar: the lower the number, the higher the facet. You can also assign a user-friendly label (for example, “Price Range” instead of “price”) and control whether the facet appears collapsed or expanded by default in the sidebar. Make changes and hit save to deploy instantly, with immediate effect.

Customizing Facets

Now that you know how facets work, let’s jump into the details of how you can customize them.

How to Expose Custom Attributes as Facets

1. Navigate to Stores → Attributes → Product. Now, edit your attribute and set:
   • Use in Search = Yes
   • Use in Layered Navigation = Filterable (with results)
   • Use in Search Results Layered Navigation = Yes
2. Save it and reindex it to have the attribute configurable in the Live Search Admin UI.

Using search_request.xml and Live Search SDK APIs

While Admin Ui is the go-to option for defining and editing facets for most merchants, it can also be done in code using search_request.xml in your module’s etc/ directory:

<request name=”custom_facet_search”>

  <aggregations>

    <aggregation name=”country” type=”terms” field=”country_of_origin”/>

  </aggregations>

</request>

For PWA or headless implementations, Adobe’s Live Search SDK allows you to call:

import { LiveSearchClient } from ‘@adobe/live-search-sdk’;

const client = new LiveSearchClient({ apiKey, engineId });

const resp = await client.productSearch({ facets: [‘country_of_origin’] });

Adding Price Sliders, Color Swatches, or Brand Filters

• Price sliders: To render a draggable slider, visit the Liver Search Admin UI and set up bucket counts or price intervals.
• Color swatches: Mark your color attribute as a “Visual Swatch” to allow the facets to render clickable color dots.
• Brand filters: Expose your brand attribute as a text facet or dropdown because merchants often put this near the top in case someone is searching by brand.

Client-Side Faceting & Rendering

How Facet Data is Returned Via the Live Search API Response

Each search call returns facet metadata and product hits in one payload:

{

  productSearch(query: “sneakers”, filters: […]) {

    items { id, name, price }

    facets {

      title

      field

      options { value, count, label }

    }

  }

}

Using Custom JS/renderers to Tweak Facet Behavior

Magento’s out-of-the-box JavaScript components are able to automatically render checkboxes, sliders, and swatches right from the response. If you need to customize the look or interactivity, you can override the default renderer modules by using RequireJS configuration or directly within your PWA framework (simply point to your own JS file, which works by consuming the facets array and giving the desired HTML as output).

SEO & UX Considerations

How Live Search Affects SEO

To make the filtered pages crawlable, any active facet selection is displayed in the URL with query parameters (e.g. ?color=blue&size=m). You should also have tags on the filtered pages that point back to the main category URL of that section. This will ensure that there are no duplication issues.

SPA-Like Behavior vs Traditional Filter URLs

• Traditional (MPA): Each click on a facet will result in a new page to load with updated parameters, which is simple, crawlable, and will be indexed automatically.
• SPA: For those who are using client-side routing, the best practice for them (you should always do this) is to implement server-side rendering or dynamic rendering so only the pre-filtered HTML is fetched by bots. Otherwise, search engines will see a blank shell with none of the faceted content.

Performance and Caching

How Results are Cached (Or Not)

• Adobe’s CDN: Live Search’s back end uses PoPs all over the world to cache index shards, so it can serve repeated queries in under 100 ms.
• Magento Page Cache: You can use Magento’s native FPC or Varnish to cache filtered PLP URLs (especially the ones with ? parameters). To get the best possible results, enable query string caching in app/etc/env.php.

Tips for Improving Perceived Performance

• Debounce inputs: You should include a 300 ms delay on fast facet toggles or keystrokes to make sure that you are not hammering the API with calls.
• Prefetch SDK: Use <link rel=”preload”> to load the Live Search JavaScript SDK early to ensure that the autocomplete and faceting UI is available as soon as the shoppers click.

Best Practices

To ensure peak storefront performance and unmatched shopping experiences, here are the Adobe Live Search and Facet best practices you may follow.

Always Sync Searchable Attributes With Your Facet Setup

Before using an attribute as a facet, always check whether it’s properly set up in Stores → Attributes → Product. You must mark it as filterable and searchable to have it appear in the Admin facet setup.

Use Metrics (Live Search Dashboard) to Track Facet Usage

Navigate to Commerce Admin → Live Search Performance dashboard to monitor key metrics like zero-result rates, top-used filters, and click-through positions. These insights are invaluable to fine-tuning facet naming, order, and even the attributes that need to be prioritized.

When to Use Native Layered Navigation Instead of Live Search

Magento’s native layered navigation is more than capable of handling simple category pages or small catalogs (generally under 500 SKUs). Adobe Live Search should be used for larger catalogs that include a broader attribute set or need an AI-driven, dynamic experience.

Conclusion

With real-time faceting, cloud-scale performance, and AI-driven relevance, Adobe Live Search ensures that your store offers an impeccable shopping experience with unmatched on-site discovery. You can bypass the self-hosted Elasticsearch and maintenance overhead to get something even smarter and better.

By now, you’ve learned everything from installing the magento/module-live-search-adobe module to setting up and displaying facets on the front-end. By following our step-by-step guide, you can turn your dull search function into a conversion machine that your customers love.