---
title: "Product catalog element: a grid from your store"
description: "Display a grid of products from your e-commerce catalog, filtered by category or search, with adjustable columns and spacing."
url: https://docs.vivlab.com/en/editor/menu/product-catalog
---

# Product catalog

The **Product catalog** element displays a grid of products from your e-commerce catalog. Each card presents the product's image, name and price, and leads to its full product page on click. Unlike the [Product on sale](https://docs.vivlab.com/en/editor/menu/product.md) element, which features a chosen by you item, the grid fills itself from the filters in the **Search** subsection.

A **grid** arranges products in rows and columns. Its filters decide which products appear; changing the grid's appearance does not edit the product descriptions or prices.

<DocsScreenshot name="editor-catalog-search" alt="The catalogue filtered by the search term céramique." :width="343" :height="339" />

## Search

The **Search** subsection determines which products appear in the grid:

- **Category**: limits the displayed products to a category or subcategory of your store. The selector lists your [categories](https://docs.vivlab.com/en/sections/collections.md) with their full path (for example "Shop > Women > Dresses"). Leave the field empty to draw from the whole catalog.
- **Search query**: filters the products with a text search, the way a visitor would in the [search bar](https://docs.vivlab.com/en/editor/menu/searchbar.md). Leave empty to show all.
- **Sort**: the order of products in the grid. Four options: **Default sort**, **Update date (recent)**, **Creation date (recent)** and **Manual order**, which follows the order set via **Reorder** in the [Products](https://docs.vivlab.com/en/sections/products.md).

## Grid

- **Number of products**: the maximum number of products displayed, from 1 to 100.
- **Columns**: the number of products per row, from 1 to 6. Set it separately for desktop and mobile; without a setting, the grid shows 4 columns on desktop and 2 on mobile.
- **Horizontal spacing**: the gap between columns, in pixels.
- **Vertical spacing**: the gap between rows, in pixels.

## Product style

The **Product style** subsection adjusts the look of the cards, applied to every product in the grid:

- **Image ratio**: forces a fixed ratio for the product images (**1/1**, **5/4**, **7/5**, **3/2** or **16/9**). Images are then cropped to fill their frame, which keeps the grid regular even when your photos have different dimensions. When disabled, each image is shown whole in a square frame.
- **Predefined roundings**: the corner radius of the product visuals, from **None** to **Full**, with the same settings as the [Rounded corners](https://docs.vivlab.com/en/editor/style/border-radius.md) subsection: a global radius with a slider, or a different radius per corner via **Edit each corner**.

## Style

The [style panel](https://docs.vivlab.com/en/editor/style/index.md) gathers the [text style](https://docs.vivlab.com/en/editor/style/text.md) (product names and prices), [background](https://docs.vivlab.com/en/editor/style/background.md), [borders](https://docs.vivlab.com/en/editor/style/border.md), [corner radius](https://docs.vivlab.com/en/editor/style/border-radius.md), [shadow](https://docs.vivlab.com/en/editor/style/box-shadow.md), [inner margins](https://docs.vivlab.com/en/editor/style/padding.md), [vertical alignment](https://docs.vivlab.com/en/editor/style/align.md), [visibility](https://docs.vivlab.com/en/editor/style/display.md) and [transitions](https://docs.vivlab.com/en/editor/style/transition.md).