Creating a Catalog Page

The Catalog page is the primary entry point for users to browse products that are being offered in a store. It includes the following widgets: Search Bar, Options Facets, Specification Facet, Category Facet and Search Results. To learn more about Commerce widgets see the Widget Reference.

This article documents an example of how to build a Catalog page without the use of an accelerator.

Add and Configure the Page

  1. Create a Page using the Widget template.

  2. The 30-70 Column Layout is the default selection. This layout has a narrower left column for the widgets that refine the search and a wider right column for the Search Results widget. Storefront designers can choose different layouts for a different style.

Add the Widgets to the Page

  1. Drag and drop the widgets into the desired positions.

  2. Click the 3-dot icon then Look and Feel Configurations to add or remove the widget titles.

After creating and configuring the page with the widgets, a basic Catalog page might look like this:

Blank Catalog Page

Configure the Search Bar Widget

The Search Bar widget must be configured to display data from the Global site scope. This is because all products are stored at the global level and not the site level.

  1. Click the 3-dot icon then Configuration on the Search Bar widget.

    Search Bar Configuration

  2. Select Everything from the Scope drop down menu.

    Everything scope

  3. Click Save.

  4. Close the Configuration window.

The Search Bar widget is now configured to display the content from the entire instance.

Displaying the Full Catalog Without a Search (Optional)

Liferay Commerce allows store managers to display all the products in a catalog in the Search Results widget without having buyers first enter a search query. This is done by configuring the Search Options widget.

  1. Click the Configure additional search options in this page in the Search Options widget.

  2. Check the checkbox for Allow Empty Searches.

  3. Click Save.

  4. Close the Configuration window.

Once this option has been enabled, all the products in this catalog are displayed in the Search Results widget.

Empty Search

Configure Product Channel Filters (Optional)

If there is more than one store site that is housed on the Liferay Commerce instance, the entire catalog becomes searchable on every store site.

To scope product to specific sites, see Configuring Product Visibility Using Channels.