Filtering & Sorting

You can filter and sort collection items on your pages to build directories, listings, blogs, marketplaces, and other data-driven experiences. Filters reduce the dataset before items render, and sorting controls the display order.

Adding Filters to a Collection List

Filters are configured on collection layers (Collection List elements). Each filter targets a collection field and applies a condition to include or exclude items.

1. Select a Collection List layer on the canvas
2. In the right panel, open the Filters section
3. Click + to add a filter condition
4. Choose a collection field to filter by
5. Select an operator and enter a value

Filtered items update immediately in the editor preview.

Filter Operators

Available operators depend on the field type:

Text Fields

Text, rich text, email, phone, and color fields support:

Number Fields

Date Fields

Date filters support relative presets in addition to custom dates. When configuring a date filter, select a preset from the dropdown or choose “Custom date” to enter a specific date.

Presets are resolved dynamically at render time, so a filter set to “Today” always shows items matching the current date without needing manual updates.

Boolean Fields

Reference Fields

Reference and single-asset fields support:

When you use is one of or is not one of, a multi-select dropdown loads items from the referenced collection so you can pick values directly.

Multi-Reference Fields

Filter Logic

Filters use a group-based logic system:

• Conditions within a group use OR logic — an item passes if it matches any condition in the group
• Groups use AND logic — an item must pass all groups to appear

This lets you build expressive filters. For example, to show products that are “Electronics” or “Books” AND cost less than $50, create two groups: one with category conditions (OR) and one with a price condition.

Adding Multiple Conditions

To add an OR condition within a group, click the + button next to “Or” inside the group.

To add an AND group, click the + button at the top of the Filters panel.

Sorting

Control the display order of collection items using the sort settings on the collection layer:

When sorting by a field, you choose the field and the direction (ascending or descending). Common sort fields include date (newest first), name (alphabetical), or price (low to high).

Pagination

When a collection has many items, enable pagination to split them across pages:

1. Select a Collection List layer
2. In the right panel, find Pagination
3. Enable pagination and choose a mode:

Set the items per page count to control how many items appear at once. Pagination works with filters — only items that pass the filters are counted and paginated.

Styling Pagination Controls

When pagination is enabled, Ycode generates pagination controls (previous/next buttons, page info text). You can style these controls through the pagination layer settings in the design panel.