DOCUMENTATION

Product Catalog

Last updated May 2026
Commerce Block
All plans

A full storefront with a category sidebar and a responsive product grid. Shows all active products by default, with live category filtering via the sidebar. The block reads from the shared commerce shell — no per-block configuration needed if you already have a Product CMS on the page.

Layout

A narrow sidebar on the left lists all categories that have at least one active product. An "All" option at the top shows the full catalogue. The main area is a responsive grid: 2 columns on mobile, 3 on tablet, 4 on desktop.

Category filtering

Click a category
Filters the grid to show only products in that category. The URL does not change — filtering is client-side only.
Click All
Clears the filter and shows all active products.

Product cards

Each card shows the primary image, product name, and price badge. Draft products are shown in the editor with a status badge and reduced opacity — they are hidden completely on published pages. Clicking a card navigates to the product's page.

Settings

Category filter
Optionally scope the catalog to a single category by passing a categoryId. Products outside that category are excluded even before client-side filtering.
ℹ
The Product Catalog and Related Products blocks share a SWR cache keyed tocommerce:shell. If both are on the same page, only one fetch happens regardless of how many commerce blocks are present.
← PreviousProduct Grid