# Catalog View Select

A small toggle that lets the user flip the active Catalog Display between **list**, **grid**, **gallery**, and **matrix** views. The toggle stays out of the way (just an icon and optional label) and is most often placed at the top of the catalog sidebar or above the catalog area.

## Available in

* Catalog modules
* Public Page modules

## When to use

* Whenever your Catalog Display block has multiple useful view modes configured.
* B2B catalogs where some users prefer dense list view and others prefer image-rich grid.
* Multi-purpose catalog pages serving both quick-entry power users (matrix) and casual browsers (gallery).

## Settings

| Setting                      | Description                                                                      |
| ---------------------------- | -------------------------------------------------------------------------------- |
| **Default View**             | Initial view mode: list, grid, gallery, or matrix. Default: list.                |
| **Show Label**               | Show a text label next to the icon. Default: Yes.                                |
| **Custom Label**             | The label text. Default: *Change View*.                                          |
| **Use Store for View State** | Sync the active view to the app store so Catalog Display reads it. Default: Yes. |

## What it depends on

Catalog View Select controls the view mode of the **Catalog Display** block on the same page. Both blocks must be on the same page and inside the same Catalog module. The available view choices (list, grid, gallery, matrix) match what the Catalog Display has configured.

{% hint style="info" %}
If you want to offer the **matrix** view, the linked catalog must have **Enable Matrix Items** turned on (Catalogs → open catalog → Settings → Enable Matrix Items). Without it, the matrix option shows but renders without variant selectors.
{% endhint %}

## How it works

1. Renders as an icon (matching the active view) plus an optional label.
2. Clicking opens a small view-picker.
3. The user picks a view; the icon updates.
4. If **Use Store for View State** is on (default), the choice writes to `activeCatalogView` in the app state.
5. **Catalog Display** reads `activeCatalogView` and re-renders in the new view mode — the product list stays the same; only the layout changes.

If **Use Store for View State** is off, the toggle keeps its own local state — useful when you want a view picker that doesn't drive Catalog Display.

{% hint style="info" %}
For **Use Store for View State** to actually flip the catalog, the Catalog Display block must also be configured to honour the store-driven view. By default it does — disable it on Catalog Display only when you want a fixed view per page.
{% endhint %}

## Examples

**Standard catalog page.** Catalog View Select at the top of the Left sidebar slot, with Default View = list. Users can flip to grid or gallery as they browse.

**Mobile-friendly default.** Default View = grid, label hidden (Show Label = No). The toggle is just an icon, taking minimal space in a tight mobile header.

**Per-page fixed view.** Use Store for View State = No. The toggle is shown but doesn't drive the catalog — useful if you want to give users an UI affordance without enabling the actual switching.

## 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 block whose view this toggle controls.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr><tr><td><strong>Catalog Layout</strong></td><td>The layout shell — typically the parent of both Catalog View Select and Catalog Display.</td><td><a href="/pages/a2TAHif0CxZaVsEtwolU">/pages/a2TAHif0CxZaVsEtwolU</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-view-select.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.
