> For the complete documentation index, see [llms.txt](https://docs.in8sync.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.in8sync.com/client-admin-guide/getting-started/catalog-components.md). # Catalog Components Browse, filter, and select products. The full toolkit for building shopping experiences in Catalog modules. Catalog components are the building blocks of any shopping or product-browsing page — the catalog grid, the categories, the filters, and the layout shell that wraps them. They live in **Catalog** module types and work together as a set: a Catalog Layout wraps a Category Sidebar (or Category Display), filters, and a Catalog Display. {% hint style="info" %} **How these fit together:** see [Common Patterns](/client-admin-guide/getting-started/common-patterns.md) for the recommended catalog page layout, and [Product Components](/client-admin-guide/getting-started/product-components.md) for what happens once a shopper clicks into a product. {% endhint %} ## When you'd reach for this category Every catalog page typically has: 1. A **Catalog Layout** as the shell. 2. A **Catalog Display** in the main slot. 3. A **Category Sidebar** (or **Category Display** for tile-style) for navigation. 4. Optional **Dynamic Filters** for attribute filtering. 5. Optional **Catalog Filter Bar** for an inline sort / search / view-mode strip above the grid. 6. Optional **Catalog View Select** for runtime view switching. 7. Optional **Category Modal** for first-visit guidance. For product detail pages within a catalog, see [Product Components](/client-admin-guide/getting-started/product-components.md). For adding products to an order, see Add to Order Button there. *** ## 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](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-605820bc3294c4aebd620407805df00d197cee78%2Fpb-catalog-display.png?alt=media) ### 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 | | **Formulas / Calculated Fields** | Formula-based columns on product cards — prices adjusted by promotion logic, derived availability, or custom calculations | Calculated fields don't render on product cards; only static product fields appear | ### 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. * **Formula Fields** — if the linked catalog has calculated (formula) fields enabled, you can display them on product cards. Formula fields are computed at render time from product data — useful for derived pricing, promotions, or availability calculations. * 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
Catalog LayoutThe shell that wraps Catalog Display with sidebar slots.#catalog-layout
Catalog View SelectLets the user flip between list / grid / gallery / matrix at runtime.#catalog-view-select
Category SidebarThe companion sidebar that drives category filtering.#category-sidebar
*** ## 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
Catalog DisplayThe primary product-browse block that lives in the Main Slot.#catalog-display
Category SidebarThe category tree for sidebar navigation.#category-sidebar
Dynamic FiltersAttribute filters typically placed in the sidebar.#dynamic-filters
*** ## Category Sidebar A hierarchical category tree for the catalog sidebar. Renders the catalog's category hierarchy as a collapsible tree, with optional product counts and a Clear button. Clicking a category filter actives the Catalog Display to that category's items. > **Note on naming:** The palette label is **Category List**. The underlying file is `CategorySidebar2`. ![Category Sidebar showing a collapsible tree of categories with product counts and one branch expanded](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-6c383c39ab24b4e3c4a8fb6cce86a13c2400a9b5%2Fpb-category-sidebar.png?alt=media) ### Available in * Catalog modules * Public Page modules ### When to use * The standard companion to **Catalog Display** in the sidebar slot of **Catalog Layout**. * Any catalog with category hierarchy users would want to navigate. * For catalogs with very few categories (or none), use **Dynamic Filters** instead — Category Sidebar adds noise to a flat catalog. ### Settings | Setting | Description | | ----------------------------------- | --------------------------------------------------------------------------------------------------------- | | **Enable Category Sidebar** | Master on/off toggle. Default: Yes. | | **Sidebar Title** | Heading text shown above the tree. Default: *Categories*. | | **Only Show Categories With Items** | Hide categories that contain no items. Default: No. | | **Display Mode** | *Treeview* (collapsible tree, default) or *Checkbox* (flat list of checkboxes the user can multi-select). | | **Show Clear Button** | Show a *Clear* button to reset the category filter. Default: Yes. | | **Max Height (CSS)** | Maximum height for the scrollable tree. Default: `24rem`. | | **Show Product Count** | Show item count next to each category. Default: Yes. | | **Count Style** | How counts render — *text* (plain `(12)` after the name) or *badge* (a small pill). Default: text. | ### What it depends on Category Sidebar only renders categories if the linked catalog has **Catalog Categories** enabled. Without it, the sidebar renders but shows nothing. **Check before you add this component:** | What to verify | Where | | ------------------------------------------------------ | --------------------------------------------------------------------- | | **Catalog Categories** toggle is on | **Catalogs** → open the catalog → **Settings** → *Catalog Categories* | | The catalog has been rebuilt after enabling the toggle | **Catalogs** list → **Reprocess** on the catalog row | | The catalog is assigned to this workflow | Workflow **Settings** tab → **Catalog** field | If Category Sidebar is blank at runtime, the most common cause is a catalog that was built before Catalog Categories was turned on. Reprocess the catalog and the tree will populate. ### How it works 1. Reads the **Catalog Categories** data from the linked catalog's output. 2. Renders the category hierarchy as a collapsible tree — parents expand to reveal children. 3. Product counts include items in child categories (recursive). 4. When the user clicks a category, the selection is written to the app state as `selectedCategory`. 5. **Catalog Display** reads `selectedCategory` and filters its visible items — this is the only way Catalog Display knows which category filter is active. 6. The selected category's parent chain auto-expands so the user keeps the context visible. {% hint style="info" %} For catalogs with deeply nested categories, set **Max Height** generously (e.g. `40rem`) and let the tree scroll. Tight heights cause users to lose track of where they are in the hierarchy. {% endhint %} ### Examples **Standard B2B sidebar.** Category Sidebar with default settings, dropped into the Left Slot of Catalog Layout. Pairs with Catalog Display for the classic browse experience. **Big-catalog narrow view.** Sidebar Title = *Browse*, Only Show Categories With Items = Yes, Max Height = `30rem`. Removes empty categories from a large hierarchy. **Compact mobile-first.** Show Product Count = No, Show Clear Button = No, Max Height = `20rem`. Strips noise for a minimal sidebar that works well in the mobile Sheet drawer. ### Related
Category DisplayThe dropdown / grid alternative for showing categories outside the sidebar.#category-display
Catalog DisplayThe block that filters its items based on the selected category.#catalog-display
Catalog LayoutThe shell that wraps Category Sidebar + Catalog Display.#catalog-layout
*** ## Category Display An alternative way to show catalog categories — either as a dropdown menu or as a grid of category tiles with drill-down breadcrumb navigation. Use this when **Category Sidebar** doesn't fit the layout (e.g. on mobile-first pages or when categories should be browseable as tiles). > **Note on naming:** The palette label is **Categories**. The underlying file is `Category2`. ### Available in * Catalog modules * Public Page modules ### When to use * Mobile-first catalog pages where a sidebar would take too much space. * B2C catalogs where category tiles with images are part of the shopping experience. * Catalogs with image-rich categories where browsing by visual is a goal. * As a secondary category navigation in the page header (dropdown style). For the standard sidebar tree, use **Category Sidebar** instead. ### Settings | Setting | Description | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Display as Grid** | Render as a grid of category tiles (Yes) or as a dropdown menu (No). Default: No (dropdown). | | **Only Show Categories With Items** | Hide empty categories. Default: No. | | **Show Clear Button** | Show a *Clear* button to reset the filter. Default: Yes. | | **Show Collapsible Header** | Show a header that the user can collapse. Default: Yes. | | **Header Title** | Header text. Default: *Categories*. | | **Show Image** *(Grid mode only)* | Show category images on each tile. Default: Yes. | | **Show Title** *(Grid mode only)* | Show category title on each tile. Default: Yes. | | **Title Position** *(Grid mode only)* | Title placement: above, below, or overlay on the image. Default: above. | | **Columns** *(Grid mode only)* | Number of columns in the grid. Default: 5. | | **Category Order** | How categories are sorted: *Default* (as configured in the catalog), *A → Z*, *Z → A*, *Most Products First* (by product count), or *Manual* (drag-and-drop reordering). Default: Default. | ### Category ordering Choose how categories appear in the list or grid: * **Default** — the order configured in the catalog. * **A → Z** — alphabetical ascending. * **Z → A** — alphabetical descending. * **Most Products First** — categories with the most products appear first. * **Manual** — you set the order by dragging categories in a list. Useful when certain categories should be featured or appear in a non-alphabetical order important to your business. If you choose **Manual**, the component shows a draggable list where you can reorder categories and set their position number. Any new categories added to the catalog appear at the bottom of your manual order. ### What it depends on Like all category navigation blocks, Category Display reads from the **Catalog Categories** data in the linked catalog. If that data isn't included in the catalog, Category Display renders empty. | What to verify | Where | | ------------------------------------------------------ | --------------------------------------------------------------------- | | **Catalog Categories** toggle is on | **Catalogs** → open the catalog → **Settings** → *Catalog Categories* | | The catalog has been rebuilt after enabling the toggle | **Catalogs** list → **Reprocess** on the catalog row | | The catalog is assigned to this workflow | Workflow **Settings** tab → **Catalog** field | ### How it works **Dropdown mode** (default): renders as a dropdown menu showing the category hierarchy. Click a category to filter the catalog. **Grid mode**: renders as a grid of category tiles. Click a tile to drill into that category's children. A breadcrumb trail appears at the top so users can navigate back up the hierarchy. In both modes, selecting a category writes to `selectedCategory` in the app state and the active **Catalog Display** filters accordingly. Clicking the same category again deselects it. {% hint style="info" %} **Grid mode** is great for B2C — images and tiles invite exploration. **Dropdown mode** is better for B2B — compact, fast for power users who know what category they want. {% endhint %} ### Examples **B2C tiled categories.** Category Display with Display as Grid = Yes, Show Image = Yes, Title Position = overlay, Columns = 4. Used at the top of a B2C catalog above Catalog Display. **Compact dropdown for navigation header.** Category Display in dropdown mode, dropped into a Header Nav slot or top of a sidebar. **Mobile-friendly browse.** Grid mode with Columns = 2, Show Image = Yes, Title Position = below — works well in the Sheet drawer on mobile. ### Related
Category SidebarThe standard sidebar tree alternative.#category-sidebar
Category ModalFor pop-up category browsing on first visit.#category-modal
Catalog DisplayThe product browse that responds to category selection.#catalog-display
*** ## Catalog View Select A view-mode toggle that lets users switch the 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
Catalog DisplayThe block whose view this toggle controls.#catalog-display
Catalog LayoutThe layout shell — typically the parent of both Catalog View Select and Catalog Display.#catalog-layout
*** ## Dynamic Filters Adds a single configurable filter to the catalog. Each Dynamic Filters block is one filter (text input, checkbox group, radio, range slider, or boolean toggle). Drop multiple instances into a sidebar slot to build a full filter panel. > **Note on naming:** The palette label is **Catalog Filter**. The underlying file is `DynamicFilters` / `CatalogFilter`. ### Available in * Catalog modules * Public Page modules ### When to use * Whenever your catalog has filterable attributes (size, colour, brand, price range, in-stock, etc.). * Pair multiple instances in a sidebar slot — one block per attribute. * For text-search across all products, use the **Catalog Display**'s search field instead — Dynamic Filters is for attribute filtering. ### Settings | Setting | Description | | ------------------------------- | ---------------------------------------------------------------------------------------------- | | **Filter Configuration** | Opens the configuration modal — field, type, label, options, scope. | | **Filter Value (Auto-managed)** | Read-only display showing the current filter value at runtime — auto-managed by the app store. | | **CSS Classes** | Additional CSS classes for styling. | The Filter Configuration modal supports: * **Field** — the NetSuite item field this filter targets (e.g. `displayname`, `custitem_color`). * **Type** — text, checkbox, radio, range, or boolean. * **Label** — text shown above the filter. * **Placeholder** — hint text for input-style filters. * **Options** — list of values for checkbox / radio (or auto-populate from catalog values). * **Enabled** — quick disable without removing the block. * **Category IDs** — restrict the filter to specific categories (empty = all). * **Is Global** — apply across all categories (default Yes) or per-category (No, then specify Category IDs). ### How it works 1. On mount, the block registers its FilterConfig with the app store under `activeFilters.dynamic[field]`. 2. The user interacts with the filter; the value is written to the store. 3. **Catalog Display** reads `activeFilters` and re-fetches or re-renders to match. 4. On unmount, the block deregisters its filter so stale state doesn't leak. The block also supports two advanced options: * **`isUseCatalogValues`** — populate the option list from values that actually appear in the current catalog items (avoids showing options that match nothing). * **`isFilterByFilterResults`** — narrow this filter's options based on what's left after other filters have been applied. Filter search styling has been updated — the text input for text-type filters now has a cleaner search appearance with improved contrast for dark mode and smaller screens. {% hint style="info" %} For a clean filter sidebar, drop one Dynamic Filters block per attribute, label them clearly, and set `isUseCatalogValues` to Yes — that way users only see options that match actual products. {% endhint %} ### Examples **Brand + size + colour panel.** Three Dynamic Filters blocks in the Right slot of Catalog Layout — one for brand (checkbox), one for size (checkbox), one for colour (radio with swatches). **Price range slider.** A Dynamic Filters block with Type = range, Field = `price`. Users drag handles to narrow by price. **In-stock toggle.** A Dynamic Filters block with Type = boolean, Label = *In stock only*. A single toggle that filters out out-of-stock items. ### Related
Catalog DisplayThe block that filters its items based on the active filters.#catalog-display
Category SidebarFor filtering by category hierarchy.#category-sidebar
Catalog LayoutThe shell where filter blocks usually live.#catalog-layout
*** ## Catalog Filter Bar A horizontal toolbar that sits above your catalog. It shows how many products are showing (e.g. *24 of 320*), gives the user a one-click view-mode toggle (grid / list / gallery), and exposes a row of quick-filter chips you configure. ### Available in * Catalog modules ### When to use * Above a **Catalog Display** when users need an at-a-glance count of filtered results. * Anywhere you want pre-baked filter shortcuts (e.g. *In Stock*, *On Sale*, *New This Week*) — chips toggle the corresponding catalog filter with one click. * Catalog pages where users frequently switch between view modes — the toggle is faster than a separate Catalog View Select block. For deep filtering (colour, size, price ranges, free-text search), use **Dynamic Filters** in the sidebar instead — Catalog Filter Bar is for shortcuts, not full filter panels. ### Settings | Setting | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show Results Count** | Whether to show *N of M items* on the left of the bar. Default: Yes. | | **Show View Toggle** | Whether to show the grid / list / gallery toggle on the right. Default: Yes. | | **Chips** | A list of `{label, filterField, filterValue}` entries. Each one becomes a clickable chip that applies the named filter when clicked. The first chip is treated as "All" and clears chip-driven filters when clicked. | ### How it works The bar reads the active catalog and currently-filtered list from the page state — it doesn't have its own filter logic. When a chip is clicked, the bar updates the active boolean filters in the catalog state and the catalog re-renders. The view-mode toggle drives the same `activeCatalogView` state that **Catalog View Select** uses, so both blocks stay in sync if both are on the page. ### Examples **Stock-status shortcut.** Two chips: *All Products* (no filter) and *In Stock* (filterField=`stock`, filterValue=`inStock`). Now the user can flip between full and stocked views instantly. **Promotional badges.** Chips for *New*, *On Sale*, *Clearance* — each tied to a custom boolean field on the product record. ### Related
Catalog DisplayThe catalog block this filter bar sits above.#catalog-display
Dynamic FiltersFull attribute-driven sidebar filters.#dynamic-filters
Catalog View SelectStandalone view-mode toggle.#catalog-view-select
*** ## Category Modal A pop-up modal showing the catalog's top-level categories as a tile grid. Useful for guided shopping flows where you want users to commit to a category before browsing items, or to surface a one-time category selector on first visit. ### Available in * Catalog modules * Public Page modules ### When to use * A "What are you shopping for?" first-visit prompt that introduces users to the catalog. * Wholesale catalogs where products are very different by category (industrial supplies vs office supplies) and you want the user to choose first. * Mobile catalog flows where you want to constrain the initial choice to a small set of top-level categories. For ongoing in-context category browsing, use **Category Sidebar** or **Category Display** instead — those are persistent on the page rather than modal. ### Settings | Setting | Description | | ---------------------------- | --------------------------------------------------------------------------------------------- | | **Modal Title** | Heading shown at the top of the modal. Default: *Categories*. | | **Auto Open Modal** | Open the modal automatically when the page loads. Default: Yes. | | **Show Only on First Visit** | Open automatically only on the first visit (subsequent visits won't auto-open). Default: Yes. | | **Show Category Image** | Display category images on the tiles. Default: Yes. | | **Show Category Title** | Display category titles on the tiles. Default: Yes. | | **Title Position** | Where the title sits on the tile: top, bottom, or overlay on the image. Default: bottom. | | **Preview** | Trigger a preview of the modal in edit mode (so you can verify styling). | ### What it depends on Category Modal draws from the same **Catalog Categories** data as Category Sidebar and Category Display. If that toggle is off on the linked catalog, the modal opens but shows no tiles. | What to verify | Where | | ------------------------------------------------------ | --------------------------------------------------------------------- | | **Catalog Categories** toggle is on | **Catalogs** → open the catalog → **Settings** → *Catalog Categories* | | The catalog has been rebuilt after enabling the toggle | **Catalogs** list → **Reprocess** on the catalog row | ### How it works 1. On page load, if **Auto Open Modal** is on (and **Show Only on First Visit** allows), the modal opens. 2. The modal renders top-level categories (parent = null) in a responsive grid: 2 cols mobile, 3 cols sm, 4 cols md, 6 cols lg. 3. The user clicks a category tile. 4. The selection writes to `selectedCategory` in the app state and the modal closes. 5. **Catalog Display** filters its items to that category — this is the only way the modal's category selection reaches the product list. In edit mode the block renders an invisible placeholder (with a dashed border in the editor) so it doesn't block your view of the rest of the page. Use the Preview button to spot-check styling. {% hint style="info" %} Set **Show Only on First Visit** to Yes for a non-intrusive first-time experience — repeat visitors don't get re-prompted. Pair with a small Action Button labelled *Browse Categories* that re-opens the modal on demand. {% endhint %} ### Examples **First-visit category prompt.** Category Modal at the top of a B2B catalog. Auto Open = Yes, Show Only on First Visit = Yes. New users get a one-time category picker. **Mobile-first selector.** Category Modal with no auto-open, triggered manually by a Browse Categories button in the sidebar. Title Position = overlay for tighter tiles. **Category-first design.** Category Modal with Auto Open = Yes, Show Only on First Visit = No. The modal opens every time the catalog loads — appropriate when the catalog is genuinely category-driven. ### Related
Category DisplayThe non-modal alternative — inline grid or dropdown.#category-display
Category SidebarThe persistent sidebar tree alternative.#category-sidebar
ModalThe general-purpose modal block — use for non-category pop-ups.Layout Components
*** ## Quantity Price Breaks Shows the price tiers for a product based on how many the buyer orders. If a product is cheaper at 10 units than at 1, Quantity Price Breaks surfaces those tiers on the product card so the buyer can see exactly what they'll pay before adding to their order. This is a sub-component of the **Catalog Display** block (Catalog2 version) — it appears inside the product card, not as a standalone block on the page. ### Available in * Catalog modules (Catalog2 version of Catalog Display only) ### When to use * B2B catalogs where quantity discounts are common and buyers need to see tiers upfront to make purchasing decisions. * Any catalog where pricing varies by volume and you want to encourage larger orders. If your catalog uses the standard Catalog (v1) block, this component is not available — it is specific to Catalog2. ### Enabling it 1. Open the workflow page in the **Page Builder**. 2. In the block palette, find **Quantity Price Breaks** under the Catalog2 components. 3. Drag it into a product content slot in the Catalog Display block — for example, the list view or grid view product card. 4. Click **Configure Settings** on the component to set the title, table layout, and column labels. 5. Save the page and preview. Price tiers are pulled directly from NetSuite pricing records for each product. No additional data entry is needed in the portal — if NetSuite has quantity price breaks configured for a product, they appear automatically. ### What buyers see Each product card shows the pricing tiers below the base price. Two table layouts are available: * **Vertical** — quantity ranges as rows, price in the right column. Good for a small number of tiers in a compact card. * **Horizontal** — quantity ranges as column headers, price in a single row below. Good for many tiers or wide product cards. Example (vertical layout): | Quantity | Unit price | | -------- | ---------- | | 1–9 | $10.00 | | 10–49 | $9.00 | | 50+ | $7.50 | Rows highlight on hover. Select the layout in the component's **Configure Settings**. ### Common issues * **No tiers appear on a product** — that product doesn't have quantity price breaks set up in NetSuite. Configure them on the item record's pricing sub-tab in NetSuite. * **Tiers don't show at all** — confirm the Quantity Price Breaks component has been added to a product content slot in the Catalog2 block, and that you're using Catalog2, not Catalog (v1). ### Related
Catalog DisplayThe block that hosts Quantity Price Breaks.#catalog-display
Pricing & AvailabilityHow pricing is configured in the Client Admin.Pricing & Availability
*** ## Related
Product ComponentsProduct-side blocks for product detail views.Product Components
Categories OverviewHow catalog categories are managed in NetSuite.Categories
Pricing & AvailabilityHow catalog pricing is calculated.Pricing & Availability