# Catalog Layout

A purpose-built layout for catalog pages. Pick a sidebar arrangement (left, right, both sides, or detailed) and the block exposes slots for the sidebars and the main catalog area.

The block is responsive — desktop shows true sidebars; mobile collapses them into slide-out drawers (Sheets) the user opens via a Filters button.

## Available in

* Catalog modules
* Public Page modules

## When to use

* Almost every catalog page should use Catalog Layout — it provides the standard sidebar/canvas pattern with mobile fallbacks already wired up.
* Pick the layout type based on your catalog's complexity:
  * **Left** — single sidebar (most common, default).
  * **Right** — sidebar on the right (less common).
  * **Left-Right** — two sidebars (e.g. categories left, filters right).
  * **Detailed** — extended layout for catalogs with many filtering surfaces.

For minimal catalog pages without sidebars, you can drop Catalog Display directly into a Row + Column without Catalog Layout.

## Settings

| Setting          | Description                                                            |
| ---------------- | ---------------------------------------------------------------------- |
| **Layout Type**  | Sidebar arrangement: Left, Right, Left-Right, Detailed. Default: Left. |
| **Instructions** | Help text shown in the editor explaining the slot setup.               |
| **Top Slot**     | Optional slot above the main area — for hero, breadcrumbs, search bar. |
| **Left Slot**    | Sidebar content for left-side layouts.                                 |
| **Right Slot**   | Sidebar content for right-side layouts.                                |
| **Center Slot**  | Used by Detailed layout for centred secondary content.                 |
| **Main Slot**    | The main catalog area — Catalog Display drops here by default.         |

## How this fits in the catalog page

Catalog Layout is the container — everything else sits inside it. The typical arrangement:

```
Catalog Layout
├── Left Slot   → Category Sidebar (needs Catalog Categories on the catalog)
│                  Dynamic Filters
│                  Catalog View Select
└── Main Slot   → Catalog Display (the product grid)
```

The blocks inside the slots **communicate through shared app state**:

* **Category Sidebar** writes the selected category → **Catalog Display** reads it and filters items.
* **Dynamic Filters** write active filter values → **Catalog Display** reads them and re-fetches items.
* **Catalog View Select** writes the view mode → **Catalog Display** reads it and switches layouts.

None of this wiring requires extra configuration — it happens automatically when the blocks are on the same page.

## How it works

* Desktop: sidebars render at fixed widths alongside the main canvas.
* Mobile: sidebars collapse into Sheet drawers, accessed via a *Filters* button with a filter icon. This happens automatically — no separate mobile configuration needed.
* Slot routing depends on Layout Type — only the slots relevant to the chosen layout receive content.
* The Main Slot pre-populates with a Catalog Display block when the layout is dropped onto a fresh page.

{% hint style="info" %}
Drop **Category Sidebar** and **Dynamic Filters** into the appropriate sidebar slot for the standard browse experience. Add a **Catalog View Select** in the top of the sidebar to let users switch between list / grid / gallery / matrix.
{% endhint %}

## Examples

**Standard B2B catalog.** Catalog Layout with Layout Type = *Left*. Left Slot has Category Sidebar + Dynamic Filters. Main Slot has Catalog Display in list view.

**B2C with right-rail filters.** Layout Type = *Right*. Right Slot has Dynamic Filters. Main Slot has Catalog Display in grid view. Top Slot has a Hero banner.

**Two-sidebar power-user view.** Layout Type = *Left-Right*. Left Slot has Category Sidebar. Right Slot has Dynamic Filters. Main Slot has Catalog Display in matrix view for quick entry.

## 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 Display</strong></td><td>The primary product-browse block that lives in the Main Slot.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr><tr><td><strong>Category Sidebar</strong></td><td>The category tree for sidebar navigation.</td><td><a href="/pages/iHgOoEc4CBkQG9A3oaPT">/pages/iHgOoEc4CBkQG9A3oaPT</a></td></tr><tr><td><strong>Dynamic Filters</strong></td><td>Attribute filters typically placed in the sidebar.</td><td><a href="/pages/WmtioBx6PPBCaAd164X8">/pages/WmtioBx6PPBCaAd164X8</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-layout.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.