Creating a Catalog Page

The catalog page is your customers’ entry point to your company’s product portfolio. On this page, they can browse, search, and select products. The following widgets are recommended for a catalog page:

• Search Bar
• Options Facets
• Specification Facet
• Price Range Facet
• Category Facet
• Sort
• Search Results

To learn more about these widgets, see Widgets Reference.

Prerequisites

Before creating a catalog page, you must understand how to use fragments, content pages, and the navigation menus application.

Ensure you also have a product catalog containing products. See Creating a new Catalog for more information.

Add and Configure the Page

1. Go to your site, open the Site Menu () and navigate to Site Builder → Pages.

2. Click New and select Page.

3. Select a master page template or the Blank template and enter Catalog as the name of the page.

4. Click Add.

This opens the page in edit mode.

Add Widgets and Fragments

1. Drag and drop a container and then drop a grid inside it.

2. Change the Number of Modules in the grid to 2 and adjust the size so that the first module is one-third the size of the second module.

3. Inside the first module, drag and drop the following widgets:

   • Search Options
   • Search Bar
   • Option Facet
   • Specification Facet
   • Category Facet
   • Price Range Facet

4. Inside the second module, drag and drop the following widgets:

   • Sort (under Commerce)
   • Search Results (under Commerce)

Configure the Search Options Widget

Using the Search Options widget, you can configure the Search Results widget to display all products without requiring a search query. Your customers can then easily browse through all the products available in your channel.

1. In the Search Options widget, click Actions () → Configuration.

2. Check the Allow Empty Searches checkbox.

3. Click Save.

4. Close the Configuration window.

After enabling this option, all products are visible in the Search Results widget.

By default, products are visible across all channels. However, visibility can be limited to specific channels. See Configuring Product Visibility Using Channels to learn more.

Configure the Search Bar Widget

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

1. In the Search Bar widget, click Actions () → Configuration.

2. Set the Scope to Everything.

   

3. Click Save.

4. Close the Configuration window.

Configure the Specification Facet Widget

You can rearrange the order of specification labels in the specification facet using its priority.

1. In the Specification Facet widget, click Actions () → Configuration.

2. In the Order Specifications By field, choose an option:

   • Specification Group Priority Ascending
   • Specification Group Priority Descending

   Liferay DXP 2024.Q2+/Portal 7.4 GA120+

   • Specification Label Priority Ascending
   • Specification Label Priority Descending

3. Click Save.

4. Close the Configuration window.

See Specifications for more information on creating specification groups and labels.