Catalog components

Browse, search, filter, and sort products from Shopify collections. Catalog components coordinate through a shared catalog context — changing a filter or sort order updates the product grid automatically.

Product grid

FmCatalog

Displays a product grid from a Shopify collection. Set the collection handle in the property controls panel. Supports pagination and coordinates with filter, sort, and search components.

FmCatalogCollection

Collection-level wrapper. Use when you need to display multiple collections on a single page or control collection-level layout.

FmCatalogItem

Represents a single product card within the catalog grid. Nest product components inside to display price, image, and variants for each item.

FmCatalogResultCount

Displays the number of products matching the current filters and search query (e.g., "24 products").

Sorting

FmCatalogSort

Controls the catalog's sort order via a dropdown. Options include price (low/high), title (A–Z/Z–A), best-selling, and newest.

Searching

FmCatalogSearch

Search input that filters products within the current catalog by title and tags as the visitor types.

FmCatalogSearchResults

Displays matching products for the current search query. Use inside a search results page or dropdown.

FmCatalogSearchLink

Link that navigates to a search results page with the current query. Use in navigation bars alongside a search input.

Filtering

FmCatalogFilter

Narrows products by option values (e.g., Size: S/M/L) or tags. Reads available options from the catalog context and updates the product grid on selection.

FmCatalogFilterCount

Shows the number of matching products for a specific filter value. Useful for showing "(12)" next to a filter option.

FmCatalogFilterReset

Clears all active filters and restores the full product list.

FmCatalogActiveFilters

Lists all currently applied filters. Nest FmCatalogActiveFilterLabel and FmCatalogActiveFilterRemove inside it.

FmCatalogActiveFilterLabel

Displays the name and value of an active filter (e.g., "Color: Blue").

FmCatalogActiveFilterRemove

Remove button for a single active filter. Nest inside FmCatalogActiveFilters.

FmCatalogActiveFilterState

Toggles child visibility based on whether any filters are active. Use to show/hide the "Active Filters" section.

Favorites

FmCatalogFavoriteButton

Toggles a product as a favorite. Persists in the visitor's browser.

FmCatalogFavorites

Displays the visitor's favorited products as a grid. Works like FmCatalog but sourced from local favorites instead of a Shopify collection.

Composition example

Frame (catalog page)
  ├── Frame (toolbar)
  │   ├── FmCatalogSearch
  │   ├── FmCatalogSort
  │   └── FmCatalogResultCount
  ├── Frame (sidebar)
  │   ├── FmCatalogFilter (Size)
  │   ├── FmCatalogFilter (Color)
  │   └── FmCatalogFilterReset
  ├── FmCatalogActiveFilterState
  │   └── FmCatalogActiveFilters
  │       └── FmCatalogActiveFilterLabel + FmCatalogActiveFilterRemove
  └── FmCatalog
      └── FmCatalogItem
          ├── FmProductPrice
          ├── FmProductStockState
          └── FmCatalogFavoriteButton