thegeneralyst/AnopaDocs
Catalog & Search

Anopa Catalog

Core product display engine that replaces a Framer CMS Collection List with live Shopify products, applying all active filter, sort, and search state across Catalog, Wishlist, and Search modes.

What it does

Anopa Catalog is the core product display engine. It connects to a Framer CMS Collection List and replaces its items with live Shopify products, automatically applying all active filter, sort, and search state. It supports three modes:

  • Catalog – standard filtered product grid
  • Wishlist – shows only favourited products
  • Search – filters by the ?q= URL parameter

It auto-discovers which CMS fields map to Shopify data (title, price, images, handle, etc.) on first load and caches the mapping for the session. It can map up to two image fields: IMAGE (primary/featured) and IMAGE2 (hover/alternate).

AnopaCatalog responds to all filter store state, including categories, tags, collections, colors, vendors, variant options, price range, search query, and sort order. It supports pagination (Load More or Next/Previous with optional page numbers), staggered entrance animations, and responsive layout overrides.

How to set it up

  1. Create a CMS Collection List in Framer and style it as your product grid.
  2. Connect the list to the Desktop Collection slot of AnopaCatalog.
  3. Optionally, create a mobile-optimised CMS list and connect it to the Touch Collection slot. This list swaps in at the tablet breakpoint.
  4. On first load, AnopaCatalog auto-discovers field mappings between the CMS items and Shopify products (title, price, images, handle, etc.) and caches this mapping for the session.
  5. Configure pagination, animations, and responsive layout overrides as needed.
  6. Provide Loading, Empty, and Search Prompt state components for better UX.

Key behaviours

  • Auto field mapping
  • Scans CMS items and Shopify products to match fields by value

Property Controls

ControlTypeDefaultDescription
ModeEnumCatalogSelects how AnopaCatalog behaves: Catalog (standard filtered product grid), Wishlist (only favourited products), or Search (filters by the ?q= URL parameter).
Respond to SearchBooleantrueWhen true, applies the search query (e.g. ?q=) in addition to filters and sort. When false, ignores search but still applies all other filter and sort state.
———Framer CMS Collection List slot used as the primary product grid on desktop. AnopaCatalog replaces its items with live Shopify products.
———Optional mobile-optimised CMS Collection List slot. Automatically swaps in at the tablet breakpoint for touch devices.
Loading StateComponentInstance—Component shown while AnopaCatalog is performing the initial data load and field mapping.
Empty StateComponentInstance—Component shown when no products match the current filters, search query, or sort state.
Search PromptComponentInstance—Component shown in Search mode before the user has entered a search query, prompting them to start typing.
LayoutObjectStack or GridControls the base layout of the product list: stack or grid, direction, gap, columns, and alignment for the desktop breakpoint.
AnimationObjectDisabledConfigures staggered entrance animations, including enable/disable, preset (seven options), duration, stagger, delay, and easing.
ResponsiveObjectInherit desktopDefines tablet and phone breakpoint layout overrides, including layout type, direction, gap, columns, and alignment. Also controls when the Touch Collection swaps in.
PaginationObjectDisabledEnables and configures pagination: type (Load More or Next/Previous), items per page, and button styling, with optional page numbers.