Creating the Catalog Page

The catalog page displays all of Clarity’s products for its business customers. The page contains a list of all the products, their associated facets, and search and sort functionality.

Adding a Container for Products and Facets

1. Drag and drop a container.

2. Click the container and open its settings. In the General section, set the Container Width to Fixed Width.

3. Go to the Styles tab and in the Spacing settings, choose Spacer 5 for the margin on the top of the element.

4. Drag and drop a Grid fragment inside this container.

5. In the right sidebar menu, set the Number of Modules to 2. Adjust the size of the first module so that it takes up one-fourth of the total size of the container.

Adding the Search Bar and Facets

1. Inside the first module of the grid, drag and drop a Search Bar fragment from the left menu.

2. Go to its Styles section from the right sidebar menu and set its Margin Top to 3.5rem.

3. Click Actions () on the fragment, and choose Configuration.

4. Set the scope to Everything and click Save.

5. Drag and drop these widgets under the search bar, one below the other:

   1. Option Facet
   2. Category Facet
   3. Price Range Facet
   4. Specification Facet

6. Click Actions () on the category facet and choose Configuration.

7. Choose Select Vocabularies and select Clarity from the Global scope.

8. Click Save.

9. Click Actions () on the price range facet and choose Configuration.

10. In the Ranges JSON Array textarea, paste the following array:

    [
       {'range': '[0 TO 299.99]'}\,
       {'range': '[300 TO 499.99]'}\,
       {'range': '[500 TO 699.9]'}\,
       {'range': '[700 TO 899.99]'}\,
       {'range': '[900 TO 1199.99]'}\,
       {'range': '[1200 TO *]'}
    ]
    

11. Click Save.

12. Finally, drag and drop a Search Options widget below the specification facet.

13. Click Actions () and select Configuration.

14. Check the box to Allow Empty Searches.

15. Click Save.

16. In the left hand layout menu, hide the search options widget.

Adding the Products

1. From the left menu, drag and drop a Sort widget from the Commerce section to the second module of the grid.

2. Right below this, drag and drop the Search Results widget, again from the Commerce section.

3. Click Publish.

With that you have a catalog page displaying all the products in the catalog. There’s also a search bar to search for products along with several functioning facets.

Next: Creating a Catalog Page