# Catalog Display

The primary product-browse block for Catalog modules. Renders items from the linked catalog in one of four view modes — **list**, **grid**, **gallery**, or **matrix** — and exposes separate slot configuration for each view (so the list layout can differ from the grid layout).

The user can switch view modes at runtime if a **Catalog View Select** is on the page.

> **Note on naming:** The palette label is just **Catalog**. Some docs and the underlying code call it *Catalog2* / *Catalog Display*.

![Catalog Display rendering products in grid view with category sidebar to the left and product cards across the canvas](/files/MAYHfkf8oTWum4vVXBHQ)

## Available in

* Catalog modules
* Public Page modules

## When to use

* Every Catalog module page that's about browsing products has Catalog Display somewhere.
* Pair it with **Catalog Layout** for the standard sidebar-and-canvas shell.
* Multiple Catalog Displays are uncommon — typically use one per catalog page.

## What catalog settings unlock

Catalog Display is configured in the Page Builder, but what it can show depends on what was enabled when the catalog was built. Turn on these toggles in **Catalogs** → open the catalog → **Settings**, then **Reprocess** the catalog:

| Catalog setting          | What it enables on Catalog Display                                      | Without it                                              |
| ------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------------- |
| **Price Levels**         | Multiple prices per item — different rates for different customer types | Only the base price shows                               |
| **Quantity Breaks**      | Tiered pricing shown per item                                           | Flat price regardless of order quantity                 |
| **Locations**            | Stock levels per location on each product card                          | No location inventory shown                             |
| **Catalog Categories**   | Category Sidebar / Category Display / Category Modal all work           | Category components render but show nothing             |
| **Enable Matrix Items**  | Variant selectors (size, colour, etc.) on product cards                 | Matrix items either don't show variants or don't appear |
| **Enable Shopping Cart** | **Selected Order Form** option appears in Advanced Configuration        | Items can be browsed but not added to any order         |

## Settings

| Setting                    | Description                                                                                                                   |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **Configure View**         | The view mode shown in the editor while you design: list, grid, gallery, or matrix.                                           |
| **Advanced Configuration** | Opens the configuration modal — catalog selection, default view, default order form, sort, pagination, search, and filtering. |
| **List view slots**        | Three slots — image, content, tabs — that define what each item looks like in list view.                                      |
| **Grid view slots**        | Three slots — image, content, tabs — for grid view.                                                                           |
| **Gallery view slots**     | Three slots — image, content, tabs — for gallery view.                                                                        |
| **Matrix view slots**      | Three slots — image, content, tabs — for matrix view.                                                                         |

The Advanced Configuration modal supports:

* **Catalog** — which catalog to render.
* **Default View** — list, grid, gallery, or matrix.
* **Selected Order Form** — the order form to add items to.
* Sort, pagination, search, filtering, and product-card field selection.

## How it works

1. Reads the configured catalog and the workflow's default price level.
2. Fetches items from NetSuite via the Catalog API.
3. Renders items in the active view mode using the slots configured for that view.
4. Listens to selected category, active filters, and search query — re-fetches or re-renders accordingly.
5. Item interactions (Add to Order, view detail) update the page's order state via the chosen Order Form.

In edit mode, the canvas shows a simplified version of the configured view so you can drop in the right blocks without runtime data overhead.

{% hint style="info" %}
The four view modes share the same product list — they just render it differently. Configure each view's slots once and the user can flip between them at runtime via **Catalog View Select** without losing context.
{% endhint %}

## Examples

**Standard catalog page.** Catalog Layout (left sidebar) with Category Sidebar in the sidebar and Catalog Display in the centre. Default View set to *list* for B2B; *grid* for B2C.

**Showroom view.** Catalog Display with Default View *gallery*, slots configured to show large images and price.

**Quick-entry mode.** Catalog Display with Default View *matrix*, slots showing SKU + variants + add-to-order — used by experienced cashiers entering products quickly.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Catalog Layout</strong></td><td>The shell that wraps Catalog Display with sidebar slots.</td><td><a href="/pages/a2TAHif0CxZaVsEtwolU">/pages/a2TAHif0CxZaVsEtwolU</a></td></tr><tr><td><strong>Catalog View Select</strong></td><td>Lets the user flip between list / grid / gallery / matrix at runtime.</td><td><a href="/pages/XfnKszbW3hwwMbJ5UCbc">/pages/XfnKszbW3hwwMbJ5UCbc</a></td></tr><tr><td><strong>Category Sidebar</strong></td><td>The companion sidebar that drives category filtering.</td><td><a href="/pages/iHgOoEc4CBkQG9A3oaPT">/pages/iHgOoEc4CBkQG9A3oaPT</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/catalog-components/catalog-display.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.