Product catalog

General usage: use this component to create an overview of products per product category

Component name in Channel: Product catalog v2

Specification: A product catalog consists of two items: a document of type Product catalog and a component with name Product catalog v2. The document is used by the component therefore it's easiest to create the document first.


  • Document: a document of type Product catalog must be selected

Creating a product catalog document

A product catalog document consists of four properties:

  • Title
  • Filter query
  • Big promotion
  • Small promotion
  • Category external ID
  • Rule contexts

In this example a product catalog will be created in which sunglasses for men are listed of the brand Ray-ban. To create a document, login to the CMS:

  1. Go to the content section in the CMS and navigate to the directory that is logical to what the product catalog has to show. In this case [OpCo] / [language] / Product category pages / Sunglasses / Men
  2. Create a document on type product catalog as shown in this figure:
  3. Give it a name e.g. Ray-ban 
  4. Fill in the document with a title, big and small promotion. The big promotion has to be an banner document with an image of a 2 x 1 tile and the small promotion has to be a banner document with an image of a 1 x 1 tile.
  5. The filter query is simply a URL of a filter result. Getting one done by following these steps:
    1. Go to the search page
    2. Add the wanted filters
    3. Copy the URL from the address bar
    4. Paste the URL in the Filter query textbox in the CMS
  6. The filled in document will look like this
  7. The Category external ID is an ID that adds an extra category to the filtering. In the case of the image above the ID sale-50 is used which is configured in Commerce Tools.
  8. The Rule contexts are configured in Algolia by Algolia editors. These are used to apply additional filtering options which affect the way a Product catalog is displayed.
  9. Save & Close the document
  10. Publish the document

Take a look at the component live right here:

1695 Resultados