Product Discovery

Successful storefronts must provide a clear and intuitive product discovery experience. After all, customers cannot purchase what they cannot find. The two primary ways customers find products are by browsing the site's navigation and by using its search functionality. This lesson explores how to design and configure both paths to create a seamless discovery experience.

Navigation is the primary way customers move through your storefront. A complete navigation strategy must guide users to both your static content pages and your dynamic product catalog. To manage these different types of links efficiently, Liferay provides two distinct tools.

The main navigation menu is your site’s most visible guidepost. A clear, logical menu reduces friction and sets a strong first impression. In Liferay, you use the Navigation Menu application to create custom menus for site pages and content items. This tool is ideal for building menus that link to key destinations like the home page, content pages, and utility pages.

Displaying Product Categories

For product catalog navigation, manually adding every category to a menu is inefficient and difficult to maintain. Liferay’s Commerce Categories Navigation widget automatically reads your product catalog and displays its categories and subcategories. If you add a new "Sunglasses" category to your catalog, it appears instantly, keeping your navigation in sync with your products without any manual updates.

NOTE
See Creating a New Product Category to better understand how to organize your products.

Using both of these tools is the key to an effective storefront. The navigation menu handles your static content, while the Commerce Categories Navigation widget handles your dynamic product catalog. This creates an experience that is both easy for customers to browse and for you to maintain.

Configuring Commerce Search

While navigation is key for browsing, many shoppers go straight to the search bar. A fast, relevant, and filterable search experience is an essential path to conversion. When a user searches, they are taken to a dedicated search results page. Effective search pages rely on three key components: a search bar, search results list, and facets for filtering. Liferay provides dedicated widgets for each of these, making it easy to assemble a high-performance search page.

NOTE
Liferay provides two different widgets named Search Results. For a commerce search page, you must use the commerce-specific widget to properly display product search results.

In addition to these widgets, Liferay search experiences rely on display page templates. These templates define the visual layout and design of the product detail page that users reach when they click a search result. Without an assigned template, your products may appear in search results, but they are not clickable.

Creating these templates uses Liferay’s visual page editor, enabling you to quickly drag and drop elements to implement your designs. Additionally, by separating product data from its presentation, display page templates enable you to create multiple product experiences for different user segments.

While display templates control how individual products are displayed, customers also need the ability to filter search results. A customer who searches for sunglasses and receives 5,000 results will quickly feel overwhelmed. To solve this, you must provide tools to help them refine results. This is the primary function of facets.

Facets are smart, clickable filters generated directly from your content and product data. Liferay provides several out-of-the-box facet widgets designed specifically for commerce. These are some key examples:

Specification Facet: Filters by a product's descriptive attributes (e.g., "Frame Material," "UV Rating"). This is ideal for helping customers narrow down a large catalog to products with the specific features they want.
Option Facet: Filters products by purchasable variants (e.g., "Color," "Size"). This enables customers to quickly identify the specific items they want to purchase.
Price Range Facet: Filters products based on their price and is often displayed as a slider or manual input field. This enables customers to ensure search results fit their budget.

You can also add general-purpose facets like Category or Tag, or implement custom facets for advanced filtering based on any indexed product data.

Enabling Product Comparison

For products with detailed specifications, side-by-side comparison reduces decision fatigue and increases conversion. Enabling product comparison relies entirely on out-of-the-box widgets and functionality.

The ability to select products for comparison is typically provided by Product Card fragment or the Product Details widget within search results and product listing pages. To complete your setup, you should add the Product Comparison Bar widget to your search page and create a dedicated comparison page using the Product Comparison Table widget. This enables customers to compare specifications and available options across your catalog.

Best Practices for Product Discovery

To create an intuitive search and navigation experiences, follow these best practices:

Prioritize Facets for Filtering: Ensure that “Use in Faceted Navigation” is enabled for key product specifications and options. This configuration makes the product attributes available as filters, empowering users to refine their results quickly and reducing decision fatigue.
Optimize Search Results Display: If your customer categories have different needs (e.g., B2B vs. B2C buyers), use different display page templates to satisfy those needs. Besides using different channels, you can use multiple display templates within the same channel by leveraging Liferay’s personalization capabilities.
Enable Search Suggestions: Turn on autocomplete to guide users to the right products faster. By displaying suggested terms as the user types, you help users discover your products while reducing effort.
Optimize the "No Results" Experience: Avoid dead ends when a search returns no matches. You can personalize this experience to display helpful alternatives (e.g., links to popular categories, featured products, relevant content). This keeps the customer engaged and ensures they always have a path back to discovery.

Adhering to these principles ensures your storefront’s core discovery paths are optimized to connect every customer with the exact products they need.

Clarity plans to tailor its discovery experience for each channel. For their B2C site, the main navigation menu will feature prominent links to key categories like "Sunglasses" and "Frames" to encourage browsing. They will also implement a visual grid layout for search results and enable facets for "Frame Style" and "Color." For the B2B portal, the focus will be on efficiency. The navigation will include direct links to "My Account" and "Shopping Lists," while the search results will use a list view to display SKUs and stock levels clearly.

Conclusion

Successful storefronts require strong browsing and search paths to help customers discover products. By implementing intuitive navigation and leveraging Liferay’s search tools, you can ensure customers always find what they need.

Next, you’ll apply these concepts by configuring navigation for Clarity's B2C storefront.